javascript - How can I change the form on clicking "Save", and then submit the final version of the form? -

i have form variable number of textboxes, , when click save (the submit button), want remove empty ones , save form without empty boxes.

but it's half-working. when click save, empty boxes visually removed. moreover, there's validation error when boxes left empty, removeemptyboxes() there no validation error know boxes somehow removed before submit. when page refreshes, empty boxes reappear. on other hand, if divide 2 buttons , use 1 button removeemptyboxes() , click other button save, works fine , deleted boxes stay deleted.

i'm sure can round in different way, it's frustrating doesn't work way want to. there way this?

my form made using ajax.beginform. button looks this:

<input name="xisubmit" type="submit" value="save" onclick="removeemptyboxes()" />  function removeemptyboxes() {   $('div.box').each(function () {     var content = $(this).find('.box-content').val();      if (content == '') {       removeelement(this);     }   });   return true; } 

---

solution: removeelement() function consisted of slideup hide box nicely , removing box completely. removed slideup bit , worked fine. not sure why didn't work slideup.

for form id myform:

$('#myform').submit(function(ev){     ev.preventdefault();  // prevent original form submit     // thang     $(this).submit();  // submit form changes });