Forms affect other forms and submit button Disable/enable - javascript

I should compose a page which there is more packages.
Firstly; visitors have to select person number, after selection Start button will enable and when visitor push button redirect to form4.html with get method.
When I put 3 Forms all forms affect the others.
Please Help Me
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<!----Drop Down And Submit - Start----->
<script type='text/javascript'>//<![CDATA[
$(function(){
$(document).ready(function() {
//Start Buttons
$(".nextbutton").button({ disabled: true });
$('.dropdown').change(function() {
if ($('.dropdown').val() == 0) {
$(".nextbutton").button({ disabled: true });
} else {
$(".nextbutton").button({ disabled: false });
}
});
});
});//]]>
</script>
<!----Drop Down And Submit - End----->
<script type="text/javascript">
function submitform()
{
document.forms["drop_list"].submit();
}
</script>
</head>
<body>
<h3>PACKAGE - 1 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<select name="select" class="dropdown">
<option value=''>Person Number</option>
<option value="Person-1">1</option>
<option value="Person-2">2</option>
<option value="Person-3">3</option>
<option value="Person-4">4</option>
<option value="Person-5">5</option>
<option value="Person-6">6</option>
<option value="Person-7">7</option>
<option value="Person-8">8</option>
<option value="Person-9">9</option>
</select><br><br>
<input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
<br>_____________________________________________________________________<br>
<h3>PACKAGE - 2 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<select name="select" class="dropdown">
<option value=''>Person Number</option>
<option value="Person-1">1</option>
<option value="Person-2">2</option>
<option value="Person-3">3</option>
<option value="Person-4">4</option>
<option value="Person-5">5</option>
<option value="Person-6">6</option>
<option value="Person-7">7</option>
<option value="Person-8">8</option>
<option value="Person-9">9</option>
</select><br><br>
<input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
<br>_____________________________________________________________________<br>
<h3>PACKAGE - 3 </h3>
<form name="drop_list" action="../../form/form4.html" method="get" class="j-forms j-multistep">
<select name="select" class="dropdown">
<option value=''>Person Number</option>
<option value="Person-1">1</option>
<option value="Person-2">2</option>
<option value="Person-3">3</option>
<option value="Person-4">4</option>
<option value="Person-5">5</option>
<option value="Person-6">6</option>
<option value="Person-7">7</option>
<option value="Person-8">8</option>
<option value="Person-9">9</option>
</select><br><br>
<input class="nextbutton" value="Start" type="button" onClick="submitform()"></form>
</body>
</html>


Like i said in the comment to your question, one of your problems is that you actually change all the buttons of class .nextbutton at once.
You could change your change-function to
$('.dropdown').change(function() {
$(this.form).find('.nextbutton').button({ disabled: this.value === '' });
});
What is does is using this that is the element that triggered the function. By using this.form I get the form of that element. And with that I only change the button on the current form.
I also got rid of the if-statement, because that was a Boolean expression, and the disabled-property is also a Boolean.

Related

onclick event is not working with option tag in html?

