Using jQuery to remove select field values from the DOM before submit?

Question

I've got a squarespace form I'm working on that uses jQuery to show/hide certain fields to allow a custom form using show(); and hide();

$(".option2 select").hide();

The problem is that this doesn't remove them from the DOM, and so any hidden fields are STILL submitted in the squarespace email.

$(".option2 select").remove();

This is the only function that successfully removes the select from the DOM and stops it from being included in the form submit, but since it's irreversible, it breaks the form.

Is there a way to use remove(); on certain elements just as the submit button is pressed to permanently remove them from the DOM before the form is actually submitted?

Edit: I should clarify that since this is done in Squarespace, it's tricky to use onSubmit since there are already other things going on. I'm looking for a jQuery-only solution that doesn't involve editing any of the HTML of the form in any way.

You could try to remove name attribute from the fields to which `hide() ` applied. I've never tried this method, but found it here: https://stackoverflow.com/questions/3008035/stop-an-input-field-in-a-form-from-being-submitted in comments to the first answer — IP_, Jun 06 '18 at 23:15
Patrick, I am on the same boat, did you find a solution to this eventually? — DANLEE, Apr 25 '23 at 05:33
I ended up just hiding some of the dropdown options from showing by using .prop("disabled","disabled") and .removeAttr("disabled"); to those specific options. It's not possible to use jQuery to change what is or is not submitted in the form -- that's something the form itself has to be set up for. — Patrick Hennessey, Apr 26 '23 at 17:45

score 0 · Answer 1 · answered Jun 07 '18 at 15:30

You can first of all prevent default actions from submitting by doing this Then remove the field you want. And then submit your form.

$(document).ready(function(){
     $('#id_of_form').submit(function(e){
         e.preventDefault();
         $('.the_option_i_want_to_remove').remove();
         // if you want to submit your form after removing your fields
         $(this).submit();
     });
};

Using jQuery to remove select field values from the DOM before submit?

1 Answers1