"document.location" runs it immediately after it's clicked. I need it to run after submit. . . Any Suggestions?
For reference: First Tennessee Bank
<form>
<select name="mydropdown" class="styled" onchange="document.location = this.value" value="GO">
<option value="http://www.google.com">Google</option>
<option value="http://fb.com">Facebook</option>
<option value="http://youtube.com">Youtube</option>
</select>
<input type=submit>
</form>
This will do what you are wanting to do when they click submit it will go do the location they picked.
function go(){
var x =document.getElementsByClassName('styled')[0]
document.location = x.options[x.selectedIndex].value
}
<form>
<select name="mydropdown" class="styled" c value="GO">
<option value="http://www.google.com">Google</option>
<option value="http://fb.com">Facebook</option>
<option value="http://youtube.com">Youtube</option>
</select>
<input type="button" value="Go" onclick="go()">
</form>
Related
I have a form which contains a dropdown and 2 other input fields.Initially I want to show only the dropdown and hide other two fields and show the other two fields when the value of dropdown is other.
<form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %}
<fieldset>
<select name="one" onchange="if (this.value=='other'){this.form['datefrom'].style.visibility='visible'}else {this.form['datefrom'].style.visibility='hidden'};">
<option value="none" selected="selected">Select...</option>
<option value = "1m" >1 month</option>
<option value = "2m">2 months</option>
<option value = "3m">3 months</option>
<option value = "other">other</option>
</select>
<br> From:
<br>
<input type="datetime-local" name="datefrom"><br> To:
<br>
<input type="datetime-local" name="dateto"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
In my code initially all the input fields are showing.So if anybody could me how to hide and the two datetime input fields initially and show them only when the value of dropdown is other.Any help would be appreciated.
You can use javascript.
First, you set your input field as hidden who warp inside div.
Use onchange for dynamic condition based on your select option value.
Check this example.
function func(value) {
if (value == 'other') {
$('#input_field').show();
} else {
$('#input_field').hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %}
<fieldset>
<select name="one" onchange="func(this.value)">
<option value="none" selected="selected">Select...</option>
<option value="1m">1 month</option>
<option value="2m">2 months</option>
<option value="3m">3 months</option>
<option value="other">other</option>
</select>
<div id="input_field" style="display:none;">
<br> From:
<br>
<input type="datetime-local" name="datefrom"><br> To:
<br>
<input type="datetime-local" name="dateto"><br><br>
</div>
<input type="submit" value="Submit">
</fieldset>
</form>
Javascript solution
<!DOCTYPE html>
<html>
<head>
<style>
.cs-hide{
display:none;
}
</style>
</head>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value = "1m" >1 month</option>
<option value = "2m">2 months</option>
<option value = "3m">3 months</option>
<option value = "other">other</option>
</select>
<br>
<div id="dateContainer" class="cs-hide">
From:<br>
<input type="datetime-local" name="datefrom"><br>
To:<br>
<input type="datetime-local" name="dateto"><br><br>
</div>
<input type="submit" value="Submit">
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
var element = document.getElementById("dateContainer");
if(x === "other"){
element.classList.remove("cs-hide");
}else{
element.classList.add("cs-hide");
}
}
</script>
</body>
</html>
I have done the following form with MaterializeCSS:
<form action="num.php" method="GET" autocomplete="off">
<select id="num" name="num" class="browser-default">
<option selected="true" disabled selected>Select number
</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<button class="btn" type="submit">Show
<i class="material-icons right">send</i>
</button>
</form>
The problem is that the user can click on the button, without selecting a number. But I need that he first choose a value from the select, and only then press a button. And if he pressed a button without selecting a number (when "Select number:" selected), display an error and do not send the form. How can this be done with JavaScript?
no need for js. you can add required attribute to select and set value of Select number to ""
<form action="num.php" onsubmit="return checkForm()" method="GET" autocomplete="off">
<select required id="num" name="num" class="browser-default">
<option selected="true" value="" disabled selected>Select number
</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<button class="btn" id="btn" type="submit">Show
<i class="material-icons right">send</i>
</button>
</form>
Get the form reference and intercept the onsubmit event
document.getElementsByTagName('form')[0].onsubmit = function() {
//check here the value and return false to stop the submit
if(document.getElementById('num').value == "")
return false
}
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.
How can I capture form options on submit?
I have a plain html form which I can call a JavaScript function from on exit, But how do I capture the chosen option from the <select> element?
Please see code below:
<legend>Administration:</legend>
<script type="text/javascript">
function handleIt(m){
alert("hello");
}
</script>
</head>
<body>
<form action="javascript:handleIt(select.name)"/>
<select name="num" required>
<option value="1">Add Anouncment</option>
<option value="2">Del Anouncment</option>
<option value="3">Aprove </option>
<option value="4">unAprove </option>
</select>
<input name="Anouncement" type="text" required>
<input name="Submit" type="submit" value="Update"/>
</form>
First of all, there are errors in your HTML syntax.
This will get the data when the 'submit' button is pressed (jsfiddle):
$('#submit_btn').on('click', function(e) {
e.preventDefault();
console.log($('[name="num"]').val());
});
<form id="main-form" method="get">
<select name="num" required>
<option value="1">Add Anouncment</option>
<option value="2">Del Anouncment</option>
<option value="3">Aprove </option>
<option value="4">unAprove </option>
</select>
<input name="Anouncement" type="text" required>
<input name="Submit" type="button" value="Update" id="submit_btn"/>
</form>
you can use this to retrieve selected option
<script type="text/javascript">
function handleIt(){
var v=document.getElementById("s1");
alert(v.options[v.selectedIndex].text) ;
}
</script>
</head>
<body>
<form action="javascript:handleIt()"/>
<select name="num" id="s1" required>
<option value="1">Add Anouncment</option>
<option value="2">Del Anouncment</option>
<option value="3">Aprove </option>
<option value="4">unAprove </option>
</select>
<input name="Anouncement" type="text" required>
<input name="Submit" type="submit" value="Update"/>
</form>
This is what I am trying to achieve -
Select different options from a drop down menu.
Input different number of text fields depending on the option selected.
Like when selecting optionA it should automatically create 2 textfields for some input.
OptionB should create 5 textfields for inputs.
Here is where I am struggling -
Can't get the option id or value of the option selected
Creating variable number of textfields.
HTML Code -
<body>
<p>
<select name="Select Flow" id="Flow" >
<option id="option0" value="https://fusion.paypal.com">Send Money</option>
<option id="option1" value="option1">optionA</option>
<option id="option2" value="option2">OptionB</option>
<option id="option3" value="option3">C</option>
<option id="option4" value="option4">D</option>
<option id="option5">E</option>
<option id="option6">F</option>
<option id="option7">G</option>
<option id="option8" value="option8">H</option>
</select>
</p>
<p>
<input type="submit" name="Submit" id="Submit" value="Submit" onclick="myfunc()"action="" />
</p>
</body>
JS-
function myfunc()
{
var value="F";
var t = document.getElementById("Flow");
alert((t.options.length).innnerHTML);
for(var i=0; i<t.options.length;i++)
{
if(t.options[i].text == value)
{
t.selectedIndex = i;
alert(t.selectedIndex.innerHTML);
}
}
}
This code can help you
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction(name,job)
{
alert(document.getElementById("Flow").value);
write = document.getElementById('textfeilds');
for(i=0;i<document.getElementById("Flow").value;i++)
{
write.innerHTML += '<input type="text">';
}
}
</script>
<p>
<select name="Select Flow" id="Flow" >
<option id="option0" value="4">Send Money</option>
<option id="option1" value="1">optionA</option>
<option id="option2" value="2">OptionB</option>
<option id="option3" value="3">C</option>
<option id="option4" value="4">D</option>
<option id="option5" value="5">E</option>
<option id="option6" value="6">F</option>
<option id="option7" value="7">G</option>
<option id="option8" value="8">H</option>
</select>
</p>
<p>
<input type="submit" name="Submit" id="Submit" value="Submit" onclick="myFunction()"action="" />
</p>
<div id="textfeilds"></div>
</body>
</html>