Question

我有一个简单的联系表单，我使用php和jquery创建。问题是当我点击图像时，我使用它作为提交按钮，它不会将值发布到我的php文件。

我提出了一些警告框来检查点击事件是否有效。它有效，但价值观不发布。

jquery的

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Start jQuery code -->
<script type="text/javascript">
$(document).ready(function() {
    $("#submitbtn").click(function() {
       alert('clicked');
        var proceed = true;
        //simple validation at client's end


        if(proceed) 
        {
            alert('proceeded');

            post_data = {
                'fname': $('input[name=fname]').val(),
                'lname': $('input[name=lname]').val(),
                'email': $('input[name=email]').val()
            };

            //post data to server
            $.post('posts.php', post_data, function(response){  
            alert('posted');

                if(response.type == 'error'){ //load json data from server and output message    
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';
                    //reset values in all input fields
                    $("#contact_form  input[required=true], #contact_form textarea[required=true]").val('');
                    $("#contact_form #contact_body").slideUp(); //hide form after success
                }
                $("#contact_form #contact_results").hide().html(output).slideDown();
            }, 'json');
        }
    });

});
</script>

html表单

<div id="contact_form">
   <div id="contact_results"></div>

    <div class="form-title-box">Enter Your <br />
    Shipping Information</div>
    <div class="form-inside-box">First Name: <br />
        <input name="fname" type="text" class="input-box" id="fname" />
      Last Name:<br />
      <input name="lname" type="text" class="input-box" id="lname" />

      Email:<br />
      <input name="email" type="text" class="input-box" id="email"/>
    </div>
    <div class="form-botton-box"><a href="#" id="submitbtn" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/send-hover-botton.jpg',1)"><img src="images/send-normal-botton.jpg" alt="SEND MY FREE TRIAL" name="Image3" width="244" height="71" border="0" style="margin-top:13px;" /></a></div>
  </div>
</div>

我在我的firebug控制台中看不到任何错误。谁能告诉我，我在这里做错了什么？

Answer 1

您有拼写错误，但也没有取消点击事件 - 这将执行href。

取而代之的是

 $("#submitbtn").click(function(e) {
   e.preventDefault();

我会亲自将字段包装在表单标签中并使用

发布

$.post($("#formID").attr("action"), $("#formID").serialize(),function(e) {
   e.preventDefault();

和一个真实的提交按钮。这样就可以关闭JS并节省一些拼写错误。

Answer 2

第一件引起我注意的事情是使用jquery选择器错误而没有引号。

 'fname': $('input[name=fname]').val(),

应该是

 'fname': $('input[name="fname"]').val(),

在名称

的输入选择器中添加引号

<强>更新您在姓氏和电子邮件字段的声明中也有错误和拼写错误

   <input<br /> name="lname" type="text" class="input-box" id="lname" />

它的名称为lname，但您使用lmail选择它，我不确定<br/>标记在该元素中的作用。

  <input name="email" type="text" class="input-box" id="email"/>

输入电子邮件，您尝试将其选为textarea？

jquery表单不会在点击时将值发布到php

2 个答案: