[英]Make submit button active when value on chosen dropdown option is more than 0
I am trying to get the submit button in my code to display if the user chooses one option from the dropdown menu. 如果用户从下拉菜单中选择一个选项,我试图在代码中显示“提交”按钮。 I figured I could do this by using the value attribute. 我想我可以通过使用value属性来做到这一点。 Please see my code below, I have included some JavaScript but im aware this could be completely wrong! 请在下面查看我的代码,我已经包含了一些JavaScript,但是我知道这可能是完全错误的!
<select id="button1" class="button" title="Button 1">
<option value="0">--Please choose an option for the first blank--</option>
<option id="buttonText1_1" class="buttonText" value="1">Arsenal</option>
<option id="buttonText1_2" class="buttonText" value="2">Spurs</option>
<option id="buttonText1_3" class="buttonText" value="3">Liverpool</option>
<option id="buttonText1_4" class="buttonText" value="4">Man Utd</option>
<option id="buttonText1_5" class="buttonText" value="5">Man City</option>
</select>
<div class="break"></div>
<select id="button2" class="button" title="Button 2">
<option value="0">--Please choose an option for the second blank--</option>
<option id="buttonText2_1" class="buttonText" value="1">Lampard</option>
<option id="buttonText2_2" class="buttonText" value="2">Gerrard</option>
<option id="buttonText2_3" class="buttonText" value="3">Scholes</option>
<option id="buttonText2_4" class="buttonText" value="4">Viera</option>
<option id="buttonText2_5" class="buttonText" value="5">Keane</option>
</select>
<div class="break"></div>
<button title="Submit Button" id="submitButton" class="button" onClick="submitClick()">
<p id="submitText" class="buttonText">Submit</p>
</button>
JS: JS:
document.getElementById("button1").onchange = function() {
if(this.value != 0) {
optionVal++;
}
}
document.getElementById("button2").onchange = function() {
if(this.value != 0) {
optionVal++;
}
}
function activateSub() {
$('#submitButton').css('display', 'block');
}
function doSomething() {
if(optionVal != 0) {
activateSub();
}
}
I have made a JSFiddle with this code in. Thank you in advance! 我已经用此代码制作了一个JSFiddle 。预先感谢您!
If you want to show the button only if both selects have a value > "0" you can check is this way: 如果仅当两个选择的值都大于“ 0”时才显示按钮,则可以这样检查:
VanillaJS: VanillaJS:
function submitVisiblity() {
// If you use numeric value into options' "value" attribute you should convert (parse) the option value from a string to an integer
if (parseInt(document.getElementById("button1").value) > 0 &&
parseInt(document.getElementById("button2").value) > 0) {
document.getElementById('submitButton').style.display = 'block'
} else {
document.getElementById('submitButton').style.display = 'none'
}
}
document.getElementById("button1").onchange = submitVisiblity
document.getElementById("button2").onchange = submitVisiblity
JQuery: JQuery的:
$("#button1,#button2").on('change',function() {
if (parseInt($("#button1").val()) > 0 && parseInt($("#button2").val()) > 0) {
$('#submitButton').show()
} else {
$('#submitButton').hide()
}
});
Bye :) 再见:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.