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.
Related
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.
I am wondering if there is a way to use JavaScript to check all form fields with a similar name for a specific value.
I have several hidden fields on my form with names like "associd1", "associd2" etc..
Is there a way to loop through all fields with a name like "associd" and check the value of those fields for a certain value?
Of course there is. Get them with document.querySelectorAll or jQuery and set their checked property. Give it a try and come back with your code if you have questions or problems.
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.
I have been using the jquery serialize() function to serialize the values of a form and submit it via ajax
like for e.g. if the form name and id is factoryUsers
var data=$("#factoryUsers").serialize();
Now this works fine for forms that have text fields, text areas, simple drop downs etc.
But when I have a multiple dropdown , things go awry
for e.g. if I have a dropdown of the type
<select size="5" id="factoryUsers" name="factoryUsers" multiple="multiple">
the serialize doesn't work correctly anymore.
so if I select 3 users I get a query string like
factoryUsers=5&factoryUsers=23&factoryUsers=11
changing the select to array type doesn't help either factoryUsers[]
Any idea or help how to get this working correctly would be great.
Try changing the name of the select to factoryUsers[]. That way you can loop through it in your backend.
The string output you've described above is the correct way of submitting multiple values for forms with the same name over HTTP, so jQuery is working correctly. It's up to you to handle how this is processed on the server-side, which is then dependent on what language you are using.
If you're using PHP, this may help: http://bytes.com/topic/php/answers/12267-how-php-_post-gets-multiple-values-html-form
Can you tell us what language you're using?
All you need is change name="factoryUsers" to name="factoryUsers[]" PHP will treat it as array.
Your elements name must be array type factoryUsers[]
Change your code this:
<select size="5" id="factoryUsers" name="factoryUsers[]" multiple="multiple">
Thanks...
Just try it to get value with val()
data='factoryUsers=' + $("#factoryUsers").val();
It will give you the values with comma seperate.
factoryUsers=1,2,4
If this item is one of your form. Then try to add the value of item end of the serialize. Example:
data= f.serialize() + '&factoryUsers=' + $('#factoryUsers').val();
Since, the item written twice into the request, the last value will be valid in controller.
You can use the PHP function
parse_str($_POST)
This function seems to be an extract function. After you run this, you can access a var named $factoryUsers, and this var is an array $factoryUsers[n].
I want to be able to send all the selected values from a listbox as a hidden field using JQuery.
I was able to send/retrieve a single value on form submission.
If anyone can share some code snippet, that would help.
Thanks in Advance!
Well, it's not so clear what you are really asking for. There is no "multiple selection dropdownlist" in HTML. To have a multiselect you need to specify
<select id="foobar" multiple>
that will create a listbox where you may select multiple elements. Calling
var sel = $('#foobar').val();
will return an Array of selected items.
edit
To get the text from each option, use .map() or jQuery.map(). Example:
var sel = $('#foobar').children('option:selected').map(function(i,e){
return e.innerText;
}).get();
That will create an Array containing the text of all selected entrys.
There's absolutely no need to do like that. You was apparently using request.getParameter() instead of request.getParameterValues() and wondering why it returned only the first value.
Just fix your servlet code accordingly:
String[] selectedItems = request.getParameterValues("dropdownname");
No need for ugly JS/jQuery hacks to send them all as single parameter. In future questions, try to ask how to solve a problem instead of how to achieve a solution which may after all not be the right solution per se.