changin form ID and using button submit event firing old submit ID

Question

I have apiece of code where i am changing the ID of the form like this;

$("form").prop('id','FormApplied');

before the above formID was Form1

i have two functions

$(document).on('submit','#FormApplied',function(e) {

$(document).on('submit','#Form1',function(e) {

it is always firing the Form1, even i had changed the formID, how can i fix that because both functions have separate logic written

Thanks

I am more curious why you would do such hackery? What are you trying to achieve here? You can try attr instead of prop $("form").attr('id','FormApplied'); — Adrian Brand, Sep 25 '18 at 01:11
so i can use that id to do some different logic - one logic is for addition and when i rename the id to different one that has the logic of deletion — Jakes, Sep 25 '18 at 01:11
https://stackoverflow.com/questions/15774511/replace-form-id-with-new-id — NullPointer, Sep 25 '18 at 01:16
i looked at the same question before posting, but it is not the way, that is why i posted — Jakes, Sep 25 '18 at 01:20

score 1 · Answer 1 · answered Sep 25 '18 at 01:20

When you apply an event listener to a form element, the event doesn't know about what selector was used (In this case you are selecting the element by ID.)

There are several choices.

You could use one event handler and then use that to decide which logic to use, but that has the bad effect of mixing logic (what to do when the button is pressed) with presentation logic (the ID of the button).

You could set a data-* property on the element and select off that, but think even that is a bit more awkward.

Instead, I would use two buttons, and just toggle the visibility based upon the rules

function showButton(butNumber) {
  document.getElementById("but1").style.display = "none";
  document.getElementById("but2").style.display = "none";
  document.getElementById("but" + butNumber).style.display = "";
}


showButton(1);

document.getElementById("but1").addEventListener("click", function() {
  console.log("Button 1");
  showButton(2);
});

document.getElementById("but2").addEventListener("click", function() {
  console.log("Button 2");
  showButton(1);
});

<form>
  <button type="button" id="but1">Button 1</button>
  <button type="button" id="but2">Button 2</button>
</form>

score 0 · Answer 2 · answered Sep 25 '18 at 01:20

It doesn't trigger both functions

function changeValue(){
  $('#formId').prop('id', 'formId2');
  console.log('form Id changed');
}

$(document).on('submit','#formId',function(e) {
  console.log('submitted');
});

$(document).on('submit','#formId2',function(e) {
  console.log('submitted 2');
});
function restoreId(){
  $('#formId2').prop('id', 'formId');
  console.log('form Id restored');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='formId'>
<input type='hidden' value=0 id='hiddenInput'/>
<input type='button' value='click to change the id ' onclick='changeValue()'/>

<input type='button' value='click to restore the id ' onclick='restoreId()'/>
<input type='submit' value='submit' />
</form>

changin form ID and using button submit event firing old submit ID

2 Answers2