Textbox compulsory when radio button is selected
Question
I have a view where add to electronic has 2 radiobuttons yes & no. And a submit button. When yes radiobutton is clicked. the quantity textbox should not be empty. But it can be empty if no radiobutton is clicked. This functionality should work when submit button is clicked with yes radiobutton is selected.
<HTML>
<head>
radio
</head>
<body>
<form id=radio>
Add to electronic <input type="radio" name="yes"onclick="validate(_this)"id="yes"/>Yes<input type="radio" name="yes" id="no" />No<br />
<label>Quantity</label><input type="text"size="25"name="dir"id="dir" required/>
<button type=submit name=insert>insert</button>
</body>
<div>
<script src="~/Scripts/radiobuttonvalidation.js"></script>
</div>
</html>
I'm new to mvc and javascript. Please help me with javascript code too, and the way i should link it with my view. Javascript:
function validate(_this) {
if ($(_this).attr('id') == "yes") {
$('#dir').attr('required');
alert("Text Box required");
}
else {
$('#dir').removeAttr('required');
alert("Text Box not required");
}
}
5 answers
solution1
1 2017-07-06 06:29:03
You have several issues
- do not pass
_thisit is not a valid variable - you only test one radio - so the "no" never removes the required
- your HTML is invalid - you need to close the form and not have any html other than
</html>after the</body> - You must remove the required if you want the input to be allowed empty if neither are checked
Here is a working and unobtrusive version. If you decide to use jQuery you have no reasons left to use inline event handlers
$(function() { $("[name='yes']").on("click", function() { if (this.id == "yes") { $('#dir').attr('required', true); console.log("Text Box required"); } else { $('#dir').removeAttr('required'); console.log("Text Box not required"); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <form id=radio> Add to electronic <input type="radio" name="yes" id="yes" />Yes<input type="radio" name="yes" id="no" />No<br /> <label>Quantity</label><input type="text" size="25" name="dir" id="dir" /> <button type=submit name=insert>insert</button> </form>
RobG and I suggest to use a checkbox and I would hide the quantity to:
function validate() { var $check = $("#addToElectronic"), checked = $check.is(":checked"); $("#quant").toggle(checked); $('#dir').attr('required', checked); } $(function() { $("#addToElectronic").on("click",validate); validate(); });
#quant { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <form id=radio> Add to electronic <input type="checkbox" id="addToElectronic" value="yes" />Yes<br/> <div id="quant"> <label>Quantity</label><input type="text" size="25" name="dir" id="dir" /> </div> <button type=submit name=insert>insert</button> </form>
solution2
0 2017-07-06 06:20:39
You are calling your validate function only first radio button just call it on both radio button. Or you can use jQuery to add event to your radio buttons. One more thing there is no name specified in your form for radio button add one for sending data to server.
$(function(){ $("input[name=add_to_ele]").change(function(){ if($(this).val()=="yes") { $('#dir').attr('required','required'); alert("Text Box required"); } else { $('#dir').removeAttr('required'); alert("Text Box not required"); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form > Add to electronic <input type="radio" name="add_to_ele" id="yes" value="yes"/> Yes <input value="no" type="radio" name="add_to_ele" id="no" />No<br /> <label>Quantity</label><input type="text"size="25" name="dir" id="dir" required/> <button type=submit name=insert>insert</button> </form >
solution3
0 2017-07-06 06:27:30
you need to add validation for text box is empty or not
function validate(_this) { if ($(_this).attr('id') == "yes") { if (!$('#dir').val().trim()) { $('#dir').attr('required'); console.log("Text Box required"); } } else { $('#dir').removeAttr('required'); console.log("Text Box not required"); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id=radio> Add to electronic <input type="radio" name="yes" onclick="validate(this)" id="yes" />Yes<input type="radio" name="yes" id="no" />No<br /> <label>Quantity</label><input type="text" size="25" name="dir" id="dir" required/> <button type=submit name=insert>insert</button> </form>
solution4
0 2017-07-06 06:27:31
Typo: onclick="validate(_this) this should be onclick="validate(this)"
function validate(_this) { if ($(_this).attr('id') == "yes") { $('#dir').attr('required'); alert("Text Box required"); } else { $('#dir').removeAttr('required'); alert("Text Box not required"); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id=radio> Add to electronic <input type="radio" name="yes"onclick="validate(this)"id="yes"/>Yes<input type="radio" name="yes" id="no" />No<br /> <label>Quantity</label><input type="text"size="25"name="dir"id="dir"/> <button type=submit name=insert>insert</button> </body>
solution5
0 2017-07-06 06:36:58
I can say that the code you have posted works fine with small changes
function validate(_this) { if ($(_this).attr('id') == "yes") { $('#dir').attr('required', true); alert("Text Box required"); } else { $('#dir').removeAttr('required', false); alert("Text Box not required"); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="radio"> Add to electronic <input type="radio" name="yes" onclick="validate(this)" id="yes"/>Yes <input type="radio" name="yes" id="no" onclick="validate(this)"/> No<br /> <label>Quantity</label> <input type="text" size="25" name="dir" id="dir"/> <button type="submit" name="insert">insert</button> </form>
- You have missed double quotes in form
idand<button>attributes. - You have missed
</form>close tag -
validate(_this)inside the radio input must bevalidate(this) -
$('#dir').attr('required');should be$('#dir').attr('required', boolean_value);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.