javascript - ajax 生成的表单，通过 javascript 函数通过 php 插入值——当我通过 id 检查元素时，元素不存在？

Question

我想在使用 ajax 查询获取表单 HTML 后，通过 jquery 预填充在模态视图中显示的表单字段。我通过 document.getElementById 调用预填充字段，以设置 javascript 函数中的值，并使用 php 代码生成的 javascript 函数中的值。

问题是，即使 AJAX 调用的回调函数导入了表单代码，我想要填充值的字段似乎也不存在。当我检查函数中是否存在元素以设置这些元素的值时，我看到返回 null，因此元素不存在。这是怎么回事？

我可以看到在html源代码中，php已经放入了正确的表单值。但是，我没有看到显示的textarea值/innerHTML。相反，文本区域是空白的。文本区域有什么棘手的地方吗？

感谢您的任何建议。

这是 Jquery/javascript:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>


<script>
 $(function() {
     var dialog, form,
         dialog = $( "#dialog-form2" ).dialog({
             autoOpen: false,
             height: 550,
             width: 400,
             modal: true,   
         });

     $( "#create-user2" ).button().on( "click", function() {
         showform();
         dialog.dialog( "open" );
     });
 });
</script>

<div id="dialog-form2" style="background-color: white; border: 4px solid #f1f1f1; padding: 20px;" >

</div>

<div id="dialog-form2" style="background-color: white; border: 4px solid #f1f1f1; padding: 20px;" ></div>

<script>
 function showform()
 {
     var xmlhttp;
     if (window.XMLHttpRequest) {
         xmlhttp=new XMLHttpRequest();
     } else {
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     xmlhttp.onreadystatechange=function() {
         if (xmlhttp.readyState==4 && xmlhttp.status==200) {
             document.getElementById("dialog-form2").innerHTML=xmlhttp.responseText;
             updateform();
         }
     }

     xmlhttp.open("GET", "newinstructions.html");
     xmlhttp.send();  
 }


 function updateform()
 {
     document.getElementById('f1').value = '<?php echo $included;?>';
     document.getElementById('f2').value = '<?php echo $id_bus;?>';
     document.getElementById('f3').value = '<?php echo $deals_id;?>';
     document.getElementById('f4').value =  '<?php echo $_SESSION['token'];?>';
     document.getElementById('details').innerHTML = '<?php echo $instructions1;?>';
     document.getElementById('details').value = '<?php echo $instructions1;?>';

 }

 </script>

表格如下:

<form method = "post" action = "changeinstructions.php">
    <textarea rows = "8" cols = "60" name = "details" id = "details" ></textarea>   
    <input type = "hidden" name = "included" '/>
    <input type = "hidden" name = "id" />
    <input type = "hidden" name = "deals_id"/>
    <input type = "hidden" name = "token" />
    <br>
    <input type="submit" tabindex="-1" >
</form>

最后，我将其作为 include_once('jquery.php') 包含在 php 文件中，并且我已经验证所有 php 变量都存在，并且在此包含语句之前具有值。以下是 javscript 函数设置值的 html 源代码的样子:

 function updateform()
 {
     document.getElementById('f1').value = '1';
     document.getElementById('f2').value = '59';
     document.getElementById('f3').value = '226';
     document.getElementById('f4').value =  '7a7dd52df381577c7b8e2518aa9b2808';   
     document.getElementById('details').innerHTML = ' dumb instructions';
     document.getElementById('details').value = ' dumb instructions';

 }

因此函数 updateform() 具有正确的值，并且仅应在创建表单本身后调用此函数。然而，提交表单后，表单上没有出现任何值，POST 数组中也没有出现任何值。是什么赋予了？感谢您的任何建议。

Answer 1

您想将插入的值填充到新的弹出模式或对话框中吗？请详细解释您正在尝试做什么，

如果 iam 正确，您不需要重新包含 jquery 代码，您可以在回调函数中执行此操作

////编辑您可以使用.val()设置或获取文本区域//编辑您在 ajax 中使用 get ，而您的表单使用 POST

如果你使用$_GET，我会受伤的或$_POST在你的 php 中，这很令人困惑//

解决方案如下:

// 您需要选择文本区域而不是仅通过其 id， 您需要首先选择顶级父级，然后是第二个顶层父代例子 : 如果你打开控制台，你会发现它是这样的(在弹出窗口出现后) <div id="popup top div"><div id="another parent"><form><textarea id="details"> ,你需要做的就是类似的事情 var target_textarea =$("#topid #secoundtopid #details")然后使用 target_textarea.val();