通过JQuery提交表单

时间:2014-04-23 19:40:05

标签: javascript php jquery

刚才意识到我错了:(我有一堆输入字段,我想使用JQuery .post()或equivelant提交,所以我不会离开页面。我有一个数据库驱动使用foreach $ row创建一行多个输入的表单,输出如下所示:

<tr class="even"><td width=200>Settings</td><input type="hidden" id="Settings[0]"  value="1"><td><input type="textbox" id="Settings[1]" size="75" value="settings.php"></td><td><select id="Settings[2]"><option value="0" selected>No Parent</option><option value="1">Settings</option><option value="2">Grid Demo</option><option value="3">TEST</option><option value="4">Grid Options</option><option value="5">setGridOptions</option><option value="6">Menu Items</option><option value="7">Ajax Menu</option></select></td><td><input type="textbox" id="Settings[3]" size="5" value="0"></td><td><input type="hidden" id="Settings[4]" value="INACTIVE"> <input type="checkbox" id="Settings[4]" value="ACTIVE"></td></tr>
<tr class="odd"><td width=200>Grid Demo</td><input type="hidden" id="Grid_Demo[0]"  value="2"><td><input type="textbox" id="Grid_Demo[1]" size="75" value="grid.php"></td><td><select id="Grid_Demo[2]"><option value="0" selected>No Parent</option><option value="1">Settings</option><option value="2">Grid Demo</option><option value="3">TEST</option><option value="4">Grid Options</option><option value="5">setGridOptions</option><option value="6">Menu Items</option><option value="7">Ajax Menu</option></select></td><td><input type="textbox" id="Grid_Demo[3]" size="5" value="100"></td><td><input type="hidden" id="Grid_Demo[4]" value="INACTIVE"> <input type="checkbox" id="Grid_Demo[4]" value="ACTIVE"></td></tr>
<tr class="even"><td width=200>TEST</td><input type="hidden" id="TEST[0]"  value="3"><td><input type="textbox" id="TEST[1]" size="75" value="test.php"></td><td><select id="TEST[2]"><option value="1">Settings</option><option value="2">Grid Demo</option><option value="3">TEST</option><option value="4">Grid Options</option><option value="5" selected>setGridOptions</option><option value="6">Menu Items</option><option value="7">Ajax Menu</option></select></td><td><input type="textbox" id="TEST[3]" size="5" value="0"></td><td><input type="hidden" id="TEST[4]" value="INACTIVE"> <input type="checkbox" id="TEST[4]" value="ACTIVE"></td></tr>

我一直在用php工作,将数据拉入数组并通过json_encode运行,让它准备好发送到.post(),当我意识到它只会继续保存页面时的任何内容加载,而不是编辑后的当前状态。

现在我比我开始这个项目时更老,更聪明,我意识到这不起作用,我需要使用.val(),但不知道我应该如何设置它,因为我不知道会有多少行,或者名称是什么,我如何保持所有相关内容以免事情发生混乱?

PHP方面在处理之前就是这样。

<?
include 'db.php';


$i=0;
    foreach($db->query('SELECT * from navmenu') as $row) {
    $rowarray[$row[0]] = array();
    echo ($i % 2)?'<tr class="odd">':'<tr class="even">';

        print_r("<td width=200>" . $row[2] . "</td>");
        print_r("<input type=\"hidden\" id=\""); 
        $row[2] = str_replace(' ', '_', $row[2]);
        print_r("". $row[2] . "[0]\"  value=\"" . $row[0] . "\">");
        print_r("<td><input type=\"textbox\" id=\"" . $row[2] . "[1]\" size=\"75\" value=\"" . $row[3] . "\"></td>");
        //parent selection
        print_r("<td><select id=\"" . $row[2] . "[2]\">");

        if($row[1] == "0"){
            print_r("<option value=\"0\" selected>No Parent</option>");
        }

    foreach($db->query('SELECT * from navmenu') as $option) {
        print_r("<option value=\"" . $option[0] . "\"");
        if($row[1] == $option[0]){
            print_r(" selected");
        }
        print_r(">" . $option[2] ."</option>");
        }
        // end foreach
        print_r("</select></td>");
        print_r("<td><input type=\"textbox\" id=\"" . $row[2] . "[3]\" size=\"5\" value=\"" . $row[4] . "\"></td>");
        // setup status whether active or not
        print_r("<td><input type=\"hidden\" id=\"" . $row[2] . "[4]\" value=\"INACTIVE\"> "); //set value so it never passes NULL
            if ($row[3] == "ACTIVE"){
            print_r("<input type=\"checkbox\" id=\"" . $row[2] . "[4]\" value=\"ACTIVE\" checked=\"true\"></td></tr>");
            }
            else{
            print_r("<input type=\"checkbox\" id=\"" . $row[2] . "[4]\" value=\"ACTIVE\"></td></tr>");

            }
    print_r("\n");
    $rowarray[$row[0]]= array("id" => "$row[0]", "parentid" => "$row[1]", "name" => "$row[2]", "url" => "$row[3]", "sortorder" => "$row[4]", "status" => "$row[5]", "tooltip" => "$row[6]"); 
    $i++; //increment by one

    }

?>

这就是我试图用于JQuery的内容:

 <script>
    $(document).ready(function () {
        $("a[id^=formsubmit]").click(function ( event ) {
            $.post( "functions.php?do=adminmenu", $( "#saveForm" ).serialize() );
            }
            ,function (data) {
                $( ".contentarea2" ).html( data );
            },"html");
        });
</script>

1 个答案:

答案 0 :(得分:1)

如果我正确理解您的问题,您就会在不事先知道该表单数据的情况下询问如何发送所有表单数据?像这样:

$("#form").submit(function(e) {
    e.preventDefault();

    // abort any pending request
    if (request) {
        request.abort();
    }

    var $form = $(this);
    var $inputs = $form.find("input, select, button, textarea");
    var postData = $form.serialize();
    // note: we disable elements AFTER the form data has been serialized
    $inputs.prop("disabled", true);
    request = $.ajax({
        url: "submit.php",
        type: "POST",
        data: postData
    })
    .done(function(response, textStatus, jqXHR) {
        // do something
    })
    .fail(function(jqHXR, textStatus, errorThrown) {
        console.error('Error: ' + textStatus, errorThrown);
    });
});

就在PHP端处理它而言,您应该将可能具有可变数量值的字段命名为数组(使用括号),例如:

<input type="text" name="ids[]" />

然后你可以遍历它并进行相应的处理。