Why is the field values are posted twice on submit - javascript

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.

Related

Store values of dynamically created controls

I have to create text box dynamically on each button click and the previous values should be loaded correctly. I know by saving the value to hidden field i can achieve this. Is there any other option for achieving this. Because by increasing the number of the controls the hidden field value also increases
There may be multiple solution to your problem:
1. Save your values in session on each post back.
2. Or you can save your values in single hidden field with comma separated values.
For further assistance you can email me.

Want to take a radio and checkbox value from one form to another

I have values from one form that need to be transferred to another.
var manager = $('input[type=checkbox]:checked').val();
I'm capturing the value with this. and trying to send it to this.
$('input[type=checkbox]:checked').val(manager);
but I don't know what to put into the next set of jquery to transfer it over.
.val() works for strings/numbers but not checkboxes or radio buttons which I am trying to do.
Please advice.
Try jQuery prop() function to transfer the state of one checkbox to another.
Also use correct selectors. $('input[type=checkbox]:checked') will only select CHECKED checkboxes.
see this fiddle for an example: https://jsfiddle.net/iPirat/p5f07br4/
in this fiddle, the checkbox in the first form is selected similarly to what you did.
the checkbox insecond form is selected using an ID.

Append 1 Form to Another Form - Then Submit

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() );

Jquery - SerializeArray() checkbox that is not "checked"

so I am trying to implement the Jquery .serializeArray() method to transform a form into a JSON string to send it out in a request. This works great for my form except for checkboxes and radio buttons. The only time this works properly is when they are checked. Sometimes, I need to know if they are unchecked. They still need to get serialized.
I suppose I could manually loop through the form and grab the values and build the JSON object, but that would not be optimal.
According to the Jquery documentation found here: Jquery Docs anything that fits the W3 standards for a successful control found here should get included. Unfortunately, this does not include checkboxes that are not checked. Does anyone have a work around for this behavior? Thanks in advance...
var form = document.getElementById('f');
console.log($(form).serializeArray();
That spits out the serialized form with the checkboxes that are not checked excluded...
If you really want to use checkboxes and radio buttons, have those input fields update a corresponding hidden field. That way, the hidden input will always be sent.
how about trying this, I had a similar problem, I thought unchecked checkboxes should have a value as well, here is a quick work around,
add an extra class on each checkbox on your form "cbx"
make data an array from the form with serialise
then loop through all checkboxes with a class of "cbx"
and add them to the array with a value of 0, AFTER the array has been created with (serializeArray())
when you post the data you will see the unchecked checboxes and values of 0 will get transferred with the post.
var data = $('#form').serializeArray();
$(".cbx:not(:checked)").each(function() {
data.push({name: this.name, value: '0' });
});
$.post("testpage.asp", data);
An alternative would be to use a jQuery plugin. For example, serializeJSON has the option to set the value for unchecked checkboxes like this:
$('form').serializeJSON({checkboxUncheckedValue: "false"});
In any case, it is usually best to use hidden inputs for unchecked values.
Alright, so I developed a workaround.
Basically I wrote a function to compare the original JSON object to the serialized form. As I looped through, I compared the components. If there was a discrepancy, I pulled the component off the form and manually inserted it into the JSON. I used the array.splice() method to add the missing components. Worked for all of the missing inputs.

Selecting all checkboxes and passing it to another page on click of a button

HI,
I have multiple checkboxes in my report. I am using two buttons Select All and Deselect All for selecting all checkboxes and deselecting all checkboxes. But am not able to pass the checked values to another report. Only if I manually select the checkboxes then only those values are getting passed in the report.
Can anyone help me out with this?
I assume your select all and deselect all buttons are using javascript to set or unset all the other checkboxes in the form.
unset checkboxes are not passed on. only the set one. If you need an explicit 0 or 1 to get passed over, you will have to do something like adding extra hidden fields are are sync'ed to the state of the checkboxes, but this will be riddled with problems (eg, no javascript = FAIL).
You can have a bunch of hidden fields to accompany the checkboxes, and set their values when the checkboxes are unchecked.
Alternately, when you need two or more states for a field, use a radio button.

Categories

Resources