Given an HTML form like:
<html>
<body>
<form method="GET">
Select:
<select id="param" name="param">
<option></option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>
How can I omit the parameter entirely from the form submission if the blank option is selected?
If you wanted a pure JavaScript approach, something like this would remove the name attribute of the select element if the selected option value was empty before the form is submitted.
Just give the form element a name..
<form name="formName" method="GET"></form>
JS - EXAMPLE HERE
document.forms["formName"].addEventListener('submit', function(){
var el = this.querySelector('select[name="param"]');
if(!el.value){
el.removeAttribute('name');
}
});
Alternatively, here is a jQuery version.. not much different.
EXAMPLE HERE
$('form[name="formName"]').submit(function(e){
var el = $(this).find('select[name="param"]');
if(!el.val()){
el.removeAttr("name");
}
});
This is what I came up with (JQuery):
$("form").submit(function(e) {
if ($("#param").val() === "")
$("#param").removeAttr("name");
});
It has the advantage that it doesn't visibly change the DOM immediately after clicking submit.
Use below code, you need Jquery
<script type="text/javascript">
function checkForm()
{
var paramVal = $('#param').val();
if(paramVal == "0"){ return false;}
}
</script>
<select name="param" id="param">
<option value="0"></option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
<button type="submit" onclick="return checkForm();">Submit</button>
<script type="text/javascript">
function validate()
{
if ($("#param").val() == "")
$("#param").removeAttr("name");
}
</script>
<form action="" method="post" onsubmit="return validate()">
<select name="param" id="param">
<option value=""></option>
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</select>
<button type="submit">Submit</button>
</form>
Related
I want to use the dropdown menu on site.google to link different pages, but I don't know what to
write inside the value field in order to make this code functioning well. Could you please assist me to figure out how I can do that!
<!DOCTYPE html>
<html>
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="what do I have to write here!">Page 1</option>
<option value="#what do I have to write here!">Page 2</option>
<option value="#what do I have to write here!">Page 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</body>
</html>
You can create an anchor element and click it or use the window.open function with the _top parameter. Like so:
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="https://google.com">Google</option>
<option value="https://developers.google.com/">Developers</option>
<option value="https://developers.google.com/apps-script">Apps Script</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script>
const list = document.getElementById('list')
function goToNewPage(){
// Alternative 1 window.open(list.value, '_top')
// Alternative 2
const a = document.createElement('a')
a.href = list.value
a.target = '_blank'
a.click()
}
</script>
</body>
Here's a simple form I have:
<form name="form_1">
<fieldset>
<select required name="choice">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="Other">Other</option>
</select>
<label for="other_text">If other, please specify: </label>
<input id="other_text" name="other_text" size="30">
</fieldset>
</form>
How do I make the "other_text" input field required if, and only if, the "choice" selection is set to value "Other"? By default, the input field should not be required. Could this be done with only HTML5, or is Javascript required?
Since this use case is dependent upon user interaction and selection of an appropriate menu item, it requires Javascript, and can't be achieved independently with HTML5. You may use following snippet for the requested scenario
<form name="form_1">
<fieldset>
<select required name="choice">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="Other">Other</option>
</select>
<label for="other_text">If other, please specify: </label>
<input id="other_text" name="other_text" size="30">
</fieldset>
</form>
<script type="text/javascript">
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(e) {
if (document.getElementsByTagName('select')[0].value == "Other") {
e.preventDefault();
// Block submitting form if option = Other selected
document.getElementById('other_text').setAttribute('required', true);
return false;
}
// Allow form submit otherwise
document.getElementById('other_text').removeAttribute('required');
console.log("Submitting form", e);
return true;
}
</script>
I believe that you must use a scripting language like javascript for this. Give your select field an ID and call your javascript funciton
<form name="form_1">
<fieldset>
<select required name="choice" id="choice" onchange="changeAttribute()">
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="Other">Other</option>
</select>
<label for="other_text">If other, please specify: </label>
<input id="other_text" name="other_text" size="30">
</fieldset>
</form>
Then use javascript to manipulate the other field
function changeAttribute(){
if(document.getElementById('choice').value == "Other") {
document.getElementById('other_text').setAttribute("required","");
}else{
document.getElementById('other_text').removeAttribute("required","");
}
}
I have a form with two datalist and I would like to generate a link based on the user's selection.
<form>
<input list="Cars">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
For an example, if user chooses Honda and 2017, then the link appears and the address is Honda/2017.net. If the user chooses Subaru and 2015 then the address is Subaru/2015.net and etc.
I can input the different href manually in the code but I am not sure how you make one link change based on selection?
You need Javascript for the so called dynamic html or DHTML. Could be done like this:
<!DOCTYPE html>
<script type="text/javascript">
function generateLink()
{
var brand = document.getElementById('carBrand').value;
var year = document.getElementById('carYear').value;
document.leform.action =brand + '/' + year + '.html';
return true;
}
</script>
<form name="leform" onsubmit="return generateLink();">
<input list="Cars" id='carBrand'>
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" id='carYear'>
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
<input type="submit">
</form>
What happens?
If the submit Button is clicked, the generateLink() function is called. onsubmit="return generateLink();"
In the generateLink() function the value of the selected option for the car/brand and the year are read from html using the getElementById function.
Then the extracted values for the brand and the year are used to generate the corresponding link via concatenation of car, a slash, the year and finally the string '.html'.
The link the form will redirect to is set in the forms action attribute. document.leform.action
To process data submitted by the form you will need some kind of CGI mechanism: https://en.wikipedia.org/wiki/Common_Gateway_Interface
You could use PHP to pass data further to a database for example.
Hope this helps ^^-d
PS: You could also want to implement the page that follows the form (action=) in PHP as dynamic content. Using a HTTP GET Request this could look like /show.php?car=Subaru&Year=2016 which would save you from creating an html file per option (car X year = 15 files!). URLs of HTTP GET Requests can be bookmarked like Honda/2017.net. More info on this here: http://php.net/manual/en/reserved.variables.request.php
use below snippet as a boilerplate.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input list="Cars" onchange="generateUrl()">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" onchange="generateUrl()">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="reset">
</form>
<p id="generated">
</p>
<script type="text/javascript">
function generateUrl(){
var x = document.querySelector("[list='Cars']").value;
var y = document.querySelector("[list='Years']").value;
document.getElementById('generated').innerHTML = (x+y);
}
</script>
</body>
</html>
You can grab the values of the <datalist> using the onchange event; store them in a variable somewhere, then write it out to your link.
var car = '';
var year = '';
$("input[name=car-list]").on('change', function(){
car = $(this).val();
});
$("input[name=yr-list]").on('change', function(){
year = $(this).val();
});
$("input[name=submit]").on('click', function(){
$("#mylink").attr('href', car + '/' + year);
$("#mylink").html(car + '/' + year);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input list="Cars" name="car-list">
<datalist id="Cars">
<option value="Honda" selected>Honda</option>
<option value="Mazda">Mazda</option>
<option value="Ford">Ford</option>
<option value="Nissan">Nissan</option>
<option value="Subaru">Subaru</option>
</datalist>
<input list="Years" name="yr-list">
<datalist id="Years">
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</datalist>
<input type="button" name="submit" value="Submit">
<input type="reset">
</form>
<a id="mylink" href="">My Link</a>
I've checked a few pages online on how to disable a submit button of a dropdown box unless an option has been selected. But can't find one that works for me.
Any help on how to do that would be great!
Edit: I don't want <option value="not_valid">-- select an option --</option> to be considered as an option
<form action="action_page.php">
<select name="attacks" id="attacks">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
use onChange event
<html>
<head>
</head>
<body>
<form action="action_page.php">
<select name="attacks" id="attacks" onchange="selectChanged()">
<option value="not_valid">-- select an option --</option>
<option value="attack1">1</option>
<option value="attack2">2</option>
<option value="attack3">3</option>
<option value="attack4">4</option>
<option value="attack5">5</option>
</select>
<br>
<input type="button" id="battle" onclick="game()" value="Battle">
</form>
<script>
function selectChanged(){
attacks = document.getElementById("attacks");
if(attacks.value =="not_valid"){//or whatever th unwanted value is
document.getElementById("battle").disabled = true;
} else{
document.getElementById("battle").disabled = false;
}
}
</script>
</body>
</html>
I need to pass a value in option select to action where I have agent_id=
Can anyone help?
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
You don't have to use jQuery or Javascript.
Use the name tag of the select and let the form do it's job.
<select name="agent_id" id="agent_id">
Like #Shoaib answered, you dont need any jQuery or Javascript. You can to this simply with pure html!
<form method="POST" action="index.php?action=contact_agent">
<select name="agent_id" required>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
<input type="submit" value="Submit">
</form>
Remove &agent_id= from form action since you don't need it there.
Add name="agent_id" to the select
Optionally add word required do indicate that this selection is required.
Since you are using PHP, then by posting the form to index.php you can catch agent_id with $_POST
/** Since you reference action on `form action` then value of $_GET['action'] will be contact_agent */
$action = $_GET['action'];
/** Value of $_POST['agent_id'] will be selected option value */
$agent_id = $_POST['agent_id'];
As conclusion for such a simple task you should not use any javascript or jQuery. To #FelipeAlvarez that answers your comment
you can simply use your own code but add name for the select tag
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select name="agent_id">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
then you can access it like this
String agent=request.getparameter("agent_id");
with jQuery :
html :
<form method="POST" name="myform" action="index.php?action=contact_agent&agent_id=" onsubmit="SetData()">
<select name="agent" id="agent">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
</form>
jQuery :
$('form').submit(function(){
$(this).attr('action',$(this).attr('action')+$('#agent').val());
$(this).submit();
});
javascript :
function SetData(){
var select = document.getElementById('agent');
var agent_id = select.options[select.selectedIndex].value;
document.myform.action = "index.php?action=contact_agent&agent_id="+agent_id ; # or .getAttribute('action')
myform.submit();
}
instead of trying to catch both POST and GET responses - you can have everything you want in the POST.
Your code:
<form method="POST" action="index.php?action=contact_agent&agent_id=">
<select>
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
</form>
can easily become:
<form method="POST" action="index.php">
<input type="hidden" name="action" value="contact_agent">
<select name="agent_id">
<option value="1">Agent Homer</option>
<option value="2">Agent Lenny</option>
<option value="3">Agent Carl</option>
</select>
<button type="submit">Submit POST Data</button>
</form>
then in index.php - these values will be populated
$_POST['action'] // "contact_agent"
$_POST['agent_id'] // 1, 2 or 3 based on selection in form...