1

我正在尝试在我的项目中通过 php 使用 SWEETALERT2，但是当我尝试在 google chrome 中运行我的文件时它不起作用。这些按钮是可点击的，它会记录数据，但 sweetalert 不显示任何内容，只是一个可点击的提交按钮。

我想在这个项目上实现的事情是在我成功记录新用户时使用 sweetalert 显示。当我需要更新记录或删除文件时。

如果输入框没有值，则提交按钮不应该是可点击的。

索引.php

 <div class="modal-body">
<form action="add_main_users.php" id="form">
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Full Name:</label>
<input type="text" class="form-control" name="fname" required data-validation-required-message="This field is required">

</div>
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Username:</label>
<input type="text" class="form-control" name="uname" required data-validation-required-message="This field is required">
</div>

div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Email:</label>
<input type="email" class="form-control" name="email" required data-validation-required-message="This field is required">
</div>

<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Default Password:</label>
<input type="text" class="form-control" name="dpass" required data-validation-required-message="This field is required">
</div>
                                                    
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Role:</label>
<select class="form-control custom-select" name="role" required data-validation-required-message="This field is required">

<option value="Administrator">Administrator</option>
<option value="Editor">Editor</option>
</select>
</div>
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Branch Assigned:</label>
<select class="form-control custom-select" name="bassign" required data-validation-required-message="This field is required">
<option value="0">1Warehouse</option>
<option value="1">2Warehouse</option>
<option value="2">3Warehouse</option>
</select>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</div>
</div>
</form>
</div>
</div>```

    
add_main_users.php 
<?php
    $request = $_REQUEST; 
    $fname = $request['fname'];
    $uname = $request['uname']; 
    $email = $request['email'];
    $dpass = $request['dpass'];

    $servername = "localhost"; 
    $username = "root"; 
    $password = ""; 
    $dbname = "dims";

    $mysqli = new mysqli($servername, $username, $password, $dbname);

    if ($mysqli->connect_errno) {
      echo "Failed to connect to MySQL: " . $mysqli->connect_error;
      exit();
    }

    $sql = "INSERT INTO users (u_name, u_username, u_email, u_password)
    VALUES ('".$fname."', '".$uname."', '".$email."', '".$dpass."')";

    if ($mysqli->query($sql)) {
      echo "New user has been created.";
    } else {
      return "Error: " . $sql . "<br>" . $mysqli->error;
    }

    $mysqli->close();
?>

js



function save() 
{
    $("#btnSubmit").on("click", function() {
        var $this           = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form            = "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route           = $(form).attr('action'); //get the route using attribute action

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function (response) {//once the request successfully process to the server side it will return result here
                $this.attr('disabled', false).html($caption);

                // Reload lists of employees
                all();

                // We will display the result using alert
                Swal.fire({
                  icon: 'success',
                  title: 'Success.',
                  text: response
                });

                // Reset form
                resetForm(form);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // You can put something here if there is an error from submitted request
            }
        });
    });
}

function resetForm(selector) 
{
    $(selector)[0].reset();
}

$(document).ready(function() {

    
    // Submit form using AJAX To Save Data
    save();

});
4

1 回答 1

0 
function save($this, $caption, form, formData, route) {
    // Ajax config
    $.ajax({
        type: "POST", //we are using POST method to submit the data to the server side
        url: route, // get the route value
        data: formData, // our serialized array data for server side
        beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
            $this.attr('disabled', true).html("Processing...");
        },
        success: function (response) {//once the request successfully process to the server side it will return result here
            $this.attr('disabled', false).html($caption);

            // Reload lists of employees
            all();

            // We will display the result using alert
            Swal.fire({
                icon: 'success',
                title: 'Success.',
                text: response
            });

            // Reset form
            resetForm(form);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            // You can put something here if there is an error from submitted request
        }
    });
};

$(document).ready(function() {
    $("#btnSubmit").on("click", function() {
        var $this    = $(this); //submit button selector using ID
        var $caption = $this.html();// We store the html content of the submit button
        var form     = "#form"; //defined the #form ID
        var formData = $(form).serializeArray(); //serialize the form into array
        var route    = $(form).attr('action'); //get the route using attribute action

        // Submit form using AJAX To Save Data
         save($this, $caption, form, formData, route);
    })
});
于 2021-12-08T03:56:35.300 回答