Question

I have a form that I want to only submit post data for value which have changed.

So the way I have been doing this is like this:

function submit_form(){
var hd = [];
// hd is a big array that is defined here
// hd ['some id_number'] = 'some value'
// main function
for (var id_number in hd ){
    var x=document.getElementById(id_number).selectedIndex;
    var y=document.getElementById(id_number).options;
    selector_text = y[x].text;
    if (hd[id_number] == selector_text){
        $(id_number).remove();
    }
}
document.forms["my_form"].submit()
}

So the goal is that if the selector equals what is in the array, then don’t POST the data.

To do this I have been doing the remove function. Everything up to the remove function works as expected. However when I look at the post data I still get the selected value for the id_numbers that mach the value in hd.

Is there a better way to remove to prevent it from going to the POST data? The id.parent.removeChild(id) method didn’t work either.

Answer 1

The jQuery id selector should begin with a #, but yours appears not to:

 $('#' + id_number).remove();

Your for-in loop should be a regular incremental for loop, which is the proper way to iterate an array in JavaScript. for-in loops are typically used for iterating object properties rather than array elements.

for (var i=0; i<hd.length; i++) {
  // Access hd[i] in the loop

  var x=document.getElementById(hd[i]).selectedIndex;
  var y=document.getElementById(hd[i]).options;

  selector_text = y[x].text;

  if (hd[i] == selector_text){
     $('#' + hd[i]).remove();
  }
}

Since you aren’t really using jQuery here except for that line, instead the plain JS version is:

var removeMe = document.getElementById(hd[i]);
removeMe.parentNode.removeChild(removeMe);