The title of the question might not be very explaining and I would really appreciate anyone who can help me with a solution. It's a special case where I have no access to the PHP file and can't change anything there and I need another solution which I really couldn't find anywhere.
Here is my question:
I have a form with a hidden value:
<form id="myForm" action="" method="POST">
<input type="hidden" name="colors[]" value="">
<input type="submit">
</form>
I also have created an array create with javascript with some values:
<script>
var myArray = new Array();
myArray.push('red');
myArray.push('yellow');
myArray.push('green');
</script>
I then have a random button somewhere no the page(doesn't really matter where)
<button id="myButton">Add to hidden array</button>
So the thing I wanna do is, that when I click the button id="myButton", I want a jQuery solution to add all elements from the myArray array to the hidden field name="colors[]".
I know the solution to add them as JSON string to the value of the hidden field and then use json_decode in my PHP file to read the array. But the thing is that I have no access to the PHP file and can't change previously written functions and logic. The PHP file receives an array of checkboxes as it's usually done in the standard way like:
<input type="checkbox" name="colors[]" value="green">
<input type="checkbox name="colors[]" value="red">
<input type="checkbox name="colors[]" value="yellow">
Is there a way to put myArray in the colors[] array of the hidden input field without using JSON strings and without needing to change anything in the PHP file, so that PHP receives and processes the field colors as a normal array of checkboxes?
You can add multiple hidden inputs to the form, each with a different value from the array.
$("#myButton").click(function() {
$("#myForm [name='colors[]']").remove();
$.each(myArray, function() {
$("#myForm").append($("<input>", {
type: "hidden",
name: "colors[]",
value: this
}));
});
});
Related
Simply, how can I do this?
<input type="hidden" value="some javascript value" />
I have a form whereby when a user clicks on Add More, more input fields are added via javascript.
I'm also using javascript-declared values to track and limit the number of fields a user can add.
I need a way for my php code to retrieve these javascript values.
Use append
$('#hidden').val('my Text');
input field should be
<input type="hidden" id="hidden"/>
the question is a bit vague, but i will give it a go
try adding a name as an array and then you can use get or post
<input name="myjavascriptinputs[]" type="hidden" value="some javascript value" />
in your php you will be able to use
foreach($_GET['myjavascriptinputs'] as $ajavascriptinput)
From the button you must be calling a javascript to add these fields dynamically. Simply append the code to that function to hand over these values to the field.
<input id="myinputfield[]" type="hidden" value="" />
<script>
function addOneMore(){
var newField = // code to add one more field
newField.value = newValue;
}
</script>
Will solve your purpose.
I have a big form with lots fields, now I want to use JavaScript to simplify the fields, that means, pre process and delete some of the fields with JavaScript then return a new processed field.
For example, I have fields in the form like plot_country, plot_state, plot_city, what I want to do is to precalculate the location_# from the country, state, city in JavaScript, and return the GET fields just contain location_#.
In this way the url will be simplified, and the server can directly use the location_# and it doesn't need to process the location combinations any more.
Does anyone have some ideas? Thanks!
Try something like this:
<form id="location_form">
<input type="text" id="plot_country">
<input type="text" id="plot_state">
<input type="text" id="plot_city">
<input type="hidden" id="location">
<input type="submit">
</form>
<script type="text/javascript">
$( "#location_form" ).submit(function( event ) {
$('#location').value($(this).serialize());
$('input[type=text]').remove();
});
</script>
What I'm trying to do:
I'm trying to build a very simple visual layout builder.
The idea is that, the user selects a block, and it has some settings in it, those setting values are stored in the hidden input, and when the user saves the page, i store those values in the database.
Basic block is ok:
For example, user selects a 'text' block, it is added like this:
<div>
<input type="hidden" value="text" name="item_name[]">
<input type="hidden" value="" name="item_title[]">
<input type="hidden" value="sdsd" name="item_text[]">
</div>
Problem:
However, some of the blocks have more than one values for each field. For example, 'gallery' block, which has multiple image urls, image titles etc. I'm facing problem in finding a suitable way to put together the multiple values and submit.
Right now I'm adding them to a string with jQuery, separated with __. I can store the data and separate it, but the problem is that if I want to remove any image from it, it is very difficult because I have just added them in the string, so its hard to find it and remove it.
<div>
text item
<input type="hidden" value="gallery" name="item_name[]">
<input type="hidden" value="__http://img1.jpg__http://img2.jpg" name="img_path[]">
<input type="hidden" value="__img1__img2" name="img_title[]">
<input type="hidden" value="" name="img_desc[]"></input>
</div>
Question:
What would be the suitable way to send multiple values for the above block example, keeping in the mind that there will be multiple blocks having multiple input values?
Thanks.
Build a Javascript Array with all values.
Convert the array to JSON
Submit JSON as the value of the hidden field
On server side, use PHP json_decode function to convert JSON to PHP object or array
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 want to pass two inputs' values into url to make it like
"http://www.testing.com?item=product+amount=100"
It is just an example.
A lot of tutorials are passing values from url into fields of the form.
how to make it in a reverse way...
Thanks in advance.
P.S
There are two pages, one page has one form.
Page One's form is filling by users, and then pass the values through url to Page Two's form, Page Two's form can grab the values from the url to fill up the relatively fields.
Thank you so much for you guys' reply.
var data = $('input').serialize();
More specific can be:
var data = $('#item, #amount').serialize();
Then append the data to the querystring of the URL, or use one of jQuery ajax functions.
Erm...
<form action="" method="get">
<input type="text" name="item" value="product" />
<input type="text" name="amount" value="100" />
<input type="submit" />
</form>
When the submit button is clicked, the item and amount variables are "passed into the URL".