I am trying to figure out a way to have a form submit to a different page.php depending on the selection made.
The code below works in redirecting, however its not posting the information over to the next page.
Form
<form id="form1" method="post" action="javascript:redirect();">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
</form>
Javascript:
function redirect() {
var Value = document.getElementById("man").value;
if(Value == 0)
{
location.href = "page2.php";
}
else
{
location.href = "page3.php";
}
}
This is a variant I normally use for this cases. I think it's better than redirecting via JS:
HTML:
<form id="form1" method="post">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
</form>
JS:
form1 = document.getElementById("form1");
form1.onsubmit = formSubmit;
function formSubmit() {
var manValue = document.getElementById("man").value;
if (manValue == 0) {
form1.action = "page2.php";
} else {
form1.action = "page3.php";
}
}
You just modify the form's action depending on which option was selected. Hope it helped.
Okay I sorted this one out. Changed the code to:
<form action="" method="post" onsubmit="return send(this);">
<select id="man" name="man">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit">Continue</button>
<script type="text/javascript">
function send( frm ) {
if ( frm.man.value == "0" )
frm.action = "page2.php";
else
frm.action = "page3.php";
}
</script>
Related
I am trying to alert a value when a user clicks the submit button. I gave the "required" attribute to both select tag but it is not working.
I want to alert a value when a user submits a button. Can anyone tell where i went wrong?
Code:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
var ORSZ = OR + SZ;
alert(ORSZ);
}
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox" required>
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
Here you go with a solution https://jsfiddle.net/1mydje82/1/
$('select').on('change', function(){
var required = false;
$('select').each(function(){
if($(this).val() === '')
required = true;
});
$('input[value="Submit"]').attr('disabled', required);
});
$('input[value="Submit"]').click(function(){
var OR = $("#request").val();
var SZ = $("#sites").val();
var ORSZ = OR + SZ;
alert(ORSZ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" value="Submit">
</form>
I've used jQuery. Initially your Submit button will be disabled.
Once you select both the drodown with values then only Submit button will be enabled.
Hope this will help you.
You can't rely on required attribute of <select>(because it's only work when form submits normally, and not supported in Opera anyhow).
You can make it happening like below:-
Example:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
if(OR =='' || SZ ==''){
alert('Please select values from both select-box'); return false;
}else{
var ORSZ = OR + SZ;
alert(ORSZ);
}
}
<form>
<select id="request" class="dropdownbox">
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
</form>
I need your help,
Using javascript, how could I add some sort of data form validation that would be two-fold:
1st Event, [OnKeyUp] attached to all of the input boxes
2nd Event, [OnChange] attached to all of the select boxes
Typical User Scenarios
If there is any data present in any of the input boxes and no selected option values then { enable the search button } else { keep the search button disabled }
If there are any selected option values who’s option value is not null and no data present in all of then { enable the search button } else { keep the search button disabled }
<!DOCTYPE html>
<html>
<head></head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>
var car=$('#car'); var fruits=$('#fruits');
var veggie=$('#veggie'); var number = $('#number');
$('select').change(function(){
validate();
});
$('input').keyup(function(){
validate();
});
function validate(){
if(($(veggie).val()!='' || $(number).val()!='') &&
$(car).val()=='' && $(fruits).val()==''){
$('#search').prop('disabled',false);
}else if($(veggie).val()=='' && $(number).val()=='' &&
($(car).val()!='' || $(fruits).val()!='')){
$('#search').prop('disabled',false);
}else{
$('#search').prop('disabled',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
I'm not 100% sure, but it looks like you want to enable the button if only one of the select elements has a value or one of the input elements has a value, but not if both (or neither) do.
If that's the case then this should work, and it allows you you add as many elements to it as you need by adding IDs to the arrays at the top.
https://jsfiddle.net/j7by6bsz/
var selectInputIds = ['fruits', 'car'];
var textInputIds = ['veggie', 'number'];
function setButtonState() {
var hasVal = function(arr) {
for(var i = 0; i < arr.length; i++) {
if(document.getElementById(arr[i]).value) {
return true;
}
}
return false;
};
var hasSelectValue = function () {
return hasVal(selectInputIds);
}
var hasTextValue = function () {
return hasVal(textInputIds);
}
var theButton = document.getElementById('search');
var s = hasSelectValue();
var t = hasTextValue();
theButton.disabled = ((s && t) || (!t && !s)); // you can do this bit smarter, but this is explicit
}
(function attachStuff (arr, evt) {
function listenIn(arr, evt) {
for(var i = 0; i < arr.length; i++) {
document.getElementById(arr[i]).addEventListener(evt, setButtonState);
}
}
listenIn(selectInputIds, 'change');
listenIn(textInputIds, 'keyup');
}())
Your requirements could use some clarification around what happens if both input types have values though.
I have a form, like this:
<form action="" method="get">
<select>
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
New Page
</form>
and I want to enable the href only if the option value is not "-".
Can you help me, please?
Thanks,
Here is your code:
checkSelect = function ()
{
var mySelect = document.getElementById("mySelect");
return mySelect.options[mySelect.selectedIndex].text !== "-";
}
<form action="" method="get">
<select id="mySelect">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
New Page
</form>
What you want is to add an onChange event to the select, And then when the change function is called you can do a check to see whether you would like to change your page with this value, See code below for example
<form action="" method="get">
<select onchange="getValue(this);">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
</form>
<script>
function onChange(sel){
if(sel.value != "-"){
document.location.href = newUrl;
}
}
</script>
It should look like this with the onChange event, +1 to david
<form action="" method="get">
<select id="sel" onchange="myFunction()">
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
<a id="link">New Page</a>
then myFunction should look like this
if(document.getElementById("sel").value != "-"){
document.getElementById("link").href = "your link here";
}
else{
document.getElementById("link").href = "#";
}
Here is working code
$(function() {
$("select").change(function() {
if ($("select option:selected").val() != "0") {
$("a").attr("onclick", "javascript:return true;")
} else {
$("a").attr("onclick", "javascript:return false;")
}
})
})
Here is JSFiddle code
function changeHref() {
console.log(this.value)
if (this.value == 0) {
document.getElementById("anc").href="";
} else {
document.getElementById("anc").href="page6.html";
}
}
var select = document.getElementById('sel');
select.addEventListener('change', changeHref, false);
<form action="" method="get">
<select id='sel'>
<option value="0">-</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
</select>
<a id='anc' href="" onclick="return false;">New Page</a>
</form>
I have a form written in JavaScript that works correctly when I submit. However, there is one conditional which I would like to be validated before the user hits the submit button. If the user chooses "None" on the dropdown menu, I want the other dropdown menu and textbox to be disabled before the user tries to submit. This is what I've done so far, but nothing seems to happen everytime I choose "None":
<form name="my_form" onsubmit="return submit()" action="/test" method="post">
<select id="month">
<option value="None">None</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="text" name="year" placeholder="Year" />
<input type="submit" value="Submit" />
</form>
<script>
function submit(){
var get_month_value = month.options[month.selectedIndex].text;
if(get_month_value == "None"){
document.getElementById("year").disabled = true;
document.getElementById("day").disabled = true;
return false;
}
else if(year == ""){
alert("Year must be filled out");
return false;
}
</script>
Where am I going wrong with this? Any help would be appreciated. Thanks.
Give form an ID and remove the onsubmit function:
<form id="my_form" name="my_form" action="/test" method="post">
Place the submit button outside the form and add the onclick function:
<input type="submit" value="Submit" onclick="submit();" />
Give year text field an ID:
<input type="text" id="year" name="year" placeholder="Year" />
Javascript:
function submit() {
var select = document.getElementById("month");
var get_month_value = select.options[select.selectedIndex].value;
var year = document.getElementById('year').value;
if ((get_month_value == "None") || (year == "")) {
alert("Please fill out the required fields");
} else {
document.getElementById("my_form").submit();
}
}
DEMO
HTML5 Date picker with "required" attribute(works):
<form id="dateForm" name="dateForm" action="/test" method="post">
Date: <input type="date" name="date" required />
<input type="submit" />
</form>
No need for JScript and html for dropdowns.
DEMO
Your code has the following errors:-
First of all you can't give your function the name submit in your form attribute.
You are missing } at the end of your function.
Your Input Text should have id=year not name.
Month is not defined.
year is not defined.
Change
these lines in your HTML:-
<form name="my_form" onsubmit="return validateForm()" action="/test" method="post">
<input type="text" id="year" placeholder="Year" />
Javascript:-
function validateForm(){
var month = document.getElementById('month');
var year = document.getElementById('year').value;
var get_month_value = month.options[month.selectedIndex].text;
if(get_month_value == "None"){
document.getElementById("year").disabled = true;
document.getElementById("day").disabled = true;
return false;
}
else if(year == ""){
alert("Year must be filled out");
return false;
}
}
I can't seem to get this function to work out. I'm trying to change the "business" input value of my form based on an amount selected in the "amount" dropdown. What am I missing!!! I've been trying this for an hour.
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#ramatico.com";
if (document.forms['5'].amount.value > 11){
businessvar = "paypall#ramatico.com"
}
document.forms['5'].business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Ok. The next step. I have about 100 of these forms on a page. Instead of creating one for each form, I'd like to have one script that changes based on which form is being changed with "onChange". Each of the forms on the page have values of the same name (but not ID) (they are for paypal). I think it will be ok if I can change the"formname" in the following: "document.forms['formname']" based on a variable populated by something like chPy("formname") etc..... I can't seem to get that to work either.
Removing the form reference would take care of both of your items.
<script type="text/javascript">
function chPy(oSelect)
{
var businessvar = "paypals#ramatico.com";
if (oSelect.form.amount.value > 11){
businessvar = "paypall#ramatico.com"
}
oSelect.form.business.value = businessvar;
}
</script>
<form name="5">
<select name="amount" OnChange="chPy(this)">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
Problem is that you are using a number as form name.
Add some letters to the name and it will work:
<script type="text/javascript">
function chPy()
{
var businessvar = "paypals#XYZ.com";
if (document.forms['form5'].amount.value > 11){
businessvar = "paypall#XYZ.com"
}
document.forms['form5'].business.value = businessvar;
}
</script>
<form name="form5">
<select name="amount" OnChange="chPy()">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input name="business" type="text" value="">
</form>
HTML:
<form name="form5">
<select name="amount">
<option value="na">Select</option>
<option value="1.00">$1</option>
<option value="5.00">$5</option>
<option value="10.00">$10</option>
<option value="15.00">$15</option>
<option value="20.00">$20</option>
<option value="25.00">$25</option>
</select>
<input type="text" name="business">
</form>
JavaScript:
var form5 = document.forms['form5'];
form5.amount.onchange = function() {
form5.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
Live demo: http://jsfiddle.net/Fx7zh/
For multiple forms, you can use this JavaScript code:
for (var i = 0, l = document.forms.length; i < l; i++) {
document.forms[i].amount.onchange = function(i) {
this.form.business.value =
(this.value > 11 ? 'paypall' : 'paypals') + '#ramatico.com';
}
}
Live demo: http://jsfiddle.net/Fx7zh/2/