I have a following html drop down menu with Go button, it is working fine for the first two option values selection first and then hitting Go button, but not working for other two option values, which are having onclick events, Please help me that how to work with onclick event in <option> tag so that I can execute respective alert messages. I need it should work in Google Chrome browser. Thanks in advance.
<html>
<head>
<script>
function third(){
alert("It is a third option event");
}
function fourth(){
alert("Fourth option value");
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option onclick="third()">Third Option</option>
<option onclick="fourth()">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>

Jquery
$(function(){
$('#testdropdownmenu').on('change', function(){
var val = $(this).val();
if(val === 'third') {
alert('third option')
}
else if(val === 'fourth') {
alert('fourth option')
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
JavaScript
function checkval() {
var val = document.getElementById('testdropdownmenu').value
alert(val);
}
<form name="testform" id="testformid">
<select name="testdropdownmenu" id="testdropdownmenu"onchange="checkval()">
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option value="third">Third Option</option>
<option value="fourth">Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
Use the onchange event on select and then compare its value.

You cannot trigger "onclick" event for option tag. Instead You can use "onchange" event of select tag.

The onclick attribute is not supported by the option tag. better use the onchange function on the 'select' tag
<html>
<head>
<script>
function changeValue() {
//get selected value
}
</script>
</head>
<form name="testform" id="testformid">
<select name="testdropdownmenu" onchange="changeValue();" >
<option value="" selected>Please Select</option>
<option value="https://www.w3schools.com">First Option</option>
<option value="https://www.google.co.in">Second Option</option>
<option >Third Option</option>
<option >Fourth Option</option>
</select>
<input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options
[document.testform.testdropdownmenu.selectedIndex].value;">
</form>
</html>

Just try to use onFocus, will trigger when user focus on the element

onclick is not the appropriate event to attach on select > option
Instead you should use onchange for your case. onchange fires whenever you change the the value of select box. And then in your function called on click you can check if its second/third then do something. check the code below:
In HTML:
<select id="testdropdownmenu" onchange="myFunction()">
And in Javascript:
function myFunction() {
var favValue = document.getElementById("testdropdownmenu").value;
// Do something your favourite value appears here
alert(favValue);
}
Hope this helps!!

Html select using select to change the link of a button with Javascript

I tried to find a solution with the stackoverflow search but I did not understand what I found.
Basically I want to have a List from which I can choose a value, which changes a link from the button. I think I need Javascript for it, so I want to ask you, how the code would look like?
EDIT:
So basically i want choose one option of the select, and every option has an own link to another html page. If i click on a button the html page of the chosen option opens. How do I do it with Java Script?
<form action="select.html">
<select name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>

Just check it. Hope this is what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
<form action="select.html">
<select id="selectopt" onchange="selectFunction(this);" name="Bundesländer" size="16">
<option selected>Baden-Würtemberg</option>
<option>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
<a id="mylink" style="position:absolute;top:0;right:0;" href="http://google.com">Link</a>

You can use this code:
<script type="text/javascript">
function redirect(select) {
window.location = select.options[select.selectedIndex].getAttribute('data-link');
}
</script>
<form action="select.html">
<select name="Bundesländer" size="16" onChange="redirect(this)">
<option data-link="http://www.google.fr/" selected>Baden-Würtemberg</option>
<option data-link="http://www.google.com/">Bayern</option>
<option data-link="http://www.google.de/">Berlin</option>
<option data-link="http://www.google.it/">Brandenburg</option>
<option data-link="http://www.google.be/">Bremen</option>
<option data-link="http://www.google.be/">Hamburg</option>
<option data-link="http://www.google.be/">Hessen</option>
<option data-link="http://www.google.be/">Mecklenburg Vorpoomern</option>
<option data-link="http://www.google.be/">Niedersachsen</option>
<option data-link="http://www.google.be/">NRW</option>
<option data-link="http://www.google.be/">Rheinland</option>
<option data-link="http://www.google.be/">Saarland</option>
<option data-link="http://www.google.be/">Sachsen</option>
<option data-link="http://www.google.be/">Sachsen-Anhalt</option>
<option data-link="http://www.google.be/">Schleswig-Holstein</option>
<option data-link="http://www.google.be/">Thüringen</option>
</select>
</form>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('select').change(function () {
$('#btn').attr('url_value', $(this).val());
});
$('#btn').click(function () {
window.open($(this).attr('url_value'));
// alert($(this).attr('url_value'))
});
});
</script>
<body>
<form >
<input type="button" value="Open Selected" id="btn" url_value=""/>
<select name="Bundes" >
<option selected>Baden-</option>
<option>http://www.w3schools.com</option>
<option>http://www.gmail.com</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg </option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>test</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
</form>
</body>
</html>

I think you want to change the action in the form based on selected option.
Use the code bellow:
<!DOCTYPE html>
<html>
<body>
<form action="Bayern.html" id="form" name="form" accept-charset="UTF-8">
<input type="submit">
</form>
<select id="dropwdown" name="dropwdown" onchange="chgAction();">
<option selected>Bayern</option>
<option>Berlin</option>
<option>Brandenburg</option>
<option>Bremen</option>
<option>Hamburg</option>
<option>Hessen</option>
<option>Mecklenburg Vorpoomern</option>
<option>Niedersachsen</option>
<option>NRW</option>
<option>Rheinland</option>
<option>Saarland</option>
<option>Sachsen</option>
<option>Sachsen-Anhalt</option>
<option>Schleswig-Holstein</option>
<option>Thüringen</option>
</select>
<script>
function chgAction()
{
var selectedOption = document.getElementById("dropwdown").value;
if(selectedOption == "Hessen" ) {
document.getElementById('form').action = "Hessen.html";
}
else if(selectedOption == "NRW" ) {
document.getElementById('form').action = "NRW.html";
}
//Apply the same logic for each option ...
}
</script>
</body>
</html>

To redirect a page on Form submit using values from dropdown feild

this is my Form code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
what trying to achieve on submit my from redirects according to what values are selected from drop down
like if on painting is selected it should redirect to mysite/paintings or if only style (abstract) selected it would redirect to mysite/artwork?abstract or if both selected it should be like mysite/painting?abstract
how can i achieve this ?
i have tried using Jquery
<script type="text/javascript">
$(".catvalue").change(function(){
$catvalue = $(".catvalue option:selected").val();
alert ("$catvalue")
});
$(".styvalue").change(function(){
$styvalue = $(".styvalue option:selected").val();
});
if ($catvalue)
{
$redirecturl = "mysite/"+$jqcatvalue;
}
else if ($styvalue)
{
$redirecturl = "mysite/artwork?"+$styvalue;
}
else if ($styvalue && $styvalue )
{
$redirecturl = "mysite/"+$jqcatvalue="?"+$jqstyvalue;
}
is it right approach ?? how could i pass it to form action ?
edit : using magento so have to get base url by <?php echo Mage::getBaseUrl() ?>

I think what you are looking for here is almost the basic drop down navigation schema, very common implementation similar to this example.
<FORM name="f1">
<SELECT name="s1">
<OPTION SELECTED value="http://www.java2s.com">Java2s.com
<OPTION value="http://www.google.com">Google
<OPTION value="http://www.msn.com">msn
<OPTION value="http://www.perl.com">Perl.com
<OPTION value="http://www.php.net">Php.net
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=document.f1.s1.options[document.f1.s1.selectedIndex].value">
</FORM>
Your select options should have the value of the page location to navigate and your onClick value simply calls window.location and uses the selected form data appropriately. No need to actual "submit" the form here to a form handler, use pure javascript like one of the commenters mentioned.
Using this example you could easily add the second portion of your select as a "?option" with an if statement. The onClick could be moved into a function instead of calling window.location directly to do the analysis.
UPDATE: Here is your code re-purposed with this method, it's quick and dirty, might have a couple errors I haven't had the time to check it yet.
<script>
function doSearch() {
var cat = document.search_mini_form.cat.options[document.search_mini_form.cat.selectedIndex].value;
var style = document.search_mini_form.style.options[document.search_mini_form.style.selectedIndex].value;
if ((cat) && (style)) {
alert(cat + "?" + style);
// send to page using variables
}
else if (cat) {
alert(cat);
// send to page using variables
}
else {
alert("nothing selected");
}
}
</script>
<form name="search_mini_form" id="search_mini_form">
<select name="cat" id="cat" class="input-text-select catvalue">
<option value="">All Mediums</option>
<option value="painting">Painting</option>
<option value="photo">Photography</option>
<option value="paper">Work on paper</option>
<option value="drawing">Drawing</option>
</select>
<select name="style" id="style" class="input-text-select styvalue">
<option value="">All Styles</option>
<option value="abstract">Abstract</option>
<option value="arch">Architectural</option>
</select>
<button class="button" title="Search" onClick="doSearch()">Search</button>
</form>

<form id="search_mini_form" action="">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<button class="button" title="Search" type="submit">Search</button>
$(".input-text-select styvalue").change(function(){
$("search_mini_form").attr("action","mysite/");
var thisvalue = $(this).find("option:selected").text();
$("search_mini_form").attr("action","mysite/"+thisvalue );
});

Please try the following code
<form id="search_mini_form">
<select id="cat" class="input-text-select catvalue" name="cat">
<option value="">All Mediums</option>
<option value="150">Painting</option>
<option value="151">Photography</option>
<option value="152">Work on paper</option>
<option value="153">Drawing</option>
</select>
<select id="style" class="input-text-select styvalue" name="style">
<option value="">All Styles</option>
<option value="54">Abstract</option>
<option value="55">Architectural</option>
</select>
<input class="button" title="Search" type="submit" value="Search"/>
</form>
Check the javascript code
$('#search_mini_form').submit(function(){
var mediums=$('#cat option:selected').text();
var styles=$('#style option:selected').text();
if(styles!="AllStyles" && mediums =="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/artwork?'+styles+'=test');
}
else if(styles =="AllStyles" && mediums !="All Mediums")
{
$('#search_mini_form').attr("action",'mysite/'+mediums);
}
else
{
$('#search_mini_form').attr("action",'mysite/'+mediums+'?'+styles+'=test');
}
});
http://jsfiddle.net/zzyEY/18/

Display the value of a select list without a button

How can I get the value to be displayed after the selection from the list is made, without the use of a button. I tried to implement an onChange event for the select list, and doing away with the button, but I can't get it to work. I'd like the value (1,2,3) to display below the select box after an option (a,b,c) is selected.
<script>
function displayResult() {
this.nextSibling.nodeValue = document.getElementById("mySelect").value;
}
</script>
<body>
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
http://jsfiddle.net/8ZkR2/

If you are using JQuery you can do this:
HTML:
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<div id="myDiv"></div>
</form>
JS:
$(document).ready(function() {
$('#mySelect').on('change', function () {
$('#myDiv').html(this.value);
});
});
Fiddle: http://jsfiddle.net/qv7cj/

Using jQuery:
$('#mySelect').change(function(){
//do stuff
})

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function(){
$('#mySelect').on('change', function(){
console.log($('#mySelect').find('option:selected').attr('value'));
})
});
</script>
</head>
<body>`enter code here`
<form>
<select id="mySelect" style="width:220px">
<option value="1">a</option>`enter code here`
<option value="2">b</option>
<option value="3">c</option>
</select>
</form>
<button type="button" onclick="displayResult.call(this)">List Locations</button>
</body>
</html>
pls try this

Javascript disable select box on another select box option

I have two select dropdown lists:
<select name="internal_message">
<option value="yes">Yes</option>
<option value="" selected="selected">No</option>
</select>
and
<select name="internal_message_agent">
<option value="">Choose</option>.... etc
</select>
I have tried:
<select name="internal_message">
<option value="yes" onClick="document.getElementById('internal_message_agent').disabled=!this.selected;">Yes</option>
<option value="" selected="selected">No</option>
</select>
but it doesnt work - how can i get it working to disable the internal_message_agent select element to be disabled when the internal_message selected value is "No" and enable it when the selected option is "Yes"

Add an ID to each select and use jquery to disable it like so:
$('#box1').on('change', function(){
if($(this).val()==='no'){
$('#box2').attr('disabled', 'disabled');
}else{
$('#box2').attr('disabled', false);
}
});
http://jsfiddle.net/3MCaG/1/

Here's what it would look like with Javascript and HTML.
<!DOCTYPE html>
<html>
<head>
</head>
<script>
function validate(){
var b1 = document.getElementById("box1");
var f = b1.options[b1.selectedIndex].value;
var b2 = document.getElementById("box2");
if(f == "no"){
b2.disabled="disabled";
}
else{
b2.disabled="";
}
}
</script>
<select id="box1" onchange="validate()">
<option id="yes" value="yes">Yes</option>
<option id="no" value="no" selected="selected">No</option>
</select>
<select id="box2" disabled>
<option></option>
<option value="">Choose</option>
</select>
</html>

Categories