使用自动获取方法提交操作
Submit action using an automatic get method?
我正在开发一个wordpress插件,但在提交表单时遇到了一些麻烦。激活后,该插件基本上创建了一个带有三个字段的小联系表单,以便用户能够输入他们的姓名,电子邮件和电话号码,然后单击提交,然后验证代码并将其存储在数据库中。
奇怪的是,当单击"提交"按钮时,数据似乎是使用 get 方法发送的,因为它显示在 url 中。不过,我正在处理带有 javascript 文件中的 ajax 帖子的按钮单击。这是表单代码:
<div id="formwrapper" style="border:solid;border-color:red;">
<form name="contact" action="">
<label><strong>Contact Us</strong></label>
</br>
</br>
<input type="text" name="name" placeholder="Name & Surname">
<label class="error" for="name" id="nameErr">Please enter your name and surname</label>
</br>
</br>
<input type="email" name="email" placeholder="Email Address">
<label class="error" for="email" id="emailErr">Please enter a valid email address</label>
</br>
</br>
<input type="phone" name="phone" placeholder="Cell or Landline">
<label class="error" for="phone" id="phoneErr">Please enter your cell or landline number</label>
</br>
</br>
<input type="submit" class="button" name="submit" value="Submit" id="submit_button">
</form>
</div>
这是我用来处理按钮点击的javascript:
$(".button").click(function() {
$(".error").hide();
var name = $("input#name").val();
if (name == "") {
$("label#nameErr").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#emailErr").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phoneErr").show();
$("input#email").focus();
return false;
}
var datastring = 'name=' + name + '&email' + email + '&phone' + phone;
$.ajax({
type:"POST";,
url: "bin/process.php",
data: datastring,
success: function() {
$('#formwrapper').html("div id='message'></div>");
$('#message').html("<h2>Contact form submitted!</h2>")
.append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
alert "hello";
return false;
}
单击按钮不仅无法正确发布值,而且似乎激活了wordpress中的某种搜索功能,因为所有帖子都会消失并返回"对不起,没有符合您条件的帖子"消息。
你的 js 代码中有错误
alert "hello";
无效使用:
alert("hello");
因此,您的return false
不会被触发,表单会正常提交。
使用 event.preventDefault 而不是返回 false,以便更好地检测此类错误
$(".button").click(function(e){
e.preventDefault();
...
});
正如Joe Frambach指出的那样,ajax选项中存在另一个语法错误
type:"POST";,
应该是
type:"POST",
试试这个
$(".button").click(function() {
$(".error").hide();
var name = $("input#name").val();
if (name == "") {
$("label#nameErr").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#emailErr").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phoneErr").show();
$("input#email").focus();
return false;
}
var datastring = 'name=' + name + '&email' + email + '&phone' + phone;
$.ajax({
type:"GET";,
url: "bin/process.php",
data: datastring,
success: function() {
$('#formwrapper').html("div id='message'></div>");
$('#message').html("<h2>Contact form submitted!</h2>")
.append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
alert "hello";
return false;
}
相关文章:
- 调用DOM提交方法时未激发jQuery提交事件
- 使用jQuery的.on()方法阻止Ajax.BeginForm中提交的默认行为
- 使用GET方法通过AJAX成功提交表单后更改url
- JavaScript 表单操作更改RC方法发布文本输入提交
- 在输入类型提交按钮上调用 C# 方法
- 提交表单前使用确认对话框的正确方法
- 表单提交未到达控制器方法
- 无法重载 Ajax.BeginForm 的提交方法
- 使用ajax提交邮件表单的正确方法?-没有JQuery
- 通过 AJAX 方法提交更改选择字段的表单
- 将值作为get方法提交到页面
- 如何使用jquery$.post()方法提交表单值
- 表单之间不同.请使用方法提交
- 如何让表单字段动态相乘,然后通过post方法提交
- 通过jquery-Submit()方法提交的HTML
- 在按钮单击时使用doGet方法提交表单数据
- 为什么我不能用jQuery's .submit()方法提交表单?
- 使用submit()方法提交表单时回调
- 如何按照特定方法提交表格
- 使用自动获取方法提交操作