javascript - 在javascript确认框的返回值上发布表单

Question

我有几个字段的表单，我想要什么，当有人点击提交按钮时，他提交的表单必须通过 javascript 确认框确认，当他点击确定时，表单应该提交，否则不提交。我的表单结构是

    <form method="post" style="margin: 10px;" id="rForm">
    <table style="margin-left:20px;">
    <tbody>
    <tr>
    <td class="f_title_sm label">First Name</td>
    <td class="f_value_sm"><input type="text" name="user_first_name" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_first_name']) ? $_POST['user_first_name'] : ''); ?>" /> *</td>
    </tr>

    <tr>
    <td class="f_title_sm label">Middle Name</td>
    <td class="f_value_sm"><input type="text" name="user_middle_name" class="inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_middle_name']) ? $_POST['user_middle_name'] : ''); ?>" /></td>
    </tr>
    <tr>
    <td class="f_title_sm label">Last Name</td>
    <td class="f_value_sm"><input type="text" name="user_last_name" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_last_name']) ? $_POST['user_last_name'] : ''); ?>" /> *</td>
    </tr>

    <tr>
    <td class="f_title_sm label">Email ID</td>
    <td class="f_value_sm"><input type="text" name="user_email" class="validate[required,custom[email]] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_email']) ? $_POST['user_email'] : ''); ?>" /> * </td>
    </tr>
    <tr>
    <td class="f_title_sm label">City</td>
    <td class="f_value_sm"><input type="text" name="user_city" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_city']) ? $_POST['user_city'] : ''); ?>" /></td>
    </tr>
    <tr>
    <td class="f_title_sm label">State</td>
    <td class="f_value_sm"><input type="text" name="user_state" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_state']) ? $_POST['user_state'] : ''); ?>" /></td>
    </tr>
    <tr>
    <td class="f_title_sm label">Country</td>
    <td class="f_value_sm"><input type="text" name="user_country" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_country']) ? $_POST['user_country'] : ''); ?>" /></td>
    </tr>
    <tr>
    <td class="f_title_sm label">Postal Code</td>
    <td class="f_value_sm"><input type="text" name="user_postal_code" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_postal_code']) ? $_POST['user_postal_code'] : ''); ?>" /></td>
    </tr>

    <tr>
    <td class="f_title_sm label">Username</td>
    <td class="f_value_sm"><input type="text" name="user_id" class="validate[required] text-input inputbox box_100" style="width: 190px;" value="<?php echo (isset($_POST['user_id']) ? $_POST['user_id'] : ''); ?>" /> * <span>[<a href="#" title="Username Must be 4 Characters Long">?</a>]</span></td>
    </tr>
    <tr>
    <td class="f_title_sm label">Password</td>
    <td class="f_value_sm"><input type="password" name="user_key" class="validate[required] text-input inputbox box_100" style="width: 190px;" /> * </td>
    </tr>
    <tr>
    <td class="f_title_sm label">Confirm-Password</td>
    <td class="f_value_sm"><input type="password" name="user_key1" class="validate[required] text-input inputbox box_100" style="width: 190px;" /> * </td>
    </tr>

    <tr>
    <td class="f_title_sm label">User Type</td>
    <td class="f_value_sm">
    &nbsp;&nbsp;&nbsp;<input type="radio" name="user_type" value="<?php echo USER_ROLES::USER_BUYER; ?>" checked="checked" id="buyer" /> &nbsp;&nbsp;<lable style="font-size:12px;" for="buyer">Buyer</lable>
    &nbsp;&nbsp; <input type="radio" name="user_type" value="<?php echo USER_ROLES::USER_SELLER; ?>" id="seller"/>&nbsp;&nbsp;<lable style="font-size:12px;" for="seller">Seller</lable>&nbsp;&nbsp; 

    </td>
    </tr>

    <tr>
    <td></td>
    <td class="f_value_sm value"><input type="submit" name="user_reg" class="go backcolr" value="Register" /></td>
    </tr>
    </tbody>
    </table>
    </form>

所以请建议我适当的解决方案

Answer 1

您可以使用 jQuery 拦截表单提交并显示对话框以确认或取消。

$("form").submit(function(e){
   if(!confirm('Continue?'))
      e.preventDefault();
});

e.preventDefault()将阻止提交表单。

Answer 2

尝试这个 ：onsubmit="return validation();"

<form method="post" style="margin: 10px;" id="rForm" onsubmit="return validation();">

脚本在这里：

function validation(){
   var conf = confirm("are your sure!");
   if(conf==false){
       return false;
   }
}

希望它会有所帮助

Answer 3

var form = document.getElementById('rForm');
if (document.addEventListener) {
    form.addEventListener('submit', confirmForm, false);
} else {
    form.attachEvent('onsubmit', confirmForm);
}

function confirmForm(e) {
    e = e || window.event;
    var answer = confirm('Are you sure ?');
    if (!answer) {
       if(e.preventDefault) {
           e.preventDefault();
       } else {
           e.returnValue = false
       }
    }       
}

Answer 4

        $("form").submit(function() {
            var res = confirm("Are you shure go");
            if(!res){
                return false;

            }
               return true
        });