javascript - 在 PHP 代码中使用 JavaScript 访问动态创建元素的值

Question

我用 JavaScript 动态创建了一些文本框。 这是 JavaScript 代码:

$(document).on('click','#AddHaContactNumberButton',function(e){
e.preventDefault();
var outerDiv = document.getElementById("HaContactDiv");
var textboxDiv = document.createElement('div');
textboxDiv.className = 'inputs';
var input = document.createElement('input'); 
input.type = "text"; 
input.setAttribute('name','numbersshowbox[number]');
textboxDiv.appendChild(input);
numberinfoDiv.appendChild(textboxDiv);
outerDiv.appendChild(numberinfoDiv);
});

现在，我想在单击提交按钮时在 php 代码中访问这些文本框值，然后将其保存到数据库。 这是html代码:

 <FORM ID="AddFORM" NAME="AddFORM" ACTION="./admin.php" METHOD=POST><br>
    <div class="clear">
    <INPUT CLASS="button" TYPE=SUBMIT NAME="AddHaContactNumberButton" VALUE="Add" ID="AddHaContactNumberButton">
    </div> 
    <div class="left-text-align relative-position">
    <INPUT CLASS="button" TYPE=SUBMIT NAME="AddHaContactButton" VALUE="Save" ID="AddHaContactButton">
    </div>
    </FORM>

我的PHP代码:

if ($AddHaContactButton == "Save") {
    $test = $_REQUEST['numbersshowbox[number]'];
}

问题是 $test 为空。我搜索并发现由于javascript是客户端而php是服务器端，除非我使用ajax请求，否则我无法获取php中的值。所以我写了ajax请求如下:

$(document).on('click','#AddHaContactButton',function(e){
e.preventDefault();
currentForm = document.getElementById("AddFORM");
var numberarray= currentForm.elements['numbersshowbox[number]'];
if (numberarray != null) {
    var arry = [];
    for (var i = 0; i < typearray.length; i++) {
        arry.push([typearray[i].value, numberarray[i].value]);
    $.ajax({
        url: 'savePhoneNumbersInDatabase.php',
        type: 'GET',
        data: { numbersArray: arry},
        success: function(data){
             currentForm.submit();
        }
    });
}
});

现在它工作正常，但问题是我想在回发时将数据保存在数据库中。我的意思是我希望点击提交按钮后刷新页面。

Answer 1

如果您的目标是在点击事件和 $.ajax() 调用后刷新页面，请将以下内容添加到 ajax 选项中成功回调的末尾:

location.reload();

除了简单地回答您的问题之外，我相信最好的做法是将 ajax 调用附加到表单的提交事件，而不是按钮的单击事件。除非有令人信服的理由你还没有这样做。类似于:

$('#AddFORM').submit(<submit handler>)