Develop Reference

Check Like Form Fields for Value

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.

Print the HTML form with User Filled Information/Data

I have HTML form and I would like to print the HTML form, with the User Filled Information/Content.
Is there exist any way in jQuery or JavaScript to get a HTML Form with user filled values and print it?
This is what I have tried
$(form).html() but it returns only empty form
$(document).find("form").html() which also returned html with empty form.
NOTE: I am not talking about serialize function here. I don't want to submit a form but want to convert form to a printable version by setting input, select background transparent.

You can use
$('form').find('input').each(function( key, value ) {
console.log(value);
});
And to get the data ready for POST or something like it use this
$('form').serialize();

I think I got your issue. What you are actually want is, to print the HTML form, but it should contain the User Input.
First and foremost, you can use the 'window.print()' method. If you want to print only the Form, then you should use some CSS tricks.
I guess, what you are looking is answered in the following SO Questions. Please check out.
Javascript print web form with user input included
How to print only a selected HTML element?
If you are still not able to get your solution done, then let me know. Let me see how I can help you. Good Luck.

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.

Eliminating the Need For Hidden Input Fields

I have several hidden input fields used to hold coordinates calculated by javascript. The purpose of these fields is to pass the coordinates when the form is submitted. I am using an AJAX request through MooTools. Is there a simple way to eliminate the hidden input fields and append them to the $_POST data being sent through the form?

yes. if very much depends on the way your form data is defined / how it is sent. for example:
new Request({ data: $("formid") }).send(); will serialise the form and send all form fields through. what you can do is move the hidden fields into the form before submit so it will include them also (via $("formid").adopt(el1, el2, ... eln); where els are your hiddens - or a collection you have done like $$("input[type=hidden]").
if you compose the data object manually then just add them to it with a key, its just a hash table of key->value pairs.

I don't use MooTools, but my experience with Prototype, jQuery, and raw Javascript patterns is that Javascript-based POSTs are done with a <form> element created on the fly. Appending POST data is done by adding hidden input fields to that form element, and then the form is submitted.
What's the reason you don't want to use hidden input fields? Does the job for me...

jquery serialize and multi select dropdown

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].