javascript - jquery form.submit事件未触发-6ren

javascript - jquery form.submit事件未触发

转载作者：行者123 更新时间：2023-12-03 02:14:02

我正在尝试触发表单上的提交事件并验证它。有两件事在我的代码中不起作用，第一件事是未触发 onsubmit 事件，第二件事是电子邮件类型的输入字段未经过验证我使用了 html5 输入类型电子邮件并且是必需的，但仍然没有值(value)。我不知道我做错了什么。这是代码:

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Learn PHP CodeIgniter Framework with AJAX and Bootstrap</title>
    <link href="<?php echo base_url('assests/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
    <link href="<?php echo base_url('assests/datatables/css/dataTables.bootstrap.css')?>" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <h3>Contacts</h3>
        <br />
        <button class="btn btn-success" onclick="add_contact()"><i class="glyphicon glyphicon-plus"></i> Add Contact</button>
        <br />
        <br />
        <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th style="width:0px;"></th>
                    <th>first name</th>
                    <th>last name</th>
                    <th>phone</th>
                    <th>email</th> 
                    <th style="width:125px;">Action</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($contacts as $contact){?>
                    <tr>
                        <td style="width:0px;"><?php echo $contact->id;?></td>
                        <td><?php echo $contact->first_name;?></td>
                        <td><?php echo $contact->last_name;?></td>
                        <td><?php echo $contact->phone;?></td>
                        <td><?php echo $contact->email;?></td>
                        <td>
                            <button class="btn btn-warning" onclick="edit_contact(<?php echo $contact->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                            <button class="btn btn-danger" onclick="delete_contact(<?php echo $contact->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
                        </td>
                    </tr>
                 <?php }?>
            </tbody> 
            <tfoot>
                <tr>
                    <th style="width:0px;">ID</th>
                    <th>first name</th>
                    <th>last name</th>
                    <th>phone</th>
                    <th>email</th>
                    <th>Action</th>
                </tr>
            </tfoot>
        </table> 
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="<?php echo base_url('assests/bootstrap/js/bootstrap.min.js')?>"></script>
    <script src="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
    <script src="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script> 
    <script type="text/javascript">
        $(document).ready( function () {
            $('#table_id').DataTable();
            $('#form').submit(function(event) {
                save();
                event.preventDefault();
            });
        } );
        var save_method; //for save method string
        var table;


        function add_contact()
        {
            save_method = 'add';
            $('#form')[0].reset(); // reset form on modals
            $('#modal_form').modal('show'); // show bootstrap modal
            //$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
        }

        function edit_contact(id)
        {
            save_method = 'update';
            $('#form')[0].reset(); // reset form on modals

            //Ajax Load data from ajax
            $.ajax({
                url : "<?php echo site_url('contacts/ajax_edit/')?>/" + id,
                type: "GET",
                dataType: "JSON",
                success: function(data)
                {
                    $('[name="id"]').val(data.id);
                    $('[name="first_name"]').val(data.first_name);
                    $('[name="last_name"]').val(data.last_name);
                    $('[name="phone"]').val(data.phone);
                    $('[name="email"]').val(data.email);


                    $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                    $('.modal-title').text('Edit Contact'); // Set title to Bootstrap modal title

                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error get data from ajax');
                }
            });
        }

        function save()
        {
            console.log("submitting");
            var url;
            if(save_method == 'add')
            {
                url = "<?php echo site_url('contacts/contact_add')?>";
            }
            else
            {
              url = "<?php echo site_url('contacts/contact_update')?>";
            }
            if($('#form')[0].checkValidity())
            // ajax adding data to database
                $.ajax({
                    url : url,
                    type: "POST",
                    data: $("#form").serialize(),
                    dataType: "JSON",
                    //contentType: 'application/json; charset=utf-8',
                    success: function(data)
                    {
                        //console.log(url);
                        //if success close modal and reload ajax table
                        $('#modal_form').modal('hide');
                        location.reload();// for reload a page
                    },
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        alert('Error adding / update data');
                    }
                });
            else
            {
                return false;
            }
        }

        function delete_contact(id)
        {
            if(confirm('Are you sure delete this data?'))
            {
            // ajax delete data from database
                $.ajax({
                    url : "<?php echo site_url('contacts/contact_delete')?>/"+id,
                    type: "POST",
                    dataType: "JSON",
                    success: function(data)
                    {

                       location.reload();
                    },
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        console.log(errorThrown);
                        alert('Error deleting data');
                    }
                });
            }
        }

    </script>

    <!-- Bootstrap modal -->
    <div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title">Contact Form</h3>
                </div>
                <div class="modal-body form">
                    <form action="#" id="form" class="form-horizontal" onsubmit="save();">
                        <input type="hidden" value="" name="id"/>
                        <div class="form-body">
                            <div class="form-group">
                                <label class="control-label col-md-3">first name</label>
                                <div class="col-md-9">
                                    <input name="first_name" placeholder="first name" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">last name</label>
                                <div class="col-md-9">
                                  <input name="last_name" placeholder="last name" class="form-control" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">phone</label>
                                <div class="col-md-9">
                                    <input name="phone" placeholder="phone" class="form-control" type="text"> 
                                </div>
                            </div>
                            <div class="form-group">
                                    <label class="control-label col-md-3">email</label>
                                    <div class="col-md-9">
                                        <input type="email" name="email" placeholder="email" class="form-control requiredField" required>
                                    </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <input type="submit" id="btnSave" class="btn btn-primary" value="save">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- End Bootstrap modal --> 
