当代码引用其他表单时，Javascript或表单验证

Javascript or Form validation when code refers to other forms

本文关键字：表单 Javascript 验证 引用 其他 代码      更新时间：2023-09-26

下面使用表单按钮将照片标记为不同的质量。如果选择质量1或质量2，则php代码将被触发。但是，如果选择"删除"而不是分配质量，我希望在执行脚本之前进行"您确定吗"验证。除非按下删除按钮，否则我不想要验证。由于表单代码甚至改变css，我不希望代码运行在所有如果删除被按下，直到OK上"你确定"已确认。我尝试了一些方法，但形式运行瞬间，可能是因为$('form').on('click', 'input[type="submit"]', function(e) {线。我从这里剥离了我的尝试，因为它只是混淆了问题。我想要这个验证的语法。非常感谢任何帮助。(我剥离了图像的代码，因为在示例中不需要)。

Javascript

$(function() {
    $('form').on('click', 'input[type="submit"]', function(e) {
        $.ajax({
            type: 'post',
            url: "mycode.php", 
            data: $(this).parent().serialize(),
        });
        var clicked = $(this),
            imageName = clicked.data("image");
        clicked.removeClass("c_off").addClass("c_on");
        $('input[type="submit"]').each(function() {
            var self = $(this);
            if (!clicked.is(self)) {
                if (self.hasClass("c_on") && imageName == self.data("image"))
                    self.removeClass("c_on").addClass("c_off");
            }
        });
        e.preventDefault();
    });
});


<form>
    <input name="num" type="hidden" value="101">
    <input name="shw" type="hidden" value="1">
    <input type="submit" value="Delete" class="c_off" data-image="67">
</form>
<form>
    <input name="num" type="hidden" value="101">
    <input name="shw" type="hidden" value="2">
    <input type="submit" value="Quality A" class="c_on" data-image="67">
</form>
<form>
    <input name="num" type="hidden" value="101">
    <input name="shw" type="hidden" value="3">
    <input type="submit" value="Quality B" class="c_off" data-image="67">
</form>

这里是小提琴:http://jsfiddle.net/zeog65js/1/

$(function() {
    $('form').on('click', 'input[type="submit"]', function(e) {
        if($(this).val() == 'Delete') {
            if (confirm("Delete it?")) {
              doAjax($(this));
            } 
        } else {
            doAjax($(this));
        }
        e.preventDefault();
    });
    function doAjax(that){
        $.ajax({
            type: 'post',
            url: "mycode.php", 
            data: $(this).parent().serialize(),
        });
        var clicked = that,
            imageName = clicked.data("image");
        clicked.removeClass("c_off").addClass("c_on");
        $('input[type="submit"]').each(function() {
            var self = $(this);
            if (!clicked.is(self)) {
                if (self.hasClass("c_on") && imageName == self.data("image"))
                    self.removeClass("c_on").addClass("c_off");
                }
        });
    } 
});

您可以在表单上使用submit处理程序，这样您就可以防止发送表单，在之前执行您想要的所有验证到表单的实际提交:

$('form').submit( function(e) {
  // Prior to the submission, check if we are in
  // the delete button and raise the "Are you sure" button
  if (validations)
    return false; // This will prevent the submission
  else {
    // Run your PHP code
    $.ajax({
      type: 'post',
      url: "mycode.php", 
      data: $(this).parent().serialize(),
    });
  }
});

更多信息https://api.jquery.com/submit/

相关文章：