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

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

<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;
}

Answer 2

的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

（未测试的）

文档

Answer 3

这可能会有所帮助

JS

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

注意：

不推荐对许多html元素使用相同的ID

JS中的组表单元素

3 个答案:

的ID

实施例

文档