CODEWITHSUNDEEP
javascripthtmlasp.netasp.net-mvc
Mark Antony
Mark Antony

Reputation: 61

Textbox compulsory when radio button is selected

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");
    }
}

Upvotes: 0

Views: 1749

Answers (5)

mplungjan
mplungjan

Reputation: 178350

You have several issues

  • do not pass _this it 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>

Upvotes: 1

R.K.Saini
R.K.Saini

Reputation: 2708

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 >

Upvotes: 0

Dinesh undefined
Dinesh undefined

Reputation: 5546

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>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

  1. You have missed double quotes in form id and <button> attributes.
  2. You have missed </form> close tag
  3. validate(_this) inside the radio input must be validate(this)
  4. $('#dir').attr('required'); should be $('#dir').attr('required', boolean_value);

Upvotes: 0

prasanth
prasanth

Reputation: 22500

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>

Upvotes: 0

Related Questions