堆栈内存溢出
  繁体   English   中英

PHP jQuery ajax提交按钮不起作用

[英]PHP jQuery ajax submit button not working

 原文  2020-02-18 04:11:44  4   4    php/ jquery/ ajax

问题描述

我想使用 jquery 和 ajax 创建一个带有添加和删除字段的动态表单。 但不幸的是，我的插入按钮应该转到 insert.php 将不起作用。当我单击插入按钮时，什么也没发生。 当插入按钮被点击时，它将被重定向到数据库中的 insert.php 存储数据。这是我的编码

中继器.js


    jQuery.fn.extend({
        createRepeater: function (options = {}) {
            var hasOption = function (optionKey) {
                return options.hasOwnProperty(optionKey);
            };

            var option = function (optionKey) {
                return options[optionKey];
            };

            var generateId = function (string) {
                return string
                    .replace(/\[/g, '_')
                    .replace(/\]/g, '')
                    .toLowerCase();
            };

            var addItem = function (items, key, fresh = true) {
                var itemContent = items;
                var group = itemContent.data("group");
                var item = itemContent;
                var input = item.find('input,select');

                input.each(function (index, el) {
                    var attrName = $(el).data('name');
                    var skipName = $(el).data('skip-name');
                    if (skipName != true) {
                        $(el).attr("name", group + "[" + key + "]" + "[" + attrName + "]");
                    } else {
                        if (attrName != 'undefined') {
                            $(el).attr("name", attrName);
                        }
                    }
                    if (fresh == true) {
                        $(el).attr('value', '');
                    }

                    $(el).attr('id', generateId($(el).attr('name')));
                    $(el).parent().find('label').attr('for', generateId($(el).attr('name')));
                })

                var itemClone = items;

                /* Handling remove btn */
                var removeButton = itemClone.find('.remove-btn');

                if (key == 0) {
                    removeButton.attr('disabled', true);
                } else {
                    removeButton.attr('disabled', false);
                }

                removeButton.attr('onclick', '$(this).parents(\'.items\').remove()');

                var newItem = $("<div class='items'>" + itemClone.html() + "<div/>");
                newItem.attr('data-index', key)

                newItem.appendTo(repeater);
            };

            /* find elements */
            var repeater = this;
            var items = repeater.find(".items");
            var key = 0;
            var addButton = repeater.find('.repeater-add-btn');

            items.each(function (index, item) {
                items.remove();
                if (hasOption('showFirstItemToDefault') && option('showFirstItemToDefault') == true) {
                    addItem($(item), key);
                    key++;
                } else {
                    if (items.length > 1) {
                        addItem($(item), key);
                        key++;
                    }
                }
            });

            /* handle click and add items */
            addButton.on("click", function () {
                addItem($(items[0]), key);
                key++;
            });
        }
    });

索引.php

<?php
//session_start();
$servername = "localhost";
$username = "root";
$password = "bptm2012";
$dbname = "icompex";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql = "select panel_id,panel_kp,panel_nm from mem_panel";
$result = mysqli_query($conn, $sql);
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Add Remove Panel Group and Category</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
            crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="repeater.js" type="text/javascript"></script>

