CAM308 CAM308 - 1 month ago 15
Javascript Question

Javascript alert cancel button not working in safari

I'm trying to set up a sequence of events so that when a user click on a radio button it triggers the form to submit. In addition, I want to give the user a java warning asking them to confirm their selection by click ok, then redirect to php page, or cancel and stay on current page and do nothing. This is what I have, but for some reason when user click cancel on alert in safari, the form still submits.

Is the radio onclick conflicting with the actual script? How would I add the alert to the script?

<form name="confirmForm" id="confirmForm" method="POST" action="update_confirm.php">

<div id="confirmGroup">

<input type="radio" name="email_confirm" id="emailGroup1" value="Verify" class="verify" onclick="return confirm('Update Email Status?');" >
<label class="emailGroup" for="emailGroup1">Verify</label>

<input type="radio" name="email_confirm" id="emailGroup2" value="Good" class="good" onclick="return confirm('Update Email Status?');" >
<label class="emailGroup" for="emailGroup2">Good</label>

<input type="radio" name="email_confirm" id="emailGroup3" value="Bad" class="bad" onclick="return confirm('Update Email Status?');" >
<label class="emailGroup" for="emailGroup3">Bad</label>

</div>
</form>


--

<script>
$("#confirmForm").change(function()
{
document.getElementById("confirmForm").submit();
});
</script>

Answer Source

You need to add confirm in your JQuery change event:

$("#confirmForm").change(function() {
  if (confirm('Are you sure of your selection?')) {
    document.getElementById("confirmForm").submit();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="confirmForm" id="confirmForm" method="POST" action="update_confirm.php">

  <div id="confirmGroup">

    <input type="radio" name="email_confirm" id="emailGroup1" value="Verify" class="verify" onclick="return confirm('Update Email Status?');">
    <label class="emailGroup" for="emailGroup1">Verify</label>

    <input type="radio" name="email_confirm" id="emailGroup2" value="Good" class="good" onclick="return confirm('Update Email Status?');">
    <label class="emailGroup" for="emailGroup2">Good</label>

    <input type="radio" name="email_confirm" id="emailGroup3" value="Bad" class="bad" onclick="return confirm('Update Email Status?');">
    <label class="emailGroup" for="emailGroup3">Bad</label>

  </div>
</form>