javascript - JS中的表单元素分组

Question

我有jQuery Mobile/PHP/MySQL一个包含一长串类似表单的站点（具有不同的输入值但没有不同的元素 ID）。下面举两个例子。我可以让按钮提交表单，但由于它是一个非常长的列表，我不想在每次单击按钮时重新加载，我更愿意使用JS/AJAX调用来添加/删除数据库中的值。如果我为此使用 JS，有没有办法从发送到此表单中按钮调用的函数的特定表单中获取输入值？

<form>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <div data-role="fieldcontain">
                <input name="field1" placeholder="" value="value1" type="text">
            </div>
            <div data-role="fieldcontain">
                <input name="field2" placeholder="" value="value2"
                type="text">
            </div>
        </div>
        <div class="ui-block-b">
            <a data-role="button">
                Add
            </a>
            <a data-role="button">
                Delete
            </a>
        </div>
    </div>
</form>

<form>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <div data-role="fieldcontain">
                <input name="field1" placeholder="" value="value1" type="text">
            </div>
            <div data-role="fieldcontain">
                <input name="field2" placeholder="" value="value2"
                type="text">
            </div>
        </div>
        <div class="ui-block-b">
            <a data-role="button">
                Add
            </a>
            <a data-role="button">
                Delete
            </a>
        </div>
    </div>
</form>

Answer 1

身份证

ID在整个文档范围内必须是唯一的！
HTML4 DTD（http://www.w3.org/TR/html4/sgml/dtd.html）：

<!ENTITY % coreattrs  
 "id          ID             #IMPLIED  -- document-wide unique id --  
  class       CDATA          #IMPLIED  -- space-separated list of classes --  
  style       %StyleSheet;   #IMPLIED  -- associated style info --
  title       %Text;         #IMPLIED  -- advisory title --"
  >;

您正在寻找 jQuery.serializeArray ( http://api.jquery.com/serializeArray/ )

例子

$('input[type="button"]').click(function(
    var formData = $(this).closest('form').serializeArray();
    $.ajax({
        url: '...',
        method: 'POST',
        data: {
            form: formData
        }
    });
));

服务器端：

<?php
$formData = array();
if (!empty($_POST['form']) && is_array($_POST['form'])) {
    foreach ($_POST['form'] as $element) {
        if (empty($element['name']) || empty($element['value'])) {
            continue;
        }
        $formData[$element['name']] = $element['value'];
    }
    unset($_POST['form']);
}
var_dump($formData); // <-- See structured output

（未经测试）

文档

• http://www.w3.org/TR/html4/sgml/dtd.html
• http://api.jquery.com/serializeArray/
• http://api.jquery.com/closest/
• http://api.jquery.com/jQuery.ajax/
• http://www.php.net/manual/en/control-structures.foreach.php

Answer 2

这可能会有所帮助

JS

$("button").click(function(){
    var form = $(this).parents('form:first');
    form.find('input').each(
            ...//do rest of logic
});

笔记：

不建议对许多 html 元素使用相同的 id

Answer 3

创建隐藏输入以保存当前操作：

<input type='hidden' id='op' name='op' class='op' value=''/>

使用JS单击按钮时将单击事件保存到输入：

$('#addButton').unbind('click'); // prevent jqm binding twice
$('#addButton').click(function(){
    $('.op').val('add');
});
$('#deleteButton').unbind('click'); 
$('#deleteButton').click(function(){
    $('.op').val('del');
});>

进入$_POST['op']服务器端并发送您的事件：

switch($_REQUEST['op']){
    case 'add':{
    // do something
    }
    break;

    case 'del':{
    // do something
    }
    break;
}