What HTML attribute will prevent form data from posting if two inputs have the same name attribute?
<form>
<select name="amount">
<option value="100">$100</option>
<option value="50">$50</option>
<option value="10">$10</option>
<option value="1">$1</option>
</select>
Other: <input type="text" name="amount">
</form>
Edit:
The reason I need two with the same name value is I'm using the jQuery to show() and hide() functions for a select and input.
There is no such HTML attribute. It's perfectly legal for two elements to have the same name, and both values will be included in the data that is posted.
The values will be sent as two separate items, so the posted data from the form in the question could for example look like this:
amount=10&amount=42
Related
I am using a bootstrap form to submit data to a php page. I want that when the user doesn't make a particular selection from the given options, the form should submit either as or as null and not "SELECT ONE". Part of the code is given below. All the other data fields follow the same logic.
<div class="form-group">
<label for="smoking">Smoking Habits</label>
<select class="form-control" name="smoking" id="smoking" required>
<option data-hidden="true">SELECT ONE</option>
<option>Smoker</option>
<option>Non-smoker</option>
</select>
</div>
Any help will be appreciated. Thanks
An <option> only uses the text content as the data to submit if there is no value attribute.
You can add a value attribute to the option element, but the value has to be a string. It can be an empty string.
There is no native way to represent null in a HTML form.
<option data-hidden="true" value="">SELECT ONE</option>
What's happening is that I'm using a payment processor not under my control, and I need to pass it the values of shipping, and the values of shipping per additional item.
Since they're packaged separate, we're going to charge the same amount per additional item, so instead of coming up with two identical fields that the user has to fill out, I'm trying to create one field that assigns the value of shippingf and shipping2f
Below is an example of one of my many attempts. Another attempt has been just putting name="" twice, and that didn't seem to work either.
<select name="shippingf, shipping2f" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
any help on this matter would be fantastic.
Thanks!
Not possible with just HTML.
You could either
use JS to change the value of a type="hidden" element in the form, or
server-side (assuming PHP), before you include your payment processor, add $_POST['shipping2f'] = $_POST['shippingf'];. Just keep shippingf in the HTML.
Since the OP said option 2 won't work, here's an example for option 1:
HTML:
<select name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input name="shipping2f" type="hidden"></input>
jQuery:
$("select[name=shippingf]").change(function(){
$("input[name=shipping2f]").val($(this).children(':selected:first').val());
}).change();
Demo: http://jsfiddle.net/nb8j06qb/
or <====
HTML:
<select id='sf' name="shippingf" style="height:35px;">
<option value="12">US</option>
<option value="32">Canada</option>
</select>
<input id='s2f' name="shipping2f" type="hidden" value="12"></input>
Vanilla JS:
document.getElementById('sf').onmouseup = function(){
document.getElementById('s2f').value = this.options[this.selectedIndex].value;
};
Demo: http://jsfiddle.net/nb8j06qb/1/
I'm looking at some code my teacher wrote, here is the code snippet for an HTML drop down list:
<form name="year" id="year">
<select name="year" id="year"> <!--What is the purpose of naming select?-->
<option>Freshman</option>
<option>Sophomore</option>
<option>Junior</option>
<option>Senior</option>
<option>Grad Student</option>
</select>
</form>
What is the purpose of naming the select statement? What could this be used for later in the code?
Thank you
The most basic explanation: name attribute is used when submitting the form and retrieving on the server-side. The id attribute is used for JavaScript functions, such as a change event.
newbie here, so thanks in advance for help! I have a Wordpress site with multiple taxonomies. I'd like to create a very simple form with two select boxes, one for each taxonomy. Then I'd like to use an HTML form with the get method to display posts matching the criteria they requested from the select boxes.
I'm able to do this easy enough if each of the two select boxes are filled out, I get a permalink something like:
testsite.com/?tax1=value1&tax2=value2
(ugly, I know, but it works).
What I can't figure out is what to do if they don't fill out both select boxes. Ideally it would only give the permalink for the one they fill in, so either:
testsite.com/?tax1=value1 or testsite.com/?tax2=value2
But instead I'm getting
testsite.com/?tax1=value1&tax2=Select+tax
here is my HTML
<form action="http://www.testsite.com/" method="get">
Season: <select name="season">
<option>Select season</option>
<option value="">Select season</option>
<option value="spring">Spring</option>
<option value="summer">Summer</option>
<option value="fall">Fall</option>
</select><br/>
Vacation type: <select name="vacations">
<option value="">Select vacation type</option>
<option value="beach">Beach</option>
<option value="ski">Ski</option>
</select><br/>
<input type="submit" />
</form>
I realize the answer is probably simple but I'm banging my head against a wall so any help is very very much appreciated. Thank you!
You can still pass an empty parameter like
testsite.com/?tax1=&tax2=whatever_was_selected
or
testsite.com/?tax1=whatever_was_selected&tax2=
but, you would have to preselect one of the options for them like
<option selected="selected" value="">Select vacation type</option>
This way if the form is submitted and the user didn't change their selection it should still pass the parameter of but without a value.
You can put some Javascript or Php validation to make sure both the dropdown are selected before submitting the form.
I have a listbox on an HTML form with a Submit button. The listbox has multiple selection enabled. I am able to select multiple values in the listbox, but I don't know how to figure out what values were selected when the form is submitted. Also, I am adding user generated values to the list box dynamically using JavaScript, and I would like to be able to tell two things when the form submits:
What are the options added to the box by the user?
What values are selected in the box by the user?
Is this possible? Thanks.
By naming your select with trailing square brackets, PHP (and likely other server languages) will put the data in an array
ex:
<form action="process.php" method="post">
<select name="multiSelects[]" multiple="multiple" size="5">
<option value="0">Zero</option>
<option value="1">One</option>
</select>
<input type="submit" />
</form>
The selections will be available in the array $_POST['multiSelects']
Below you find an example of a page.
Note that:
the select element (and any form element) needs a name to be included in the post.
only selected options in the select element will be posted.
What values are selected in the box by the user?
When the user submits the form only the selected values will be sent to the server. Depending on what language you are using at the server there are different ways to access them.
What are the options added to the box by the user?
As stated before you only see what options that was selected. But how do you distinguish between your options and the users options? That depends on what data you are sending the user. The universal answer is thats the value you get back that you didn't send. However this can be simplified depending on your data. Since the options have both a value and a text property, one way it to use a numeric value for your pregenerated values. That way your values will be numeric in the reply and the users values will be a text string. This approach assumes that your user will not enter just a numeric value. Another approach is to add a prefix to all user generated values (remember you have both a value and a text field for all options)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test of select box</title>
<script type="text/javascript">
function addOpt(e) {
var o=document.createElement("option");
//o.value= -e.options.length;
o.text = "Test " + e.options.length;
o.selected=true;
e.add(o,null);
}
</script>
</head>
<body>
<form method="post" action="mypage.html">
<input type="button" onclick="addOpt(this.form.myselect)" value="Add option"/>
<br/>
<select id="myselect" name="mydata" multiple="multiple" size="10">
<option value="0">Test 0</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
</select>
<br/>
<input type="submit"/>
</form>
</body>
</html>