我正在创建一个表单,以便当用户单击“提交”按钮时,它将阻止默认操作,序列化字段的子集,然后继续通过POST数组(PHP)提交所有信息。
我在使用.submit()方法时遇到表单基本上不提交的问题。当我禁用我的JavaScript时,表单提交很好(只是使用了错误的信息,因为该数组未序列化)。但是,一旦我重新启用js,单击“提交”按钮除了在控制台中显示我的测试console.log(var)之外,什么都不会做。这是我的一些代码,希望您能看到我做错了什么。所有的在线文档都说要使用.submit(),但是无论我如何尝试,它似乎都不起作用。
HTML:
<form id="entryForm" action="add_entry.php" method="post">
<div class="leftDiv">
<input type="text" class="inputFormTitle" name="entryName" placeholder="Name your entry..." />
<span class="regText">
<b>Entry Properties</b>
Specify entry properties, permissions, etc.</span>
<table class="formTable">
<tr>
<th>Parameter</th>
<th>Value</th>
<tr>
<td>Group</td>
<td><select name="group"><option></option><option>Graham Test</option></select>
</tr>
<tr>
<td>Project</td>
<td><select name="project"><option></option><option>Project 1</option><option>Project 2</option></select>
</tr>
<tr>
<td>Protocol</td>
<td>
<select id="protocolloader" name="protocol">
<option></option>
<option>PCR & Gel</option>
<option>Item Storage</option>
<tr>
<td>Permissions</td>
<td><input type="radio" name="permission" value="0">Only I can access this entry</input>
<input type="radio" name="permission" value="1">Only group members can access this entry</input>
<input type="radio" name="permission" value="2">Everyone can access this entry</input>
</select>
</tr>
</table>
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /
<br/>
</div>
<div class="rightDiv">
<input type="text" class="inputFormTitle" id="ppt" placeholder="Please select a protocol" disabled/>
<div class="formHolder" id="protocolForm">
</div>
</div>
<input type="hidden" id="serialInput" name="protocolValues" value="nuttin" />
</form>
以及随附的javascript:
var entrySubmit = $('#submitEntry');
entrySubmit.on('click', initEntrySubmission);
function initEntrySubmission(e) {
e.preventDefault();
var serializedProtocol = $("#protocolForm :input").serialize();
console.log(serializedProtocol);
$('#serialInput').val(serializedProtocol);
$('#entryForm').submit();
}
PHP表单(我认为这不是问题,但我想无论如何我都会把它包括在内)
<?php // add_entry.php
session_start();
include_once 'creds.php';
$con=mysqli_connect("$db_hostname","$db_username","$db_password","$db_database");
if (isset($_POST['group'])){
$lab = $_SESSION['labname'];
$author = $_SESSION['username'];
$name = $_POST['entryName'];
$group = $_POST['group'];
$protocol = $_POST['protocol'];
$permission = $_POST['permission'];
$array = $_POST['serialInput'];
$filearray = $_POST['fileArray'];
$project = $_POST['project'];
$query = "INSERT INTO data (protocol, name, lab, author, uniquearray, filearray, group, project, permissionflag)
VALUES ('$protocol', '$name', '$lab', '$author', '$array', '$filearray', '$group', 'project', '$permission')";
mysqli_query($con, $query);
mysqli_close($con);
}
?>
我通常不会包含太多HTML,但是我想也许我在其中弄乱了可能是问题的东西,但我只是没有意识到。我试图取出大部分的break和header标签来清理代码。
谢谢你的帮助!
问候。
参考方案
我发现以下工作:
<script>
function initEntrySubmission() {
var serializedProtocol = $("#protocolForm :input").serialize();
alert(serializedProtocol);
$('#serialInput').val(serializedProtocol);
return true;
}
</script>
<form id="entryForm" action="" method="post" onSubmit="return initEntrySubmission();">
...
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" value="Submit Entry"/>
</form>
主要要做的是在表单标签中添加onSubmit。该函数必须返回true或false。返回true将提交表单。
另外,您确实需要清理HTML,其中有select语句,没有关闭标签和提交按钮。
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /
没有结尾的>
,它也有2个类型属性type="button"
和type="submit"
(既有按钮又有提交?),还有一个name=submit
,这也是不必要的。
这是我的HTML代码:<div style='display:none;' id='allformid'> <div> <form action='#'> <input type='text' name='name' …
如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript我想在JavaScript中使用模板变量:我的问题是在javascript代码中使用for循环,for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码: {% block extra_javascript %} <script src="/static/js…
打印二维阵列 - javascript我正在尝试打印子元素。在this example之后。怎么做?。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…
使用JS和PHP更改弹出窗口背景图像 - javascript我有一个JS函数:function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …
变更事件时道具无法正常工作 - javascript我有一些代码,当用户从下拉列表中选择一个项目时,这会触发一个change事件,然后调用php页面进行处理。首次加载页面时,我选择一个项目,并在触发change事件时,这应更改所选select输入的占位符并禁用相同的输入:“#box_ffrtv”。但是,发生的事情是更改仅在我在下拉菜单中进行了第二选择之后才发生,然后更改了占位符并禁用了输入。我对jquery还…