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>
Related
As you know, the <input type="text" name = "input_field"> element creates a space for the user to type in an HTML form. But in this case, I know what the user is going to enter.
For instance, the user wants to send 'hello' to the action page. It isn't a particular piece of information like his/her name, email id, etc. It will be the same for everyone. Then why not just create a button like this:
<input type="submit" value="click to send 'hello'">
When the user will click on the button, 'hello' will be sent to the action page specified in the action attribute of the <form> element.
How do I do it? Also, I need to mention that I am not much experienced in HTML or JS, so I would appreciate a beginner-like solution.
I apologize if this question already exists somewhere.
Thanks in advance!
You can include predefined information when submitting a form by using a type="hidden" field:
<input type="hidden" name="input_field" value="hello">
That doesn't appear visibly on the page, but is submitted just like any other field when you submit the form.
As far as I understand your problem, you want to create a form where few fields will have predefined information
I would suggest not to hide the input according to the UI/UX perspective but instead, you can show those fields as read-only.
In this way, the user will have an idea of predefined values
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="number" disabled readonly id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
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'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 create a two forms here http://jsfiddle.net/B9r22/8/ and when you submit them, they convert to JSON, and the problem is when you submit the first form and then the second form, there are both data from form in JSON, how can I reset forms or seperate them?
<form name="first" id="1" action="" method="post">
Which city is in Great Britain?<br/>
London:<input type="radio" name="first" data-questionid="1" value="11"/><br/>
New York:<input type="radio" name="first" data-questionid="1" value="12"/><br/>
<p><input type="submit" /></p>
</form>
<form name="second" id="2" action="" method="post">
Which city is in USA?<br/>
Washington:<input type="radio" name="second" data-questionid="2" value="13"/><br/>
Tokio:<input type="radio" name="second" data-questionid="2" value="14"/>
<p><input type="submit" /></p>
</form>
Use the form as scope when you get the radio buttons:
$('input[type="radio"]:checked', this)
Demo: http://jsfiddle.net/B9r22/11/
You can use a form reset, this will set inputs to their default values, but ignores some fields like type=hidden
$('#1')[0].reset();
As far as I can see, the problem lies in line 6. Your script collects data from all input fields in the whole DOM (document) with a type of radio. Instead, give the selector the context of the currently submitting form to only match those particular fields (using $(this).find where $(this) refers to the submitted form):
Change line 6 to $(this).find('input[type="radio"]:checked').each(function(){
http://jsfiddle.net/B9r22/12/
You need to limit the
$('input[type="radio"]:checked')
to the submitted form:
$('form').submit(function() {
var form = $(this);
//....
$('input[type="radio"]:checked', form).each(function(){
//...
http://jsfiddle.net/B9r22/9/
you should use $(this)
$(this).find('input[type="radio"]:checked').each(function(){
http://jsfiddle.net/B9r22/10/
Helo friends, my code:
<form>
<input type="text" placeholder="name">
<input type="text" placeholder="email">
<input type="password" placeholder="pw">
<button type="button" id="insert">Insert</button>
</form>
My JavaScript file:
$('#CadAdmin').click(function(){
$('input').each(function(){
$.post('/require/jp/insert.php',{
dataUser:$(this).val()
},function(res){
alert(res);
})
})
});
My insert.php file:
extract($_POST);
print dataUser;
Here, its show all data, ok but, I want to get separete data, for ex:
//print dataUser
print $name.' '.$email.' '.$pw;
The $_POST variable is an array (see $_POST on php.net). This means you can access the inner content like this $_POST['index'].
For you this would mean that you have to use the form input names with $_POST. This gives you $_POST['name'], $_POST['email'] and $_POST['pw']. These variables contain the input from the form.
Note that just printing/echoing these variables to your website you might have some problems with XSS, you can check this answer or this one (both from other questions) for on how to prevent something like that from happening.
EDIT (after comment):
I suggest you to change (or even remove) your javascript code. Because you are using $('input').each() you are currently sending 3 separate POST requests to /require/jp/insert.php, this means the data is handled separately. If you were to change that, your inputs do not have a name, that is why extract() doesn't work, the data within $_POSTisn't set to a specific 'variable' to use after extract().
I suggest you change your code to something like this:
(somehtmlpage.html?):
<form method="POST" action="/require/jp/insert.php">
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="password" name="pw" placeholder="pw">
<input type="submit" id="insert">Insert</input>
</form>
(insert.php):
extract($_POST);
print $name.' '.$email.' '.$pw;
What this does is exact the same, without javascript (and the 3 POSTs). Since your data is now within the 'same' $_POST you can use the names (from the input fields, 'name=....') after extraction.
You need to define the name (not the placeholder) of each input, then serialize the form data before posting it to your insert.php script.
First, add name attribute to your elements to catch their values after form submit:
<input type="text" placeholder="name" name="name">
then you can get those values like this:
$name = $_POST['name'];