</head>
<body>
<div class="container">
    <br/>
    <h3 align="center">Kemaskini Ahli dan Kumpulan Panel Penilai</h3>
    <br/>
    <div style="width:100%; max-width: 600px; margin:0 auto;">
        <div class="panel panel-default">
            <div class="panel-heading">Menu Kumpulan dan Ahli Panel</div>
            <div class="panel-body">
                <span id="success_result"></span>
                <div id="div1"><h2></h2></div>

                <form method="post" id="repeater_form">
                    <div class="form-group">
                        <label>Pilih Group</label><br>
                        <select class="form-control" name="cat">

                            <option value="" disabled selected>Sila Pilih Kategori</option>
                            <option value="A">A - Rekabentuk Alam Bina & Rekabentuk Dalaman</option>
                            <option value="B">B - Pembinaan dan Bahan</option>
                            <option value="C">C - Mesin, Peralatan dan Proses Pergilangan</option>
                            <option value="D">D - ICT & Multimedia</option>
                            <option value="E">E - Elektrik, Elektronik dan Telekomunikasi</option>
                            <option value="F">F - Pengangkutan, Automatif & Penerbangan</option>
                            <option value="G">G - Pertanian, Alam Sekitar dan Tenaga Boleh Diperbaharui</option>
                            <option value="H">H - Pengajaran dan Pembelajaran</option>
                            <option value="I">I - Perkhidmatan dan Pemasaran Produk</option>
                        </select>
                        <label>Sila Pilih Kumpulan Panel</label><br>
                        <select name="group" class="form-control">
                            <option value="" disabled selected>Sila Pilih Kumpulan Panel</option>
                            <option value="1">Panel 1</option>
                            <option value="2">Panel 2</option>
                            <option value="3">Panel 3</option>
                            <option value="4">Panel 4</option>
                            <option value="5">Panel 5</option>
                            <option value="6">Panel 6</option>
                            <option value="7">Panel 7</option>
                            <option value="8">Panel 8</option>
                            <option value="9">Panel 9</option>
                            <option value="10">Panel 10</option>
                            <option value="11">Panel 11</option>
                            <option value="12">Panel 12</option>
                            <option value="13">Panel 13</option>
                            <option value="14">Panel 14</option>
                            <option value="15">Panel 15</option>
                        </select>
                    </div>
                    <div id="repeater">
                        <div class="repeater-heading" align="right">
                            <button type="button" class="btn btn-primary repeater-add-btn">Tambah Ahli</button>
                        </div>
                        <div class="clearfix"></div>
                        <div class="items" data-group="programming_languages">
                            <div class="item-content">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <label>Pilih Nama Ahli Panel</label>
                                            <select class="form-control" data-skip-name="true" data-name="skill[]"
                                                    required>
                                                <?php
                                                echo "<option>Sila Pilih Ahli Panel</option>";
                                                if (mysqli_num_rows($result) > 0) {
                                                    // output data of each row
                                                    while ($row = mysqli_fetch_assoc($result)) {
                                                        echo '<option value="' . $row['panel_id'] . '">' . $row['panel_nm'] . '</option>';
                                                    }
                                                } else {
                                                    echo "<option>Maaf Belum ada pendaftaran ahli panel dibuat</option>";
                                                }

                                                mysqli_close($conn);
                                                ?>
                                            </select>
                                        </div>
                                        <div class="col-md-3" style="margin-top:24px;" align="center">
                                            <button id="remove-btn" class="btn btn-danger"
                                                    onclick="$(this).parents('.items').remove()">Remove
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                    <div class="form-group" align="center">
                        <br/><br/>
                        <input type="submit" name="insert" class="btn btn-success" value="insert"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {

        $("#repeater").createRepeater();

        $('#repeater_form').on('submit', function (event) {
            event.preventDefault();
            $.ajax({
                url: "insert.php",
                method: "POST",
                data: $(this).serialize(),
                success: function (data) {
                    $('#repeater_form')[0].reset();
                    $("#repeater").createRepeater();
                    $('#success_result').html(data);
                    /*setInterval(function(){
                        location.reload();
                    }, 3000);*/
                }
            });
        });

    });

</script>
</body>
</html>

插入.php

<?php

connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

if (isset($_POST["name"])) {
    $skill = implode(", ", $_POST["skill"]);

    $data = array(
        ':panel_cat' => $_POST["cat"],
        ':panel_group' => $_POST["group"],
        ':panel_mem' => $skill
    );

    $query = "
 INSERT INTO panel_penilai 
 (panel_cat, panel_group,panel_mem) 
 VALUES (:panel_cat, :panel_group, :panel_mem)
 ";

    $statement = $connect->prepare($query);
    if ($statement->execute($data)) {
        echo '
  <div class="alert alert-success">
   Data Successfully Inserted
  </div>
  ';
    }
}

//?>

在此处输入图片说明

4 个解决方案

解决方案1
 0  2020-02-18 04:32:54

首先在 insert.php 中，如果发布了“name”参数，您的代码将运行，而在 index.php 表单中，没有名称为“name”的字段。

所以当您使用当前表单发布时，insert.php 文件不会显示任何结果

提醒您忘记 $ 并且 insert.php 和 index.php 之间存在数据库差异

connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

应该

$connect = new PDO("mysql:host=localhost;dbname=icompex", "root", "bptm2012");

并且在ajax中你最好添加错误处理，这样你就可以在控制台浏览器中看到错误信息

$.ajax({
    url:"insert.php",
    method:"POST",
    data:$(this).serialize(),
    success:function(data)
    {
        $('#repeater_form')[0].reset();
        $("#repeater").createRepeater();
        $('#success_result').html(data);
        /*setInterval(function(){
                    location.reload();
        }, 3000);*/
    },
    // like this
    error : function(err){
        console.log(err);
    }
});

解决方案2
 0  2020-02-18 04:35:36

您可以使用 XMLHTTP 请求来发送请求。 它比您的功能更容易并且完全工作。 在此处检查示例请求XMLHTTP REQUEST让我知道您是否成功

解决方案3
 0  2020-02-18 04:41:43

删除event.preventDefault(); . preventDefault() 方法用于停止提交表单。 删除它将允许表单将数据提交到insert.php

解决方案4
 0  2020-02-18 04:46:04

您只需将提交按钮类型更改为按钮

<input type="submit" name="insert" class="btn btn-success" value="insert" />
change to
<input type="button" id="submit" name="insert" class="btn btn-success" value="insert" />

并且事件必须是点击不提交

$('#repeater_form').on('submit', function(event){}
change to 
$('#submit').on('click', function(event){}

所以页面不会重定向，数据发布抛出ajax。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 PHP无法使用Jquery表单中的提交按钮 jquery ajax 提交按钮 用于提交按钮的Ajax无法正常工作 Ajax：PHP：HTML-Submit按钮在Ajax响应中不起作用 Ajax的jQuery的PHP提交 搜索按钮无法在php和jquery ajax中工作后 仅提交按钮的ajax调用和jQuery PHP是否正确？ 提交按钮上的 AJAX 函数调用在 PHP CodeIgniter 中不起作用 提交按钮不能在php中工作 jQuery Mobile + php表单提交“ data-ajax =” false”不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM