How i can hide label when the user select item from list , i have this code to hide input text , but how i can hide the label for that input text?
<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex==8){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</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="other">Other</option>
</select>
<label>Other</label><input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>
i want to hide <label>Other</label> how i can do that ?
DEMO
you can not match text or value of dropdown like this this.selectedIndex
change it to this.selectedIndex == 8 to match the index
give textbox id="other" to show or hide it.
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('other').style.visibility='visible'}else {document.getElementById('other').style.visibility='hidden'};">
Updated Demo
made new id for label l_other
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('l_other').style.visibility='visible';
document.getElementById('other').style.visibility='visible'}else {document.getElementById('l_other').style.visibility='hidden';
document.getElementById('other').style.visibility='hidden'};">
Demo
Making use of single div with id other wrap label and textbox inside it
<select name="one" onchange="if (this.selectedIndex== 8){
document.getElementById('other').style.visibility='visible'}else{
document.getElementById('other').style.visibility='hidden'}">
Change your select tag and input text as below.
<select name="one" onchange="if (this.selectedIndex=='other'){document.getElementById("otherText").style.visibility='visible'}else {document.getElementById("otherText").style.visibility='hidden'};">
<div id="otherText" style="visibility:hidden;"><label>Other</label><input type="textbox" name="other" /></div>
Hope this helps.
function OnChange(that) {
var lblOther = document.getElementById('lblOther');
if (that.options[that.selectedIndex].text == 'Other') {
lblOther.style.display = "block";
}
else {
lblOther.style.display = "none";
};
}
<form name="myform">
<table>
<td>
<select name="one" onchange="OnChange(this);">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</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="other">Other</option>
</select>
<label id="lblOther" style="display: block;">Other</label><input type="textbox" name="other" style="visibility: hidden;" />
</td>
</table>
</form>
Related
I start to generate my script from this solution find at this link display/hide textbox based on drop down list
In this case, the value must be a character value. But in my situation I need to value is a ID number specified get from mysql database.
This is my modified script and not work. When select the Other value, not display the textbox.
<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='10000'){this.form['10000'].style.visibility='visible'}else {this.form['10000'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</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="10000">Other</option>
</select>
<input type="textbox" name="10000" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
But this script workfine if change the value 10000 to OtherValue word.
How to modify this script?
You can rewrite your code like this.
<form name="myform">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='10000'){userselect.style.visibility='visible'}else {userselect.style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<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="10000">Other</option>
</select>
<input type="textbox" name="10000" id="input" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
<script>
var userselect = document.getElementById('input');
</script>
If you are asking how to convert a string to a number, you can append a + sign before the string, like this:
var numberString = "3"; // the string "3"
var numericValue = +numberString; // the number 3
Be aware that this converts to NaN if your string contains other than numeric values.
I have a site that allows users to "guess / predict" the result of a sports match
To give you an idea what I am trying to achieve have a look at the following image:
The selected teams gets displayed at the bottom of the page along with their scores (as you can see on the bottom circle of the image)
What Im trying to do
As you can see in 1st circle the selected score is 0 (zero) thus I would like the radio button selected to automatically jump to draw
In the second circle the user selected draw by 12 points, in that case I would like the selectbox value to automatically default to zero or disp appropriate message
My Problem
My Script below displays the selected team and selected score inside a div at the bottom of page
I can get the above described problem to work but that in turn affects the primary working of my script, explained above
Any idea how I can solve above problem without affecting the primary working of my script explained above.
Please play around with my code snippet to get an idea of my problem
My Code:
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
$('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="team">
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
</div>
<div id="dispPicks"></div>
This is what I did:
$(document).ready(function () {
$(':radio').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
if ($(this).val() == "Draw") {
$(this).siblings("select").val('0');
}
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal != '' ? "By " + selectBoxVal : selectBoxVal;
$('#dispPicks').append($(ele).val() + " " + selectBoxVal + '<br/>');
});
});
$("select").change(function () {
//clear the div
$('#dispPicks').html('');
//update the div
if ($(this).val() == '') {
if ($(this).siblings("input[type='radio']:checked").val() != "Draw") {
$(this).siblings("input[type='radio']").last().prop('checked', true);
}
}
if($(':radio:checked').val()=="Draw"){
$(this).val('0');
}
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal != '' ? "By " + selectBoxVal : selectBoxVal;
$('#dispPicks').append($(ele).val() + " " + selectBoxVal + '<br/>');
});
});
});
Have a look at the JSFiddle demo
Below example seems to work as you requested.
$(document).ready(function () {
//Monitor change of team/draw
$(':radio').change(function (e) {
var selectBox = $(this).siblings("select");
if($(this).val() == "Draw" && selectBox.val() !== ''){
selectBox.val('');
}
updateDiv();
});
//Monitor change of select
$('select').change(function (e) {
var theRadios = $(this).siblings(":radio");
//Check for draw condition
if($(this).val() == '' ){
//Change team/draw radios to draw
theRadios.filter(':input[value="Draw"]').prop('checked', true);
//Select indicates it is not a draw, clear draw status
}else if(theRadios.filter(':checked').val() == "Draw"){
theRadios.prop('checked', false);
}
updateDiv();
});
});
/*
* (re)draw the div HTML
*/
function updateDiv(){
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
$('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="team">
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
</div>
<div id="dispPicks"></div>
I have a site that allows users to "guess / predict" the result of a sports match
To give you an idea what I am trying to achieve have a look at the following image:
The selected teams gets displayed at the bottom of the page (as you can see on the bottom circle of the image)
What Im trying to do
Im trying to modify the script to not only display the selected team at the bottom of the page but also the selected score
Example
Chiefs by 12
Have a look at my fiddle to get an idea of what I am doing, if anyone can help me to modify my script to include the score aswell it would be tremendously appreciated
My Code:
$(document).ready(function() {
$(':radio').change(function(e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function(ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<div id="dispPicks"></div>
Fiddle Link
You can put related radio buttons and select box in a div and assign a class to it lets say team, then read checked radio button and value of select box in the same div as checked radio button belogs to. see below code -
HTML
<div class="team">
<input type="radio" name="foo" value="Shaks" />
<input type="radio" name="foo" value="Hurricanes" />
<input type="radio" name="foo" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="bar" value="Crusaders" />
<input type="radio" name="bar" value="Pioneers" />
<input type="radio" name="bar" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<br/>
</div>
<div class="team">
<input type="radio" name="wow" value="Chelsea" />
<input type="radio" name="wow" value="Liverpool" />
<input type="radio" name="wow" value="Draw" />
<select>
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
</div>
<div id="dispPicks"></div>
JQuery
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var selectBoxVal = $(this).closest('div.team').find('select').val();
selectBoxVal = selectBoxVal!=''? "By "+selectBoxVal:selectBoxVal;
$('#dispPicks').append($(ele).val() +" "+selectBoxVal+ '<br/>');
});
});
});
JSfiddle Demo
I've made a few changes which I thought were essential:
1. since a team can't win by the score of 0, 0 is out of the select boxes
2. I gave all the select tags a data-name according to its radio button's names
and here we go DEMO
$(document).ready(function () {
$(':radio, select').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
var name=$(this).attr('name');
if($(this).val()=='Draw'){
$('#dispPicks').append($(ele).val());
}
else{
$('#dispPicks').append($(ele).val() + ' by '+$('select[data-name='+name+']').val() + '<br>');
}
});
});
});
I think you to use more id's and names.
This is what i made for you, it just basic to let you understand what i mean:
$(':radio').change(function(e) {
x = $(this).attr('name');
y = $('input[name=' + x + ']:checked').val();
$("#" + x).html(y);
});
$("select").change(function() {
x = $(this).attr('name');
y = $(this).val();
$("#" + x).html(" by " + y);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="pick1" value="Shaks" />
<input type="radio" name="pick1" value="Hurricanes" />
<input type="radio" name="pick1" value="Draw" />
<select name="howMuch1">
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<input type="radio" name="pick2" value="Chelsea" />
<input type="radio" name="pick2" value="Liverpool" />
<input type="radio" name="pick2" value="Draw" />
<select name="howMuch2">
<option value="">0</option>
<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>
<option value="10">10</option>
</select>
<div id="picks">
<br /><span id="pick1"></span><span id="howMuch1"></span>
<br /><span id="pick2"></span><span id="howMuch2"></span>
</div>
On event (change) we make x our target and y our value.. rest is a case of put it right ;)
I have a site with the same form in different spots on the page. I would like to be able to have a placeholder in a text input change when I change the select option. I have a JSFiddle with a kinda example: http://jsfiddle.net/y1jhhqLz/
All the forms look like this:
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
And in this example, I would like to have the place holder change on the input with the id myInput, when I select the option Third.
I have tried many different ways to include the most recent attempt, which I put on the JSFiddle.
Any help would be greatly appreciated!
Set select onclick attribute to
onclick="changePlaceHolder(this,'#myInput1');"
and change javascript function to
function changePlaceHolder(dropdown, element) {
if (jQuery(dropdown).val() == "Third") {
jQuery(element).attr('placeholder', 'You did it correctly!');
} else {
jQuery(element).at}tr('placeholder', '');
}
}
in JSFiddle, you should set the loading behaviour to "no wrap - in head"
Done!
Add a change listener to the select, then get the value of the select and set the attribute placeholder to said value:
$('select').on('change',function(){
var place=$(this).val();
var num=$(this).attr('id').substring(8);
$('#myInput'+num).attr('placeholder',place);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>How do I get it so that when I click on the option that says Third Choice (for any form), it will put in the text box (with the form and number ) a placeholder: "You did it correctly"? But it shouldn't change any other form but the one where you change the select to the Third Choice option. I tried using a onClick function.
</p>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Several things going on. First, remove the onClick events (we are not looking for when the select is clicked but rather when it is changed) and instead use jQuery's on method. Now changePlaceHolder has access to this which is the actual select box which was changed.
See below:
jQuery('select').on('change input', changePlaceHolder);
function changePlaceHolder() {
//I have to use jQuery instead of $ because it is on a wordpress site
if (jQuery(this).val() == "Third") {
jQuery(this).next().attr("placeholder","You did it correctly!");
} else {
jQuery(this).next().attr("placeholder"," ");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" >
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"/>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"/>
</form>
Other things to note: your <input> tags to not require an ending tag </input>, instead write them like this <input />. Note that the "/" ends the tag. You want to edit the input immediately following your select, in which case you can use jQuery(this).next() which will select the element immediately following the current this element.
For your specific case I would not touch source code, would define all functionality in script. Setting the onlick event inline is not a good idea, scripts should not go together with content.
I wrote this script having in mind that your select and input tags do not have to be siblings, the only condition is that both belong to same form:
/* This way you can use $ in your Wordpress */
(function ($) {
$('select').on('change', function(e) {
var thisSelect = $(this);
var thisSelectValue = thisSelect.val();
var thisInput = thisSelect.closest('form').find('input[id^=myInput]');
if (thisSelectValue == 'Third') {
thisInput.attr("placeholder", "You did it correctly!");
} else {
thisInput.attr("placeholder", "");
}
});
}(jQuery));
p {
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Please find the working code for you:
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function changePlaceHolder(element,target) {
alert(element);
if ( element == "Third") {
jQuery(target).attr("placeholder","You did it correctly!");
} else {
jQuery(target).attr("placeholder","");
}
}
</script>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" name="mySelect1" onclick="changePlaceHolder( this.value ,'#myInput1' );">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
</body>
</html>
I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>