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.
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
You can serialize the forms, append the result and issue a POST:
$.post( url, $("#form1").serialize() + "&" + $("#form2").serialize() );
Related
My dropdownlist works like a treeview. Since, I cant seem to figure out if Html.DropDownListFor does this, I am having to do it the old fashioned way. Here is my code.
View:
Controller:
How do I get the selected value (LocationId) back to my controller? id="locSelection" in the view, brought in as object selection in the controller. Thank you:)
First of all it's not a old fashioned way it's the bootstrap way of replicating dropdown
Second of all it's not a drop down element...
Since this contains only ul and li tags and those are not of input type you cannot post back the values...
Also another problem in the code is you are setting the ID locSelection on multiple elements and that too in a loop .. So you will have a whole lot of elements with the same ID which is a Big NO. The Id's must be unique else it's a nightmare when we start using Jquery on these elements...
Solution -- Use Jquery
Remove the Id's
Add a class to all the anchor tags eg: locSelection
Maintain a hidden input field inside your form. We will use this hidden input field to post back the data on form submit.
<input type='hidden' name='locSelection' id='locSelection' />
Now bind a click event to the anchor tag inside the li and inside this event put that Clicked anchor tag text value into the hidden input.
$('.locSelection').on('click',function(){
$('#locSelection').val($(this).text());
});
I have multiple <select>s and one form I need to submit with one button. I'm trying to use a text area as a summary, which I will then submit to a script.
To move the form element I have this and it works fine:
document.getElementById('add').addEventListener("keyup", function() {
document.getElementById('ordsumry').value = this.value;
});
I thought I could copy the script and replace the first ElementId to add other values to the text area but it doesn't seem to add the values from the selects.
If anyone does know how to submit them all with out a text area that would be great but bear in mind I have zero knowledge of AJAX.
I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.
Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :
This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.
Any help would be appreciated.
This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.
A working code would be:
$("#testForm").on("submit", function() {
$(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
alert("ok"); // for debug purposes
return false; // this stops the form from actually being submitted
});
Here's a working fiddle that demonstrates widget disabling:
http://jsfiddle.net/sw6v928m/3/
Edit: Updated to actually select disabled elements
Edit 2: Updated to compact the code a bit, after request from the OP
I'm working on dynamically changing a the textfields based on radiobutton selection.
If I select single, then it should display different kinds of fields in the form and when I select multi it has different.
To achieve this,
I created two div's to fit the elements which gets changed on radiobutton selection.
I put the textfields in first div(id="single") and repeated the same fields in second field in another div(id="multi").
Based on radio button selection this works, but when I submit the form the values I have the below problem:
When I select single, the form displays all fields required, but the submitted values are sent twice, i.e. in console I see two entries sent,
I guess it is taking the fields of multi as well.
But when I select multi it works fine, still I see two entries in POST of console.
How can I avoid this. Is it the right way of handling such situations or is there anything other than this.
Fiddle
Console:
Ivrmapping[WelcomeNotes]
Ivrmapping[audioWelcomeUr...
Ivrmapping[audioWelcomeUr...
Ivrmapping[groupZCode] Ba
Ivrmapping[groupzName]
Ivrmapping[groupzName]
Ivrmapping[ivrnumber] 123467901
Ivrmapping[language]
Ivrmapping[language] 0
Ivrmapping[selectionList]
Ivrmapping[selectionList]
Do something like:
$("#multi_language > input").attr('disabled', true);
$("#single_language > input").attr('disabled', false);
Disabling inputs remove them from request.
The name attribute of your fields need to be different in a form control in order to differentiate the values in the request. This does not help you NOT send values across that aren't being used, but it lets you distinguish on the server side which values are for which radio button selection.
My question might seem trivial but I can't find resources about selecting elements that are descendant of a given element.
I have a form in which I want all fields (they should be all the inputs and selects that are child of the form tag, except buttons) to submit the form when ENTER key is pressed. Actually I require to call a custom Javascript method to submit the form, instead of merely submitting it the plain old way.
This because I need to raise a different Stripes ActionBean event depending on the button being hit (or in the case of enter key I know what event to fire a priori).
I can apply a custom CSS class to all fields (booooooooooooring) and I can select all form fields in a page with $$('input[type!=button], select').
How to constrain the selection to elements that descend from a given form tags (which has an ID?). The selection will be used to handle the keyup event
$$('input[type!=button],select', '#formid')
* selects all elements.
Something along the lines of
$$('#formId input[type!=button],#formId select')
Haven't been using prototype but i assume most CSS selectors work