I have a page which displays some data from my database, how would i go about accessing this data with jQuery? By this, I mean grouping it by the row id from the database?
I was thinking about something like:
<input type="text" id="482983" name="reg" />
<input type="text" id="482983" name="somefield" />
<input type="text" id="482984" name="reg" />
<input type="text" id="482984" name="somefield" />
How could I pull that data into JSON like this:
{
"482983":{"reg":"regvalue","somefield":"somefieldvalue"},
"482984":{"reg":"regvalue","somefield":"somefieldvalue"}
}
Any ideas?
As mentioned, IDs should be unique. Instead, let them share a class, or a name, or let them be children of the same container with a unique ID. After you've done that, you can use jQuerys .each() to form it into a json or array object.
Related
I'm not sure why, but when I call $(form).serialize() it returns object within dynamically created elements.
I have this html syntax:
<form id="form1"></form>
<input type="text" name="formItem[0][value]" value="XX" />
<input type="text" name="formItem[INDEX][value]" value="XX" />
I call method to clone input[name="formItem[0][value]"] and replace INDEX with 1, so then I have form like this:
<form id="form1"></form>
<input type="text" name="formItem[0][value]" value="XX" />
<input type="text" name="formItem[1][value]" value="XX" />
<input type="text" name="formItem[INDEX][value]" value="XX" />
But then, when I call method to serialize form, there are still same count of elements -> two - but for this example:
When I submit form for first time, with no cloned input, there was formItem[0][value] and formItem[INDEX][value], but when I call clone and then submit form, serializeArray method return formItem[0][value] and formItem[1][value].
Do you have any idea, how to solve my problem?
https://jsfiddle.net/8u83h22j/2/
Solved - use Chrome instead of Safari browser.
I've got a simple form in html:
<form action="" method="post">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>
I also have a file upload on the page, which handles uploads using ajax and adds the files to a mongoDB. The file upload returns the mongoDB id of the file (for example 12345) and I want to add that id to the form as a hidden field so that the id is POSTed to the server upon submitting the form. Since the user can add multiple files though, I want to add a list of id's to the form.
I found how I can add one hidden field to a form from javascript, but this always handles a single field, not a field with multiple values. So I thought of adding a checkbox field to the form so that I can submit multiple values in one element, but it kinda feels like a hack.
Can anybody hint me in the right direction on how I can add a hidden list of values to a form using Javascript? All tips are welcome!
[EDIT]
In the end I would like the form to look something like this:
<form action="" method="post">
<input type="hidden" name="ids" value="[123, 534, 634, 938, 283, 293]">
<input id="title" name="title" size="30" type="text" value="">
<input type="submit" value="Save this stuff">
</form>
I am not sure if I understand your question correctly, so I may just be guessing here.
Try adding multiple hidden inputs with a name such as ids[] so that they will be posted to the server as an array.
Example:
<form action="" method="post">
<input type="hidden" name="ids[]" value="123">
<input type="hidden" name="ids[]" value="534">
<input type="hidden" name="ids[]" value="634">
<input type="hidden" name="ids[]" value="938">
<input type="hidden" name="ids[]" value="283">
<input type="hidden" name="ids[]" value="293">
<input type="submit" value="Save this stuff">
</form>
Why not simply concatenating all the ids into a string like so "123,456,890,..etc" and then adding them as a value to ids inupt. When you need them, simply split by ',' which would give you an array with ids?
Todo so only with javascript something like this should work
var elem = document.getElementById("ids");
elem.value = elem.value + "," + newId;
Do you mean that for each time the user clicks the 'upload' button you need to add a hidden field to the form?
Can you post the entire form, that should clear things up...
[Edit]
you could store the id's in an Array, everytime an id should be added to the hidden field's value you could do somthing like:
$('#ids').attr('value', idArray.join());
I'm just typing this out of the box so excuse any little errors
i often use this notation when i name my controls in order to get an array in POST or GET.
<input name="color[1]" type="text" />
<input name="color[2]" type="text" />
<input name="color[3]" type="text" />
so in my scripts i can do
<?php $data=$_GET["color"];
for each ($color as $key=>$value) {
doSomething();
} ?>
Often happens that i need to get those id back in javascript , but i cannot get them , so i often add an ID to each element in html like that
<input name="color[3]" id="color_3" type="text" />
so that i can use document.getElementsById('color_3')
Instead i would like to find way to use document.getElementsByName(color[3])...
but i cannot really get it to work.
Any help?
If you want all of the color inputs, you can use querySelectorAll instead to query for the name attribute:
document.querySelectorAll("input[name^='color[']")
This looks through the document for all input tags whose name attribute starts with color[. Here is a fiddle for this.
If you only want color[3], you can use:
var color3 = document.getElementsByName("color[3]");
console.log(color3[0]);
<input name="color[3]" id="color_3" type="text" />
var element = document.getElementsByName("color[3]");
alert(element[0].id);
It works fine .. The thing you should have in your mind is Return type is an array of elements not a single element
I'm sure there's a simple answer to this, but I'm a novice teaching myself Javascript and JQuery and I just don't know enough to figure it out myself. Any help you can provide is greatly appreciated.
I'm building a form that generates HTML emails for my company based on hundreds of different inputs entered by the form user. Rather than copying and pasting each and every input name into a $_POST line in the form's action script to retrieve the input's data, I'm wondering if there's a way to use Javascript/JQuery to generate a list of the name="" fields from each input on the form to make this easier?
For example, from the following slice of the code, how can I automatically generate a list that contains the name values "bottlespecial6image", "bottlespecial6imagewidth", "bottlespecial6imageheight", "bottlespecial6imagelink", and "bottlespecial6includeprice" (with the idea that my form has hundreds (if not thousands) of inputs, so copying/pasting seems inefficient):
<input type="text" name="bottlespecial6image" value=""/>
<input type="text" name="bottlespecial6imagewidth" value=""/>
<input type="text" name="bottlespecial6imageheight" value=""/>
<input type="text" name="bottlespecial6imagelink" value=""/>
<input type="radio" name="bottlespecial6includeprice" value="yes" checked="checked" />
<input type="radio" name="bottlespecial6includeprice" value="no" checked="checked" />
I apologize if this has already been covered here -- I searched around here for similar questions, but couldn't find anything.
To create a serialized array to submit, you'd use jQuery's serialize()
$('form').serialize();
to just get the names in an array, you can map them:
var inputs = $('form').find('input[name]'); //all inputs with a name in the form
var names = $.map(inputs, function(el) { return el.name });
FIDDLE
$("[name='yourrequiredname']")
will give you list of all elements by same name
I have a dynamic form that adds users to the site, made so you can duplicate the fields to add several users on one go.
So, my looks like
<input name="user[1][name]" value="" />
<input name="user[1][username]" value="" />
<input name="user[1][password]" value="" />
And then the number is changed on the duplicated fields, eg:
<input name="user[2][name]" value="" />
<input name="user[2][username]" value="" />
<input name="user[2][password]" value="" />
and so on.
On PHP I can handle each user since it has it's own array.
But I would like to validate, for example, the username on each user via jQuery.
The closest I got to is
$(this).find('input[name="user[][username]"]').each(function() {
But for it to work I need to explicitly write the number on the first [], eg:
$(this).find('input[name="user[1][username]"]').each(function() {
Is there a way to select ALL of them? I tried putting * and * between the [] but it didn't work.
Thanks for your help!
You can use the ends with selector
You could use a for loop and not have to write the numbers yourself really easily:
var number_of_forms = 3
for(var i=1;i<=number_of_forms;i++){
$(this).find('input[name="user[' + i + '][username]"]').each(function() {
}