</body>

最佳答案

您需要将提交按钮置于表单元素内。现在它被放置在表单之外。

<form action="#" id="form" class="form-horizontal" onsubmit="save();">
    <!-- Form stuff -->
    <div class="modal-footer">
        <input type="submit" id="btnSave" class="btn btn-primary" value="save">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
    </div>
</form>

Example 。请注意，PHP 将无法工作，但您会看到表单已提交。

关于javascript - jquery form.submit事件未触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49435503/

文章推荐： javascript - 将多个元素的宽度显示为文本的最佳方法

文章推荐： javascript - 两个相同的 JavaScript 日期不相等

文章推荐： Javascript Map 返回未定义，尽管(键，值)对已定义

jquery - 触发 ('click' ) 与触发 ('click' )[0]
这个问题已经有答案了: jQuery trigger click vs click ()? (3 个回答) 已关闭 5 年前。我无法区分 trigger('click')与 trigger('cli
asp.net - IHttpModule.BeginRequest 触发 2X，Application_BeginRequest 触发 1X
我正在运行 VS 2008 和 .NET 3.5 SP1。我想在 HttpModule 中实现命中跟踪在我的 ASP.NET 应用程序中。很简单，我想。然而，BeginRequest我的事件 Htt
mysql - 触发
这是一段代码，我收到以下错误 #1064 - You have an error in your SQL syntax; check the manual that corresponds to yo
javascript - 触发 'dummy'鼠标滚轮事件
有没有办法用任意增量触发滚轮事件。就像 jQuery 对“点击”所做的那样: $('#selector').trigger('click'); 我需要类似的东西，只需一个滚轮即可: $('#selec
sql - SQL-触发 “not in”
我正在尝试在配音数据库中触发时间。我想检查一下在不出现角色的电影配音中不能对角色进行配音。这是PDM: 和CDM 我是SQL的初学者，但我知道表“DUBBES”中应该有一些触发器。我试图做这样的事情，
jquery - 触发 .on() 创建的事件
这个问题已经有答案了: jquery programmatically click on new dom element (3 个回答) 已关闭 6 年前。我有一个 jQuery 事件定义如下: $
jquery - 子菜单点击事件不起作用/触发
主菜单的点击代码适用于类更改，但不适用于子菜单...当单击食物或鞋子等子菜单项时，它不会触发警报命令...事实上，悬停非常适合子菜单但不是活跃的 HTML
jquery - 触发()后未给出鼠标位置
问题非常简单: $('#btn1').click(function(event){ alert( "pageX: " + event.pageX + "\npa
java - 触发@Scheduled方法
我使用 Spring 的调度程序 (@EnableScheduling) 并具有以下 @Scheduled 方法，该方法每分钟调用一次: @Component public class Schedul
mysql - 触发，不插入
错误 SQL 查询:文档 CREATE TRIGGER `triggers_div` AFTER INSERT ON `produits` FOR EACH ROW BEGIN INSERT INTO
MySQL 触发 IF 条件
我想在插入另一个表时填充表中的一些列值，并为特定列设置条件。我使用触发器: CREATE TRIGGER inserttrigger AFTER INSERT ON table1 FOR EACH R
MySQL 触发 If 语句并与查询进行比较
我可以在 5.6 MySQL 环境中使用一些关于触发器的指导。我想创建一个触发器，如果发现具有相同速度的电脑的价格较低，则该触发器会停止更新。架构是产品(制造商、型号、类型)PC(型号、速度、内
postgresql - 触发，更新字段更新时间戳
背景:我们有一个 completed_flag，默认为 0，当有人完成调查时更新为 1。我想记录这次更新发生的时间戳在编写了这个触发器/函数以在标志从 0 触发到 1 时更新时间戳后，我怀疑我这样做
mysql - 多行插入时触发器不工作/触发
数据库中有两个表 KistStatus和 LastKistStatus .后者将保存 KistStatus 的所有“最新”值。 . KistStatus有大约 174.000 条记录，LastKist
iPhone - 触发 APNS
我正在开发一个使用 APNS 的 iPhone 应用程序。我很清楚实现 APNS、创 build 备 token 的过程，等等等等……我不知道如何通过 Web 服务从提供商端触发和启动 APNS。任何
页面加载时 JavaScript 触发
我有这个 javascript，当数量更改时会触发 update_cart... jQuery('div.woocommerce').on('change', '.qty', function
javascript - 单击事件未使用 ON 触发？
当我单击任何按钮时，click 事件不会被触发。艰难的是，我使用 $("div").on("click", "button", function () { 让它工作，但我想看到它使用 .class 工
Android:触发 onCreateOptionsMenu
如何在我的代码中触发 Android onCreateOptionsMenu 函数，即无需用户单击手机上的选项菜单按钮？最佳答案 Activity.openOptionsMenu(); 就可以了关
Android - 触发 adjustResize
我将表单包装在中然后我设置 list android:windowSoftInputMode="adjustResize" (默认 react native )。现在，当我用手指触摸事件手动聚焦一
Android TextWatcher 触发
我有一个 Android 编程问题。使用下面的代码我想验证一个字符串匹配。它验证正常，但 LogCat 显示 TextWatcher 方法在每次击键时触发两次，我不明白为什么。我希望每次击键只触发一次

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jquery form.submit事件未触发