如何在父頁面的POST中添加ajax表單字段？

Question

致歉，但我已經無限次地搜索並搜索了該站點的廣告，卻找不到答案-很可能我問錯了問題，但是可以。

我有一個頁面，當選擇框的值更改時，它會進行ajax調用。 基本上，它在數據庫中搜索與所選內容相對應的值，然后生成帶有說明的一系列單選按鈕。 我正在使用它來按用戶類型設置一些用戶首選項，而我想發生的是這些字段位於父頁面的較大表單中，並在提交父表單時發布到數據庫中。

但是，我無法解決如何使表單的ajax部分生成的字段。 它們只是拉入一個（否則為隱藏的）div，該div為空，直到由ajax填充。 我有一種感覺，也許我應該對父表單中的偽字段進行某些操作，但是我不知道該怎么做。 基本上，我如何使由單獨頁面生成的那些字段成為調用它的頁面內表單的一部分？

謝謝你，抱歉，我確定這是基本的東西，但是讓我發瘋了...

詹姆士

抱歉，這是要求的代碼摘錄...

<!--Start Ajax for pulling permission options through-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){              
        // when any option from aspects list is selected
        jQuery("select[name='group']").change(function(){           

            var optionValue = jQuery("select[name='group']").val(); //passes proposed user group as selected from combobox  
            var userType =    "<?php echo $usertype ?>";  //passes current user's user group


            jQuery.ajax({
                type: "GET",
                url: "viaajax/pullpermissions.php",
                data: "usergroup="+optionValue+"&usertype="+userType,
                beforeSend: function(){ jQuery("#ajaxLoader").show(); jQuery("#PermissionsAjax").hide();},
                complete: function(){ jQuery("#ajaxLoader").hide(); },
                success: function(response){
                    jQuery("#PermissionsAjax").html(response);
                    jQuery("#PermissionsAjax").show();

                }
            });          
        });
    });
</script>

上級表格：

<form action="approval.php" form id="formID" method="post">
    <fieldset>
        <table>
        <tr><td valign="top"><input type="text" class="validate[required, custom[email]] text-input"  name="email1" id="email1" placeholder="Email address (required)" size="25" maxlength="50" value="<?php echo $recordemail;?>" disabled/></td><td width=6></td></tr>

        <tr height="8"></tr>

        <tr><td valign="top"><input type="text" class="validate[required] text-input" data-errormessage-value-missing="You must enter a first name" type="text" name="firstname" id="firstname"  placeholder="First name (required)" size="25" maxlength="50" value="<?php echo $first_name;?>" /></td><td width=6></td><td valign="top"><input type="text" class="validate[required] text-input" data-errormessage-value-missing="You must enter a last name" name="lastname" placeholder="Last name (required)" size="25" maxlength="50" value="<?php echo $last_name;?>" /></td></tr>

        <tr height="8"></tr>

        <tr><td><input type="text" name="address1" placeholder="House number and street" size="25" maxlength="50"  value="<?php echo $address1;?>"/></td></tr>  

        <tr height="1"></tr>

        <tr><td><input type="text" name="address2" placeholder="Town" size="25" maxlength="50"  value="<?php echo $address2;?>"/></td></tr>

        <tr height="1"></tr>

        <tr><td><input type="text" name="address3" placeholder="County" size="25" maxlength="50" value="<?php echo $address3;?>" /></td></tr>

        <tr height="1"></tr>

        <tr><td><input type="text" name="userpostcode" id="userpostcode" class="validate[required] text-input" data-errormessage-value-missing="You must enter a postcode"  placeholder="Postcode (required)" size="25" maxlength="50" value="<?php echo $postcode;?>" /></td></tr>

        <tr height="8"></tr>

        <tr><td><input type="numeric" name="phone" placeholder="Mobile number" size="25" maxlength="50"  value="<?php echo $phone;?>"/></td></tr>

        </table>

<div id="thirdcolumnR">
<div id="subwindowtitlebar">User group and permissions</div>
<div id ="subcontent">



        <?php if ($usertype<99) { //This requires that approving user has sysadmin rights 99 in order to grant sysdamin rights and then also restricts users to being able to grant access at or below their own level only

        $query="SELECT SYSTEM_USER_GROUPS.Key, SYSTEM_USER_GROUPS.group_name FROM SYSTEM_USER_GROUPS WHERE SYSTEM_USER_GROUPS.Key<=$usertype ORDER BY SYSTEM_USER_GROUPS.Key";  

        } else {

        $query="SELECT SYSTEM_USER_GROUPS.Key, SYSTEM_USER_GROUPS.group_name FROM SYSTEM_USER_GROUPS WHERE SYSTEM_USER_GROUPS.Key ORDER BY SYSTEM_USER_GROUPS.Key"; 

        }

$result=mysql_query($query); 

echo "<SELECT id=\"group\" name=\"group\" data-size=\"6\"><OPTION value=\"\">Select a user group...</option>";

while ($row=mysql_fetch_array($result, MYSQL_NUM)) { 

if ($row[0] == $user_type) {  

    echo "<OPTION value=$row[0] selected>$row[1]</option>"; 

} else { 

    echo "<OPTION value=$row[0] >$row[1]</option>";}

}

echo "</SELECT>"; ?>


