jquery - Alert if the checkbox is checked without a value and submitted -
i want when click on submit button, should alerts me if checkbox checked without value in text box. , after corrected, when click on submit, should values of text box checked.
<center> proceed checking? <input type="radio" id="radio1" name="radio" value='yes' /> <label for="radio1">yes</label> <input type="radio" id="radio2" name="radio" value='no'/> <label for="radio2">no</label> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <br><br> <div class="result1"></div> <div class="result2"></div> <div class="result3"></div> <div class="result4"></div> <script> $(function() { $("input[name='radio']").on("change", function() { if ($("input[name='radio']:checked").val() == "yes") { document.queryselector('.result1').innerhtml = 'enter requirements:'; $('.result1').html('enter requirements:').fadein('fast'); document.queryselector('.result2').innerhtml = '<input type="checkbox" name="dn" >dn length:<input type="text" name="dnlength" />'; $('.result2').html('<input type="checkbox" name="dn"> dn length: <input type="text" name="dnlength" />').fadein('fast'); document.queryselector('.result3').innerhtml = '<input type="checkbox" name="dn"> valid digits:<input type="text" name="valid" />'; $('.result3').html('<input type="checkbox" name="dn"> valid digits: <input type="text" name="valid" />').fadein('fast'); document.queryselector('.result4').innerhtml = '<button type="submit" value="submit" onclick="checkboccheck()">submit</button>'; $('.result4').html('<button type="submit" value="submit">submit</button>').fadein('fast'); } if ($("input[name='radio']:checked").val() == "no") { $('.result1').fadeout('fast'); $('.result2').fadeout('fast'); $('.result3').fadeout('fast'); $('.result4').fadeout('fast'); } }); }); </script> </center>
check fiddle, hope looking for,
<form id="myform"> <center>would proceed checking? <input type="radio" id="radio1" name="radio" value='yes' /><label for="radio1">yes</label> <input type="radio" id="radio2" name="radio" value='no'/><label for="radio2">no</label> <br><br> <div class="result1"></div> <div class="result2"></div> <div class="result3"></div> <div class="result4"></div> </center> </form> $.fn.serializeobject = function() { var o = {}; var = this.serializearray(); $.each(a, function() { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; $(function () { $("input[name='radio']").on("change", function () { if($("input[name='radio']:checked").val() == "yes"){ document.queryselector('.result1').innerhtml = 'enter requirements:'; $('.result1').html('enter requirements:').fadein('fast'); document.queryselector('.result2').innerhtml = '<input type="checkbox" name="dn" >dn length:<input type="text" name="dnlength" />'; $('.result2').html('<input type="checkbox" name="dn"> dn length: <input type="text" name="dnlength" />').fadein('fast'); document.queryselector('.result3').innerhtml = '<input type="checkbox" name="dn"> valid digits:<input type="text" name="valid" />'; $('.result3').html('<input type="checkbox" name="vd"> valid digits: <input type="text" name="valid" />').fadein('fast'); document.queryselector('.result4').innerhtml = '<button type="submit" value="submit" onclick="checkboccheck()">submit</button>'; $('.result4').html('<button type="submit" value="submit">submit</button>').fadein('fast'); } if($("input[name='radio']:checked").val() == "no"){ $('.result1').fadeout('fast').html(''); $('.result2').fadeout('fast').html(''); $('.result3').fadeout('fast').html(''); $('.result4').fadeout('fast').html(''); } }); $('#myform').submit(function(){ var formdata = $(this).serializeobject(); console.log(formdata); if(formdata.radio =='yes'){ if(formdata.dn == 'on'){ if(!formdata.dnlength){ alert('please enter dn length.'); return false; } } if(formdata.vd == 'on'){ if(!formdata.valid){ alert('please enter valid digints'); return false; } } if(!formdata.dn && !formdata.vd){ alert('please choose atleast 1 requirements!'); return false; } }else{ alert('you cannot submit form!'); return false; } }); });