Change`id` of <Form> javascript or jquery element

Asked

Viewed 7,978 times

2

I need to change the id of a form in HTML with javascript at runtime.

I’m trying with Jquery and Javascript, but it’s not working.

jQuery(this).prev("form").attr("form", "form_modulo");

or

document.getElementById('form').id = 'form_form_modulo';

Neither works, when I see the code of the page is still old value

javascript jquery

  • @Andersoncarloswoss , It was time to type here wrong writing, I already updated the question. Obg

  • What is the need to change the value of id of an element? And no use looking at the source code of the page. It does not change. You need to look at the DOM in the browser development tools.

3 answers

3

You can try something like:

$('#meu_form').attr('id','novo_id');

  • I tried to make $('#form'). attr('id','new_id'); The name of my form is form

  • And yet it doesn’t work @Intelidersistemas?

  • 1

    @Fabianolothor worked obigado, was wrong in logic

2


To change the ID you can change the property of the DOM object or the attribute of the HTML element. These are different things, I explained more about this here in this other answer.

Change property:
(You mentioned this way in the answer, and it’s correct. It’s one of the ways)

// JavaScript nativo
document.getElementById('form').id = 'form_form_modulo';
// jQuery:
$('#form').prop('id', 'form_form_modulo');

Change attribute:

// JavaScript nativo
document.getElementById('form').setAttribute('id', 'form_form_modulo');
// jQuery:
$('#form').attr('id', 'form_form_modulo'):

Both do what you want, but changing only the property will not be visible in HTML when inspecting with dev tools.

I read in the comments you tried to

function SalvarBotoes() {
  alert($('#form').attr('id'));
  $('#form').attr('id', 'form_modulo');
  alert($('#form').attr('id'));
  form.submit();
}

The reason this give Undefined is because the last call to $('#form') It will no longer give anything exactly because you changed the ID and this selector no longer finds any element with this ID. You would have to have:

function SalvarBotoes() {
  var $form = $('#form');
  alert($form.attr('id'));
  $form.attr('id', 'form_modulo');
  alert($form.attr('id'));
  $form[0].submit();
}

1

$(document).on('click', '#texto', function(){
  alert($(this).attr('id'));
  $(this).attr('id', 'NewID');
  alert($(this).attr('id'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="texto">TEXTO</button>

Follow the example

  • I saw the example working ok, however, by my lack of interaction with Jquery, javascript not being able to adapt to what I need, trying to do so function SalvarBotoes() {&#xA; alert($('#form').attr('id'));&#xA; $('#form').attr('id', 'form_modulo');&#xA; alert($('#form').attr('id'));&#xA; form.submit();&#xA;}, but in the last Alert where should change the name of the send form returns only Undefined. If I put the $('#form').attr('form', 'form_modulo'); , it does not change the id.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.