<?php  
        echo "<div id=\"ajaxLoader\" style=\"display:none\"><img src=\"images/ajax-loader.gif\" alt=\"loading...\" align=\"center\"></div>";
        echo "<div id=\"PermissionsAjax\" style=\"display:none\">";



        echo "</div>"; //closes PermissionsAjax

?>





</div><!--closes subcontent-->    

<br />
<input type="submit" name="submit" class="greenbutton" value="Confirm" />
<input type="hidden" name="submitted" value="TRUE" />
<?php // Store the required hidden values.
echo '<input type="hidden" name="activate" value="' . $id . '" />';
?>  

通過ajax調用的表單：

<?php
$usergroup = $_GET['usergroup']; //selected group for approval
$usertype = $_GET['usertype'];  //actual group of approver logged in


if(!$usergroup) {
    return false;
}


require_once ('../mysql_connect.php'); 

if ($usertype<99) { //This requires that only sysadmin can see and assign permissions over the 'minimum permission' level specified

            $querypermissions="SELECT SYSTEM_SECURITY_PERMISSION_LEVELS.key, SYSTEM_SECURITY_PERMISSION_LEVELS.permission, SYSTEM_SECURITY_PERMISSION_LEVELS.minimum_user_group FROM SYSTEM_SECURITY_PERMISSION_LEVELS WHERE $usergroup>=SYSTEM_SECURITY_PERMISSION_LEVELS.minimum_user_group ORDER BY SYSTEM_SECURITY_PERMISSION_LEVELS.sort_order";   

            $issysadmin="";

            } else {

            echo "<br /><br /><div id=\"boxit\"><table><tr><td valign=\"top\"><img src=\"images/exclam.png\"></td><td width=\"10px\"></td><td valign=\"top\">You have System Administrator rights and can assign any user group or privilege.</td></tr></table></div><br />";

            $querypermissions="SELECT SYSTEM_SECURITY_PERMISSION_LEVELS.key, SYSTEM_SECURITY_PERMISSION_LEVELS.permission, SYSTEM_SECURITY_PERMISSION_LEVELS.minimum_user_group FROM SYSTEM_SECURITY_PERMISSION_LEVELS ORDER BY SYSTEM_SECURITY_PERMISSION_LEVELS.sort_order"; 

            $issysadmin="<br /><br /><br /><div id=\"boxit\"><table><tr><td valign=\"top\"><img src=\"images/exclam.png\"></td><td width=\"10px\"></td><td valign=\"top\"><b><font color=\"red\">Permissions shown in red aren't usually available to this user group.  Proceed with caution if granting an Administrator's exception.</font></b></td></tr></table></div>";

            }
            $resultpermissions=mysql_query($querypermissions); 


                echo "<table><tr height=\"20px\"></tr>";
                while ($row=mysql_fetch_array($resultpermissions, MYSQL_NUM)) { 



                        if ($row[2] <= $usergroup) {
                    echo "<tr><td width=\"80px\" align=\"left\"><div class=\"switch-toggle switch-candy switch-candy-blue\">
    <input id=\"1radio$row[0]\" name=\"permission$row[0]\" type=\"radio\" value=\"1\">
    <label for=\"1radio$row[0]\" onclick=\"\">On</label>

    <input id=\"2radio$row[0]\" name=\"permission$row[0]\" type=\"radio\" value=\"0\" checked>
    <label for=\"2radio$row[0]\" onclick=\"\">Off</label><a></a></div>
</td><td width=\"20\"></td><td>";
                    echo "<font color=\"black\">permission".$row[0]."&nbsp;".$row[1]."</font>";
                echo "</td></tr><tr height=\"10px\"></tr>";

                    } else { 

                echo "<tr><td width=\"80px\" align=\"left\"><div class=\"switch-toggle switch-candy switch-candy-blue\">
    <input id=\"1radio$row[0]\" name=\"permission$row[0]\" type=\"radio\" value=\"1\">
    <label for=\"1radio$row[0]\" onclick=\"\">On</label>

    <input id=\"2radio$row[0]\" name=\"permission$row[0]\" type=\"radio\" value=\"0\" checked>
    <label for=\"2radio$row[0]\" onclick=\"\">Off</label><a></a></div>
</td><td width=\"20\"></td><td>";
                    echo "<font color=\"red\">permission".$row[0]."&nbsp;".$row[1]."</font>";
                echo "</td></tr><tr height=\"10px\"></tr>";


                }

            }

            echo "</table>"; //closes PermissionsAjax
            echo $issysadmin;



?>

Answer 1

好吧，基本上，您可以只構造表單字段並將其附加到表單。 如果表單尚不存在，則可以根據需要將表單本身附加到隨機div上。 實際上，這沒什么好想的：）當您“動態”添加表單字段並發布表單時，表單字段將被發布，就像它們在加載頁面時就已經存在一樣。

要將表單字段添加到表單，只需執行以下操作（警告：jQuery前面！）

$('<input/>')
    .attr('type', 'text')
    .attr('name', 'my-generated-form-field')
    .appendTo('form');

查看此處的小提琴示例。 表單字段是在不使用ajax的情況下創建的，但是數據所基於的來源（例如，字段名稱）並不重要。 希望這可以幫助。

Answer 2

我個人只是在ajax中制作整個html，然后將其回顯到js文件中：

AJAX：

$s = '';
$s .= 'your form html stuff here';

echo $s;

JS：

$('#dummy_div').html(data);

但是，您必須使用此解決方案將虛擬div放置到template / html文件中的某個位置。