表单提交后生成动态选择框

时间:2013-01-23 15:26:24

标签: php jquery ajax

我正在建立一个上传表单,用户可以上传文档以及有关文档的详细信息,例如其名称等。我遇到的问题是当用户使用选择选择类别时我必须生成另一个选择然后,用户可以选择子类别。请参阅以下内容: -

 $(".department").change(function() {
    var url = "includes/get-categories.php"; // the script where you handle the form input.
    $.ajax({
       type: "POST",
       url: url,
       data: $("#upload-modal").serialize(), // serializes the form's elements.
       success: function(data){
            //this is where the select is generated
            $(".sub").html(data); // show response from the php script.
            //The alert works but the above line does not
            alert("yeahhhhhhhhhhhhhhh boi");
       }
     });

现在这样做的方式应该是当更改选择时,它会从get-categories中生成另一个选择,并为用户提供另一个选择框。但由于某些原因,当用户提交表单并在表单中显示错误列表(字段留空等)时,将不再通过选择类别生成选择框。我甚至用一个警报来测试代码,这个警报确实有效,所以我真的很困惑为什么以下行无法正常工作

$(".sub").html(data); 

这是我非常标准的表格

echo "<form enctype='multipart/form-data' action='".$_SERVER['PHP_SELF']."' method='POST' autocomplete='off' id='upload-modal'>"; 
echo '<fieldset>';
echo '<legend>Please fill in all the fields below:- </legend>';

echo '<label for="docname">Document name</label>';
echo '<input class="block" type="text" name="docname" id="docname" value="'.$_POST['docname'].'" />';

echo '<label for="version">Version (if left blank it will be entered as 1.0)</label>';
echo '<input class="block" type="text" name="version" id="version" value="'.$_POST['version'].'" />';

//We need to now give a drop down for the admin to select a department


    try {
        $conn = new PDO(DB_HOST,DB_USER,DB_PASS);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $stmt = $conn->prepare('SELECT X FROM Y WHERE Z = :id');
        $stmt->execute(array('id' => A));
        while($row = $stmt->fetch()) {

     // if the user is an admin we provide them with the admin link
            if($row['admin_level']=="super" ||     $row['admin_level']=="admin" && $row['department']=="Assurance" ){
                echo '<select id="department" class="block department" name="department">';
                echo '<option value="0">department...</option>';
                echo '<option value="policies">Policies</option>';
                echo '<option value="procedures">Procedures</option>';
                echo '</select>';                   
            } 

            echo '<p class="sub"></p>';
        }
    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }                   



echo '<label for="keywords">Enter keywords (seperate with ",")</label>';
echo '<textarea id="keywords block" name="keywords" rows="4" cols="50" value="'.$_POST['keywords'].'"></textarea> ';

echo '<label for="filename">Supported formats - .docx & .pdf</label>';
echo '<input type="file" name="filename" id="filename" title="Supported formats - .docx and .pdf" />';

echo '<input class="submit-ie6" type="submit" name="submit" value="Upload" id="upload-modal-submit" />';

echo '</fieldset>';
echo '</form>'; 

任何帮助最为明确

1 个答案:

答案 0 :(得分:0)

尝试使用像Firebug这样的工具,看看为什么在提交之后,这个:$(“。sub”)。html(data);不起作用。原因可能是因为在您提交表格(有错误)之后:

echo '<p class="sub"></p>';

不存在。

我建议如下:
得到你的

<p class="sub"></p>

从try {}开始,只需使用css,如:

<p class="sub" style="display:none;"></p>  

所以你需要做的就是当用户选择一个类别时,创建第二个选择框并删除显示:没有来自p:

$(".sub").html(data);  
$(".sub").show();