JS中的表单元素分组答案

【问题标题】：Group form elements in JSJS中的表单元素分组
【发布时间】：2013-08-15 07:45:43
【问题描述】：

我有jQueryMobile/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>

【问题讨论】：

第一件事：您在同一个文档中有多个具有相同 ID 的元素？重新考虑这一点并让这些 ID 具有唯一性可能是个好主意。
谢谢，删除了 ID。我认为它们不是必需的。

标签： javascript jquery jquery-mobile

【解决方案1】：

ID

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

（未经测试）

文档

【讨论】：

【解决方案2】：

这可能会有所帮助

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

注意：

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

【讨论】：

【解决方案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;
}

【讨论】：