how do i show alert if no radio button selected form two radio button and after that show alert on select option if not selected. but I am getting alert on both radio button how do I fix it

$('#form_id').submit(function(el) {
        el.preventDefault();
        let r = $('input[type=radio][name=name]').val();

        if(r != 'inst' ){
            alert('Please select radio')
            return false;
        }else if(r != 'hq'){
            alert('Please select radio')
            return false;
        }

        if('0' === $('#select_id').val()){
            alert('Please select option')
            return false;
        }else{
            this.submit();
        }
        

    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form_id">
    <input type="radio" name="name" id="r1" value="inst">
    <input type="radio" name="name" id="r2" value="hq">

    <select id="select_id" class="">
        <option value="0">--select--</option>
        <option value="6">Advertisements</option>
        <option value="4">Another reason:</option>
    </select>

    <button type="submit" class="btn btn-primary">submit</button>
</form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The problem is that in your case, the 2 if statements regarding your radio buttons will always be false for one of the cases.

So do it like this.

let r = $('input[type=radio][name=name]:checked').length;

if (r == 0) {
  alert('Please select radio')
  return false;
}

Demo

Show code snippet

$('#form_id').submit(function(el) {
  el.preventDefault();
  let r = $('input[type=radio][name=name]:checked').length;

  if (r == 0) {
    alert('Please select radio')
    return false;
  }
  if ('0' === $('#select_id').val()) {
    alert('Please select option')
    return false;
  }
  this.submit();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form_id">
  <input type="radio" name="name" id="r1" value="inst">
  <input type="radio" name="name" id="r2" value="hq">

  <select id="select_id" class="">
    <option value="0">--select--</option>
    <option value="6">Advertisements</option>
    <option value="4">Another reason:</option>
  </select>

  <button type="submit" class="btn btn-primary">submit</button>
</form>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try this

$('#form_id').submit(function(el) {
        el.preventDefault();
        let r = $(":radio:checked").val();

        if(!r){
            alert('Please select radio')
            return false;
        }

        if('0' === $('#select_id').val()){
            alert('Please select option')
            return false;
        }else{
            this.submit();
        }
    })