Question

我的页面上有一个选项卡式菜单，第一个选项卡是数据输入表单，其余的是整理信息的数据表。

<div class="tile" id="tile-1">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <div class="slider"></div>
        <li class="nav-item adddetails-button">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true"><i class="fas fa-plus-square"></i> Add details</a>
        </li>
        <li class="nav-item Datatablea-button">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false"><i class="fas fa-folder"></i> Datatable A</a>
        </li>
        <li class="nav-item Datatableb-button">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="fas fa-truck-moving"></i> Datatable B</a>
        </li>
        <li class="nav-item Datatablec-button">
            <a class="nav-link" id="setting-tab" data-toggle="tab" href="#setting" role="tab" aria-controls="setting" aria-selected="false"><i class="fas fa-address-card"></i> Datatable C</a>
        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="adddetails tab-pane show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <h2>Add Job</h2>
            <form id="dataForm" name="dataform" method="POST" action="/">
                /**form details**/
            </form>
        </div>
        <div class="Datatablea tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <table>
                /**Datatable A**/
            </table>
        </div>
        <div class="Datatableb tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <table>
                /**Datatable B**/
            </table>
        </div>
        <div class="Datatablec tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <table>
                /**Datatable C**/
            </table>
        </div>
    </div>
</div>

我的add details输入表单中有一个下拉菜单，允许我从companies表中选择公司（以防止重复输入）

<select id='clients' name='clients' class='limitedNumbChosen add-company' multiple='false'>
    <?php
        $sql = "SELECT * FROM `datatbasea`";
        $query = mysqli_query($conn, $sql);
        if (mysqli_num_rows($query) > 0) {
            // output data of each row
            while($result = mysqli_fetch_assoc($query)) {
                $company_name = $result['company'];
                echo "<option value='$company_name'>$company_name</option>";
            }
        } else { 
            echo "0 results";
        }
        mysqli_close($conn);
    ?>
</select>
<div id="add-company" class="fas fa-plus"> Add Company </div>

此外，在底部有一个添加公司的选项。

我想要的是：

如果有人通过“添加公司”表单将一个新公司添加到数据库中，则可以将该新公司从数据库表中拉出并自动添加到select drop down中，而无需刷新页面。 / p>

我将寻求使用与给出的解决方案类似的解决方案，以便无需刷新即可更新页面上的数据表

添加公司代码为：

JS

    jQuery(document).ready(function () {
    $("#sbmt").click(function(e) {
        e.preventDefault();
        e.stopPropagation();

        var company_name = document.getElementById("addcompany_name").value;
        var contact_one = document.getElementById("addcontact_one").value;
        var contact_two = document.getElementById("addcontact_two").value;
        var company_phone = document.getElementById("addcompany_phone").value;
        var company_email = document.getElementById("addcompany_email").value;
        var company_street = document.getElementById("companystreet").value;
        var company_town = document.getElementById("companytown").value;
        var company_postcode = document.getElementById("companypostcode").value;

        // Returns successful data submission message when the entered information is stored in database.
        var DataForm = 'company_name1=' + company_name + '&contact_one1=' + contact_one + '&contact_two1=' + contact_two + '&company_phone1=' + company_phone + '&company_email1=' + company_email + '&company_street1=' + company_street + '&company_town1=' + company_town + '&company_postcode1=' + company_postcode;
        if (company_name == '' || contact_one == '' || company_phone == '' || company_email == '' || company_street == '' || company_town == '' || company_postcode == '') {
        alert("Please Fill All Fields");
        } 
        else {
        // AJAX code to submit form.
            jQuery.ajax({
                type: "POST",
                url: 'wp-content/themes/EazyFreight/databasecompany.php',
                data: DataForm,
                dataType:"json", 
                success:function(strMessage) {
                    $("#message").text(strMessage);
                }
            });
            return false;  
        }
    });
});

然后将PHP添加到mysql数据库中，选择菜单将从中获取信息：

<?php

    //Register variables
    $company_name = $_POST['company_name1'];
    $contact_one = $_POST['contact_one1'];
    $contact_two = $_POST['contact_two1'];
    $company_phone = $_POST['company_phone1'];
    $company_email = $_POST['company_email1'];
    $company_street = $_POST['company_street1'];
    $company_town = $_POST['company_town1'];
    $company_postcode = $_POST['company_postcode1'];

    $sql = "INSERT INTO `Company`(`id`, `company`, `contact1`, `contact2`, `phone`, `billingemail`, `street`, `town`, `postcode`)
    VALUES (NULL, '$company_name', '$contact_one', '$contact_two', '$company_phone', '$company_email', '$company_street', '$company_town', '$company_postcode')";

    if (mysqli_query($conn, $sql)) {
        echo "New record created successfully";
    } 
    else {
        echo "Error: " . $sql . "<br>" . mysqli_error($conn);
    }
    mysqli_close($conn);
    die();

基本上，我认为我需要在提交表单时刷新select dropdown而不刷新整个页面

刷新数据表选项卡，而不刷新提交

0 个答案: