Question

我知道这个问题已经被问了很多，但对我来说似乎没有答案。我很抱歉，如果我真的很蠢，但我已经被困了一天了..

我想选择一个表格行（见下文），然后删除该用户。由于我希望有多种形式与表格互动，因此我无法将它们放在一个表格中。

＆＃13;

$("#clickMe").click(function () {
		$(".myForms").trigger('submit');
	});
	
	$('.myForms').submit(function () {
    console.log("SWAGGG");
    return false;
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="listForm" action="index.php?p=admin" method="POST">
  <?php

$userQuery = "SELECT * FROM usr2";
$row_userQuery = $dbportal->query($userQuery);
if(isset($row_userQuery) && !empty($row_userQuery))
{
//row[0] = ID
//row[1] = username(abbrevation)
//row[2] = admin? 0=normale user 1=admin
echo' <table id="myTable" class="table table-striped">
<tr><td></td><td>User ID</td><td>username</td><td>Role</td></tr>';
foreach ($row_userQuery as $row)
{
echo' <tr> 
<td id="tdSelect"> <input type="checkbox" name="selectedUser[]" value="'. $row[0] .'" />
<td>'. $row[0] .'</td>
<td>'. $row[1] .'</td>
<td>'. $row[2] .'</td>
</tr>';

}
echo'</table>';
}

?>
  <input type="hidden" name="action" value="listForm">
</form>

<form id="deleteForm" class="myForms" action="index.php?p=admin" method="POST">
					<div class="leftTextBox">
						<p>user ID:</p>
						<p class="margin">gebruikersnaam:</p>
					</div>
					<div class="rightTextBox">
						<input class="form-control" type="text" name="userID" placeholder="user ID">
						<input class="form-control" type="text" name="login" placeholder="gebruikersnaam" style="margin-top: 8px;">
					</div>
    				<input type="hidden" name="action" value="deleteForm">
					</form>
						<button id="clickMe" class="btn btn-default" style="margin-top:5px;float:right;">Delete user</button>

＆＃13;

我确信只是我监督某些事情，但是帮助会非常有用。另外，我安装了ajaxForm插件。

Answer 1

A＆＃39;提交＆＃39;根据定义，跳转到新的URL。您知道一次只能对一个表单执行此操作。

然而，我们正常谈论提交＆＃39;在这里，您不必使用正常的提交来从表单中获取信息并对其采取行动。

由于你正在使用JQuery，你可以使用它。看看ajax调用。例如：

http://api.jquery.com/jquery.post

查找名为的示例：使用ajax发布表单并将结果放入div ，您将在那里找到有用的代码。它向您展示了如何获取表单中字段的值。

Answer 2

让我们假设你有3个这样的形式：

<form id="form1" action="api/url1">
    <input name="field1" type="text" />
</form>
<form id="form2" action="api/url2">
    <input name="field2" type="text" />
</form>
<form id="form3" action="api/url3">
    <input name="field3" type="text" />
</form>

<button>Submit</button>

然后您可以像这样触发每个表单的提交：

$('button').on("click", function () {
    $('form').each(function (index, form) {
        $(form).submit();
    });
});

然后为防止表单完整回发，只需阻止提交事件的默认值，然后使用ajax发布序列化表单：

$('form').on("submit", function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: $(this).serialize(),
        success: function (data) {
            alert(data);
        },
        error: function (error) {
            console.error({ status: error.status, statusText: error.statusText })
        }
    });
});

JSFIDDLE

Answer 3

如果要使用ajax 您可以使用new FormData()

将所有输入的数据分组并发布

function fnSubmintAll(){
   var formData = new FormData();
    $("#form1,#form2,#form3").each(function(idx,item){
        var frmValue = $(item).serializeArray();
        $.each(frmValue, function (key, input) {
            formData.append(input.name,input.value);
        });
    })


    $.ajax({
        url: "/PostUrl",
        type: "POST",
        data: formData,
        contentType:false,
        processData: false, 
        success: function (result) { 
           alert("Success")
        },
        error: function () {
          alert("Error")
        }
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset> 
<legend>From 1</legend>
<form id="form1">
    <input name="field1" type="text" />
</form>
</fieldset>    
<fieldset> 
<legend>From 2</legend>
<form id="form2">
    <input name="field2" type="text" />
</form>
</fieldset>   
<fieldset> 
<legend>From 3</legend>
<form id="form3">
    <input name="field3" type="text" />
</form>
</fieldset>   
<br />
<br />
<br />
<button type="button" onclick="fnSubmintAll">Submit All</button>

使用一个按钮提交多个表单

3 个答案: