Question

我是php，jquery和ajax的新手。我在jquery中有一个代码，可以在按钮单击时动态添加和删除文本框。我想将动态创建的文本框值的值发布到下一页，并在下一页中显示这些值。非常感谢任何帮助。谢谢。

我已粘贴以下代码..

    $(document).ready(function () {

            var counter = 1;

            $("#addButton").click(function () {

            if(counter>7){
                alert("Only 7 textboxes allow");
                return false;
                }   

        var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<label>Product #'+ counter + ' : </label>' +
      '<input type="text" size="22" name="product' + counter + 
      '" id="product' + counter + '" value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
          <label>Quantity #'+ counter + ' : </label>' +
      '<input type="text" size="1" name="qty' + counter + 
      '" id="qty' + counter + '" value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
          <label>Rate #'+ counter + ' : </label>' +
      '<input type="text" size="2" name="rates' + counter + 
      '" id="rates' + counter + '" value="" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\
          <label>Total #'+ counter + ' : </label>' +
      '<input type="text" size="3" name="total' + counter + 
      '" id="total' + counter + '" value="" > ');

        newTextBoxDiv.appendTo("#TextBoxesGroup");


        counter++;
        });

        $("#removeButton").click(function () {
        if(counter==0){
        alert("No more textbox to remove");
        return false;
        }   

        counter--;

        $("#TextBoxDiv" + counter).remove();

        });

Answer 1

您需要使用$ _POST超全局，并使用HTML元素的ID。

考虑一下：

<form action="foobar.php" method="post">
<input type="text" id="an_element" name="an_element" />
</form>

如果您想使用PHP显示它，您将转到action属性所指向的页面（在我们的示例中为foobar.php），并使用$ _POST超全局。

所以PHP代码看起来像这样：

<?php
echo $_POST['an_element'];
?>

因此，以rates文本框为例，您可能希望这样做：

<?php
echo $_POST['rates'];
?>

请注意如果您将action属性设置为get，则需要使用$_GET代替$_POST。

另外，只是看看你的代码，你就错过了HTML中的form元素。您可能希望使用此代码而不是$(document.createElement('div')) .attr("id", 'TextBoxDiv' + counter);：

$(document.createElement('form'))
.attr({
id: 'TextBoxDiv' + counter,
action: 'foobar.php',
method: 'post'
});

Answer 2

当您动态创建文本框时，我假设您的文本框名称是动态的，我在这里看不到。因此，将动态字段名称存储在数组中

$request = array(#field names#) // comma separated
$requestJson = json_encode($request);

通过

$requestJson as an hidden field in the form and submit the form.

在下一页中，即在操作页面中，接收隐藏字段并对其进行解码

$requestArr = json_decode($_REQUEST['requestFields']);

循环数组并以

的形式接收值

for($i=0; $i < count($requestArr); $i++)
{
        $value = $requestArr[$i]; // get the field name
        $content = $_REQUEST[$value]; // get the input value
            $fetchedResult = array($content); // Store the text field value 

}

Now your $fetchedResult will have the values to your future usage.

更新 - 根据评论的最新问题

var queryArr = [];

newTextBoxDiv.appendTo("#TextBoxesGroup"); // after this line add 
queryArr.push(product' + counter + '); // alert OR print in console to check the array values as and when the button is clicked.

$("#TextBoxDiv" + counter).remove(); //after this add
var removeItem = product' + counter + ' // #removed id#;
y = jQuery.grep(queryArr, function(value) {
  return value != removeItem;
});

$('<input>').attr({
    type: 'hidden',
    id: 'foo',
    name: 'bar',
    value : queryArr
}).appendTo('form');

如何将动态创建的文本框值发布到php中的下一页？

2 个答案: