Using javascript to pass form fields' values to Url - javascript

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

Related

Create PHP friendly array for checkboxes with jQuery

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
}));
});
});

Send text field value using href to php

I have to send text field value using href to php is something like below. But it is not correct way. Can anyone please give me any solution?
<input type="text" id="myText" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="button" value="Click"></a>
Put content inside a form. You can also change the button type input to a submit type, this way the form is sent automatically on click.
<form method="POST" action="yourURL.php">
<input type="text" id="myText" name="myElement" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="submit" value="Click"></a>
</form>
More information on forms: MDN
Whether you use GET or POST as a method, you'll be able to access the content of the form through PHP variables: $_GET, $_POST or the generic $_REQUEST.
More information in the PHP documentation
Note: PHP uses the name attribute of your HTML elements for those variables. Make sure to add this attribute to your HTML elements otherwise you'll have a hard time getting a value from $_REQUEST['myText']. I added the attribute holding the value "myElement" in the above code. It is accessible through PHP by typing $_REQUEST['myElement'].
Content sent through GET method is visible in the URL,
like this: www.example.com/test.php?var1=test&var2=test
<input type="text" id="myText" value="Mickey">
test

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.

How to Generate a List of all Input name="" fields in a form with Javascript/JQuery

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

Html Form Submit appends + (plus) in URL params

I am having a simple form following is the code
<form action="search.html" method="get" accept-charset="utf-8" id="search-within-form"">
<input type="hidden" name="within" id="within" value="">
<input type="text" name="q" value="" id="search-within" autocomplete="off" class="search-within-results inactive" title="">
<input type="submit"/>
</form>
I am entering test data for search in the field and click submit, in the URL I see is
/search.html?within=&q=test+data+for+search
But I need the url to be like tis
/search.html?within=&q=test data for search
I know this can be done by using java script form submit etc.. I like to know is there some way I can achieve this using html?
Thanks in advance.
Your URL will never display that way in a browser. Either the text will be seperated by those '+' characters or it will be seperated by '%20's. Is there a reason you need the URL to display in that fashion? Ultimately it comes down to how the browser displays the URL in the address bar. '%20' is code for a space. You might be able to develop a browser extension that would make them display with the spaces, but that sounds pretty terrible to me.
Why don't you clean the text at the place you retrieve the value from the form ? Is there any reason why you can't do that ?

Categories

Resources