retain text box value on window.location - javascript

I have a form as follows:
<form name="donation_form" action="" method="post" target="_self">
<select name="donationType" onChange="window.location='?page=donate&donationType='+donation_form.donationType.value;">
<option>--Select--</option>
<option value="a" selected="selected">a</option>
<option value="b" >b</option>
<option value="c" >c</option>
</select>
<input type="text" name="amount" />
<select name="giftAid" onChange="window.location='?page='+donate+'&donationType='+a+'&amount='+donation_form.amount.value+'&giftAid='+donation_form.giftAid.value;">
<option>--Select--</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
</select>
<input name="submit2" type="submit" value="Make a Donation" />
</form>
Now when I select the second select and it refreshes the page, how do I retain the value of the amount text box that a user has enetered as well as the two selects?
Thanks in Advance

You should accept answers for your older questions.
You'll need to pass the values of the other controls to the server as querystring parameters, then set the selected values of the options in server-side code (or Javascript) from the querystring.
What are you trying to do?

Related

Form values to create own URL with Javascript?

I have a form that is a simple dropdown menu that users can select an name and the affiliate code matched to it be used in the url but php changes the periods to underscores, so I was wondering if there was a roundabout way of doing it with javascript?
<form>
<div>
<label for="organisation">Please select:
</label>
<select name="quote/results.php?product=product_here&ac=group&username" method="get">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button>Quote </button>
</form>
After the username in the URL, that's where I want the number code to go which I had working in php but the results.php turned into results_php which obviously came back as an error.
Are there any possible ways to go around this?
I think you want something like this:
<form action="quote/results.php" method="GET">
<div>
<input type="hidden" name="product" value="product_here"/>
<input type="hidden" name="ac" value="group"/>
<label for="organisation">Please select:</label>
<select name="username">
<option value="111111111">Number One</option>
<option value="222222222">Number Two</option>
<option value="333333333">Number Three</option>
<option value="444444444">Number Four</option>
</select>
<button type="submit">Quote</button>
</div>
</form>
Put the url in the action attribute of the form instead, then use hidden inputs for the product and ac, so that they are included in the url after submitting. And add type="submit" in the buton

How to incorporate GET variable using javascript?

I got this form
<form action="http://someaffiliatelink/s1={subid}" method="post">
<label id="text5">You must be 100 years and above to enter.</label>
<label id="text6">Please confirm your age.</label>
<select name="">
<option selected="selected" value="Select Your Answer" id="text7">Select Your Answer</option>
<option value="Select Your Answer" id="text8">I'm 100+. Let Me In.</option>
<option value="Select Your Answer" id="text9">I'm Under 5.</option>
</select>
<button id="text10" class="submit-button" type="submit">CONTINUE!</button>
</form>
Say a person go to http://somedomain.com/?subid=helloworld
Now I want the form submit to
http://someaffiliatelink/s1=helloworld
instead.
How do I do so using javascript.

select option input required using css class

Can we make select option html input required without touching html tags by using css/javascript code?
<form action="?" method="post">
<select class='css-class'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit"/>
</select>
</form>
css
.css-class select option{
/* anything here to make it required */
}
I don't mind using javascript
jsfiddle
You can use JS by using the required property. It's just like the required attribute that's on tags, but it's a JS property instead of a HTML attribute.
I added another <select> to demonstrate. Try submitting only the second <select> and you'll see it'll require <select class="css-class"> to be submitted.
document.querySelector('.css-class').required = true;
<form action="?" method="post">
<select class='css-class'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit" />
</select>
<select class='css-id'>
<option value=''>choose</option>
<option value='1' data-key='1'>one</option>
<option value='2' data-key='2'>two</option>
<input type="submit" />
</select>
</form>
I don't think that it is possible with just css as this is just for styling content.
Could this answer provide a solution for you: Can I apply the required attribute to <select> fields in HTML5?
The markup they suggest:
<select required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

handle a list of checkboxs and select tag

I would like to show a list of items that these items is taken from database.(using a while in the php).
after click on a button, I would like to get where any checkboxs is selected and the value of it.
example :
I want to get:
item-1 => no
item-3 => yes
<div class="container">
<select name="selectionField">
<option value="CA" >yes</option>
<option value="CO" >no</option>
</select>
<label for="blah">item-1</label> <input id="blah" type="checkbox" />
<br />
<select name="selectionField">
<option value="CA" >yes</option>
<option value="CO" >no</option>
</select>
<label for="blah">item-3</label> <input id="blah" type="checkbox" />
<br />
<select name="selectionField">
<option value="CA" >yes</option>
<option value="CO" >no</option>
</select>
<label for="blah">item-3</label> <input id="blah" type="checkbox" />
<br />
</div>
With PHP, once the form is submitted you can get the values with:
if(isset($_POST['checkbox'])) {
print_r($_POST); //print all checked elements
}
With jQuery you can get the state with:
$("#blah").is(':checked');
Make sure you have unique ID's for each field

Passing id of tag that submited form with onchange=this.form.submit()

Is there a way to know which select tag submitted form?
<form method="POST" action="submit.php">
<select id="id1" name="sel1" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Non-jQuery solution is preferable, but not mandatory...
P.S. Problem is that selected="select" attribute is generated dynamically (i don't know which option would be selected as default - so i can't compare default with submitted)
The first thing that comes to mind is a hidden field with a value you set. Something like this should do.
<form method="POST" action="submit.php">
<input type="hidden" name="submitselect" value="" id="submitselect">
<select id="id1" name="sel1" onchange="document.getElementById('submitselect').value='sel1';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="document.getElementById('submitselect').value='sel2';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Alternatively, you could have a default option chosen, e.g.
<option value="" selected>-</option>
That would never otherwise be chosen. That way, this option would remain unset in the selects that didn't cause the submit.

Categories