Question

我在这里有一个基本的PHP表单，在提交时发送电子邮件：

<div id="contact">
<form id="contact_form" action="<?=base_url()?>contact/email_form" method="post" name="contact">
    <h4>Questions? Comments?</h4>
    <p>
        <label>Name</label>
        <input name="name" id="name" type="text" class="text" />
    </p>
    <p>
        <label>Email</label>
        <input name="email" id="email" type="text" class="text" />
    </p>
    <p class="message">
        <label>Question</label>
        <textarea name="message" id="message" rows="5" cols="5"></textarea>
    </p>
    <p class="alt">

        <input value="Send Info" id="submitbutton" type="submit">
    </p>
</form>

此表单效果很好但我目前没有验证，所以即使字段为空白也提交表单。是不是可以用jquery进行验证？

表单提交后，它会发送到codeigniter中的控制器文件，该文件使用codeigniter中的电子邮件帮助程序来执行电子邮件逻辑。见这里：

if($this->email->send())
    {
        echo 'Message has been sent';
    }
    else
    {
        show_error($this->email->print_debugger());
    }

正如您所看到的，这会重定向到email_form视图并回显结果。是否可以只停留在具有表单的同一联系页面上，并将帖子的结果显示在那里，而不是重定向到<?=base_url()?>contact/email_form视图？我想将SUBMIT按钮的文本更改为“Message Sent”或类似的东西，然后清除表单字段。这样他们就会留在联系页面上。

jquery可以实现这一切吗？谢谢！

Answer 1

是的，一切皆有可能。

具体来说，你会做这样的事情：

$( '#submitbutton' ).click(function(){
    $.ajax(); //do ajax

    return false; //should override default form submission
});

您将寻找$.post()功能。但是，我喜欢尽可能多地控制，所以我使用$.ajax()函数。

它们都会处理URL和数据，因此这对您非常有用。

您可以在$.ajax()的“success：”参数或$.post()的成功回调中处理成功的返回（可能是需要处理的特定成功代码）。从该函数内部，您可以使用CSS selectors和jQuery函数（如.html()）更改DOM元素的内容（如示例中的按钮）。

以下是some tutorials开始使用jQuery！

请记住，仅仅验证电子邮件是不够的。您还需要检查其他可能性！
此外，请确保在POST 之后在服务器上进行验证 。可以关闭Javascript，然后（如果您在浏览器上进行验证），您的所有验证都会无来保护您的服务器或公众。

总之，您可以在jQuery中使用$.post()或$.ajax()将数据传递到服务器进行处理。

Answer 2

您应该始终进行服务器验证，因为用户可以禁用javascript。我会验证每个输入的允许值，以便您的应用程序是安全的，并且您不会变成垃圾邮件大炮。我会通过在表单中添加一个令牌来确保您的应用程序是创建表单的那个，因此可以继续发送电子邮件。请参阅以下相关帖子：

PHP Authenticity Tokens

Answer 3

今天早上基本上做了同样的事情：

$('#contact_form').submit(function() {
    // this is the client side check, it just checks if they are not empty
    if( $(this).find('#name').val() == '' ||  $(this).find('#email').val() == '' || $(this).find('#message').val() == '') {
        return false;
    }
    // post to the server
    $.post('<?=base_url()?>contact/email_form'), 
      {name:$(this).find('#name').val(),email:$(this).find('#email').val(),message:$(this).find('#message').val()},
      function(data) {
          // this checks the return value from the submit
          if (data == 'Message has been sent') {
               // do something
               $('#contact p.alt').html('Message Sent');
          } else {
               // the send email function returned something other than success
               alert('failed');
          }
      }
    return false;
}

验证PHP表单并更改提交按钮，而不是重定向到状态页面

3 个答案: