个人中心
gpt4 book ai didi

javascript - PHP、JQuery - 如何动态添加更多字段，包括下拉列表(来自数据库的值和一个文本框)

转载 作者：搜寻专家 更新时间：2023-10-31 21:28:02 25 4
gpt4 key购买 nike

我有 2 个表单组件，我想动态添加(允许用户添加超过 1 个)

首先，我有一个下拉列表，其中包含从 MySQL 填充的值。后跟一个文本框，允许用户输入一些查询。

基本上，下拉列表将显示一个用户列表和一个文本框，供此人向此人键入消息。

用户可以发送给多个不同的用户，因此有一个添加按钮可以添加另一个下拉列表和一个文本框..

我尝试使用 jQuery 追加。但 append 不接受 PHP 作为其服务器端。我还尝试使用 jQuery 克隆来克隆整个 DIV，但失败了。

我正在使用这段代码动态添加字段

Add Remove field dynamically

这是我的下拉列表和文本框的代码

<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div> 
    <select name="msgrecever1" style="background:#252525" >
          <option value="">Select Faculty</option>
          <?php
            require_once("../dbconnection/dbcon.php");
            $sql="SELECT * FROM user WHERE role='Faculty'";
            $records=mysqli_query($con,$sql);
            while($row=mysqli_fetch_assoc($records)){
            $name=$row['username'];
            echo "<option value='$name'>".$name."</option>";
            }                               
            ?>

          </select><input type="text" name="mytext[]"></div>

只要用户按下“添加新字段”，我就想复制尽可能多的上述代码

jQuery:

$(document).ready(function() {

    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID


     x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();

        if(x < max_fields){ //max input box allowed
            x++; //text box increment


            $(wrapper).append('<div><input type=\"text\" name=\"mytext[]\"/><a href=\"#\" class=\"remove_field\">Remove</a>');

        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

=================

编辑:

我已经使用了这个解决方案并且它有效。

<?php require_once("../dbconnection/dbcon.php"); 

if(isset($_POST['submit']))
{
    $capture_field_vals ="";
    foreach($_POST["msgrecipient"] as $key => $text_field)
    {
        echo "Key: $key; Value: $text_field<br />\n";

        echo "<br>";

    }
        foreach($_POST["enquiry"] as $key => $text_field2)
        {
        echo "Key: $key; Value: $text_field2<br />\n";

        echo "<br>";
        }
}

    ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
            newNum = new Number(num + 1), // the numeric ID of the new input field being added
            newElem = $('#testingDiv' + num).clone().attr('id', 'testingDiv' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value

        newElem.find('.test-select').attr('id', 'ID' + newNum + '_select').attr('name', 'ID' + newNum + '_select').val('');
        newElem.find('.test-textarea').val('');
         // insert the new element after the last "duplicatable" input field
        $('#testingDiv' + num).after(newElem);
        // enable the "remove" button
        $('#btnDel').attr('disabled', false);
        // right now you can only add 5 sections. change '5' below to the max number of times the form can be duplicated
        if (newNum == 5) $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
    });

    $('#btnDel').click(function () {
        // confirmation
        if (confirm("Are you sure you wish to remove this section of the form? Any information it contains will be lost!")) {
            var num = $('.clonedInput').length;
            // how many "duplicatable" input fields we currently have
            $('#testingDiv' + num).slideUp('slow', function () {
                $(this).remove();
                // if only one element remains, disable the "remove" button
                if (num - 1 === 1) $('#btnDel').attr('disabled', true);
                // enable the "add" button
                $('#btnAdd').attr('disabled', false).prop('value', "[ + ] add to this form");
            });
        }
        return false;
        // remove the last element

        // enable the "add" button
        $('#btnAdd').attr('disabled', false);
    });

    $('#btnDel').attr('disabled', true);
});
</script>
</head>
<body>
<form action="#" method="post">

    <!--
    ########################################## -->
    <!-- START CLONED SECTION -->
    <!-- ########################################## -->
 <div id="testingDiv1" class="clonedInput">

        <select name="msgrecipient[]" id="select">
            <option value="">Select Faculty</option>
              <?php
                require_once("../dbconnection/dbcon.php");
                $sql="SELECT * FROM user WHERE role='Faculty'";
                $records=mysqli_query($con,$sql);
                while($row=mysqli_fetch_assoc($records)){
                $name=$row['name'];
                echo "<option value='$name'>".$name."</option>";
                }

                ?>

              </select>

        <textarea id="textarea" name="enquiry[]" class="test-textarea"></textarea>

    </div>
    <!--/clonedInput-->
    <!-- ########################################## -->
    <!-- END CLONED SECTION -->
    <!-- ########################################## -->
    <!-- ADD - DELETE BUTTONS -->
    <div id="add-del-buttons">
        <input type="button" id="btnAdd" value="[ + ] add to this form">
        <input type="button" id="btnDel" value="[ - ] remove the section above">
    </div>
    <!-- /ADD - DELETE BUTTONS -->
    <input type="submit" name="submit"class="button button-block" value="Submit"/>
</form>


</body>
</html>

最佳答案

假设您有这样的标记:

<form id="faculty_wrapper">
    <div class="faculty_row">
        <select id="faculty" name="faculty[]">
            <option value="faculty_one">faculty_one</option>
            <option value="faculty_one">faculty_two</option>
            <option value="faculty_one">faculty_three</option>
            <option value="faculty_one">faculty_four</option>
        </select>
        <input type="text" name="message[]">
    </div>
</form>

<a href="#" id="add_more">Add More</a> <!-- Add More Rows -->
<a href="#" id="submit">Submit</a>  <!-- Submit Button for further work -->

Javascript:

jQuery(document).ready(function($){

   $("#add_more").on('click', function(e){
        e.preventDefault(); // Prevent Default the event
        var clone = $(".faculty_row").eq(0).clone(); // clone only first item
        $("#faculty_wrapper").append(clone); // append it to our form
   });

    $("#submit").on('click', function(e){
       e.preventDefault();
        alert($("#faculty_wrapper").serialize()); // get serialize data for further work
    })
})

您可以检查工作 Jsfiddle .

关于javascript - PHP、JQuery - 如何动态添加更多字段，包括下拉列表(来自数据库的值和一个文本框)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33349772/

25 4 0
文章推荐： php - PayPal IPN 在沙盒中返回无效
文章推荐： php - Symfony:FormType、Entity、queryBuilder - 如何更改生成选项的值？
文章推荐： php - Laravel 5.1 用户输入文本中的链接/可点击链接
文章推荐： php - Laravel Flysystem SFTP 连接
搜寻专家
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com