Develop Reference

How to Submit a Javascript Value in an Input Field

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.

Different Values in Form Inputs

I have a simple HTML form that works with a PHP script (to process the values).
For some reason it's not working correctly. After many tests, I inspect the mark-up for the form and I find:
<form id="delete_item_3_form" action="upload/delete_item.php" method="post">
<input type="hidden" value="4" name="item_id">
<input type="hidden" value="test" name="item_info">
</form>
As it should be. Please note that the values for the inputs are hard-coded.
However, if I go to the browser console (I am using Chrome) and write:
$('#delete_item_3_form');
I get:
<form id="delete_item_3_form" action="upload/delete_item.php" method="post">
<input type="hidden" value="4" name="item_id">
<input type="hidden" value name="item_info">
</form>
As you can see the value from the second input, item_info, is empty. Both inputs have a name.
I am not new to Form Handling but I have never seen this. The page mark-up shows one thing in a form, and a simple jQuery call to the same form shows another thing.
I have nothing, on my scripts, changing the value of the inputs.
The form is submitted by the press of a button. Here is the jQuery code:
$('#delete_item').click(function()
{
$("#delete_item_3_form").submit();
});
How is this happening?

I had another form in the page with the same ID.

JavaScript did not receive value in this.form

I am using a three part code below:
First part of the code: Basically a javascript function changeSearchEngine will be triggered when user select Google.
<p id="searchbox">This paragraph will change once javascript is triggered</p>
<form align=right>
<select name="searchengine" onchange="changeSearchEngine(this.form)">
<option value="google">Google</option>
</select>
</form>
This is my changeSearchEngine function in javascript.
function changeSearchEngine(form)
{
var searchEngine=form.searchengine.value;
if (searchEngine=="google")
{
var url_google='<form method="get" action="http://www.google.com/search" onsubmit="submitGoogle(this.form)" target="_blank"><input type="text" name="q" size="31" maxlength="255" value="" /><input type="submit" value="Google Search"/></form>';
document.getElementById("searchbox").innerHTML=url_google;
}
}
At this point of time, all is working well. When I select Google, the searchbox for google appears. I can search and everything.
Notice there is a onsubmit="submitGoogle(this.form)" right? I need to save what the user search terms into SQL table. So I have this javascript function below to capture what user have type:
function submitGoogle(form)
{
alert("Inside submitGoogle function");
var searchterm=form.q.value;
alert(searchterm); //to test. this part didnt capture the value.
}
I managed to invoke the submitGoogle function BUT however I can't retrieve the value of q despite using searchterm=form.q.value. What did I do wrong here?

In your onsubmit handler, you are passing this.form. But, this already refers to the form since it is the form itself that triggers the submit event. Form fields have a form property, but the form itself does not have a form property. So, just change your handler to pass this instead of this.form.
http://jsfiddle.net/fmqNj/
onsubmit="submitGoogle(this)"

Okay I found one possible solution. Let me answer my own question.
In changeSearchEngine(form) function, i change to this:
var url_google='<form method="get" name="googleform" action="http://www.google.com/search" onsubmit="submitGoogle(this.form)" target="_blank"><input type="text" name="q" size="31" maxlength="255" value="hello" /><input type="submit" value="Google Search"/></form>';
In submitGoogle(form) function, i change to this:
var searchterm=document.googleform.q.value;
But I still like others to comment on my solution whether it is not elegant or not within the practice. :D

Using javascript to pass form fields' values to Url

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

passing variables to a form using onclick

I'm new to javascript and am trying to start somewhat simple. Is it possible to create a function that contains a form object that can be populated by an onclick event?
Right now I have a page with 7 buttons, each button is a submit for a separate form, they all link to the same php file on the backside of my site where they are processed. I would like to somehow create one single form, possibly in a javascript function, that would accept variables from the buttons when clicked and then submit the form to my php script. it will technically function the same as it does now with 7 different forms, one for each button, but will hopefully cut back on the code.
This example is only how I logically thought it might work from a couple of weeks searching around the internet and gathering bits from here and there, but in reality it is far from functional.
example:
<script type="text/javascript">
function form_variables(opt1,opt2,opt3){
<form name='mySelectionForm' action='form.php?action=form_action' method='post' enctype='multipart/form-data'>
<input type='hidden' name='number' value='" + opt1 + "' />
<input type='hidden' name='id' value='" + opt2 + "' />
<input type='hidden' name='option' value='" + opt3 + "' id='options' />
</form>;
formObject.submit();
}
Then this would be populated by an onclick event like this.
My Selection

You're sort of on the right track. Rather than dynamically generating the form each time, your JavaScript could fill in the values of the hidden inputs and change the action of your form. So given this in your HTML:
<form name="mySelectionForm" id="mySelectionForm" action="form.php?action=form_action" method="post" enctype="multipart/form-data">
<input type="hidden" name="number" value="" id="number" />
<input type="hidden" name="id" value="" id="id" />
<input type="hidden" name="option" value="" id="options" />
</form>
Your JavaScript could look like this:
function postForm(number, id, option, action) {
var form = document.getElementById('mySelectionForm');
form.setAttribute('action', 'form.php?action=' + action);
document.getElementById('number').value = number;
document.getElementById('id').value = id;
document.getElementById('option').value = option;
form.submit();
}

Just make each link like this:
My Selection
Replacing {ID} with a number.
Then in your PHP file, use:
<?php
switch($_GET['id']) {
case 1:
$var['number'] = 9;
$var['id'] = 1;
$var['option'] = 6;
break;
...
}
?>
And so on for each case. This is a much better system, as it keeps your HTML tidy and removes the need for JavaScript.

Not to sure if i fully understand what you are trying to do. I think instead of making the form and submitting it every time you click one of your buttons can you just use this:
<script type="text/javascript">
function form_variables(opt1,opt2,opt3){
window.location('form.php?action=form_action&number='+opt1+'&id='+opt2+'&option='+opt3);
}
</script>

If I understand you correctly, you have 7 forms with 7 buttons and want to use scripting so that when one of the forms is submitted, you'll copy the values to another form then submit that. I don't see how that will "cut down on the code".
Seems to me like it is increasing the amount of code - forms don't need any scripting at all. You could just use one form with 7 submit buttons, then sort things out on the sever based on the button that was clicked.
Edit
If you use a single form with multiple submit buttons like:
<form action="form.php?action=form_action">
<input name="foo" value="bar">
<input type="submit" value="Submit 1" name="Submit 1">
<input type="submit" value="Submit 2" name="Submit 2">
</form>
then when the first submit is clicked the server will get:
...?foo=bar&Submit+1=Submit+1
and when the second button is clicked it will get:
...?foo=bar&Submit+2=Submit+2
so: one form, multiple submit buttons, no script, the server knows which one was clicked.
Of course you may want to use scripting to enhance the UI, but it isn't needed for the underlying functionality.