JavaScript

I have 2 forms, 1 in my content and one in the sidebar of my website. I submit them via $_GET, but I want to submit the form when any of the selects are changed. Since they’re in 2 different locations and wrapped in 2 separate form tags I need to append #form1 to #form2 then submit #form2. I’ve looked through the SO questions and everything deals with :input and clone() but according to the documentation clone() does not work with select boxes. It reads: .clone() Documentation

Note: For performance reasons, the dynamic state of certain form elements (e.g., user data typed into textarea and user selections made to a select) is not copied to the cloned elements. When cloning input elements, the dynamic state of the element (e.g., user data typed into text inputs and user selections made to a checkbox) is retained in the cloned elements.

So how do I append a form of select to a separate form?

Here’s what I’ve tried so far:

jQuery('#form1 select, #form2 select').change(function(){

    // Tried this
    jQuery('#form1 select[name="select_name"]').append('#form2');

    // Tried this before the research
    jQuery('#form1 select').clone().hide().append('#form2');

    // Form submission works without the above code
    jQuery('#form2').submit();
});

Neither of the above worked, nor do I get any errors in my console. Worst comes to worst I can loop through and append the values as hidden inputs but I was hoping to avoid that.

Answer

In your first attempt

jQuery('#form1 select[name="select_name"]').append('#form2');

will attempt to append #form2 to #form1 select[name="select_name"]

Thinking about it… how can you append a form to a select element?

If your intention is to append the select options from form1 to form2 then you just have to switch around those statements.

jQuery('#form2').append('#form1 select[name="select_name"]'); This will append the select options from form1 to form2

Append 1 Form to Another Form – Then Submit

Advertisement

Answer