douhao1956 2015-10-21 06:58
浏览 78
已采纳

如何使用jquery或ajax单击提交表单

In my code i have a form

 <form id="form_enquiry" name="enquiry-form">
        <ul>
            <li>
                <label>Name</label>
                <input name="name" type="text" id="name" class="required"/>
            </li>
            <li>
                <label>Email</label>
                <input name="email" type="text" id="email" class="required"/>
            </li>
            <li>
                <label>Telephone</label>
                <input name="telephone" type="text" id="telephone" class="required"/>
            </li>
            <li>
                <label>Message</label>
                <textarea rows="4" name="message" id="message" class="required"></textarea>
            </li>
             <li>
                <label>How did you hear about us?</label>
                <div class="select-arrow">
                <select name="select_option" id="select_option" class="required">
                    <option value="" selected="selected">— — —</option>
                    <option value="I am a repeat customer">I am a repeat customer</option>
                    <option value="You where recommended to me">You where recommended to me</option>
                    <option value="Google Search">Google Search</option>
                    <option value="Travelzoo">Travelzoo</option>
                    <option value="Newspaper article">Newspaper article</option>
                    <option value="Facebook">Facebook</option>
                </select>
                </div>
            </li>
             <li>
                <button type="submit" id="enquiry_submit">Send</button>
            </li>
          </ul>
        </form>

this form i am submitting using jquery code

$("#form_enquiry").submit(function (e) {
        e.preventDefault(); // this will prevent from submitting the form.
          //alert('check');
            $("#form_enquiry").validate({
             submitHandler: function(form) {

                var name1 = $('#name').val();
                var email1 = $('#email').val();
                var telephone1 = $('#telephone').val();
                var message1 = $('#message').val();
                var select_option1 = $('#select_option').val();
                var site_url = <?= $_SERVER['REQUEST_URI'] ?>;
                    if(name1 && email1 && telephone1 && message1 && select_option1) 
                    {
                        $.ajax({
                            type: 'post',
                            url: '<?= base_url()?>'+'frontend/form_enquiry',
                            data: 'name='+name1+'&email='+email1+'&telephone='+telephone1+'&message='+message1+'&select_option='+select_option1+'&site_url='+site_url
                            //success: function(data) { $('#login_err').html('Success ...'); }
                        });
                    }
                }

            });
        });

its working fine but in need to click the send button twice.. i want submit the form with a single click whats wrong in code help me...

  • 写回答

2条回答 默认 最新

  • douliang1891 2015-10-21 07:02
    关注

    You don't have to bind submit event manually if you are using jQuery validate, because it does it for you. Just use this alone:

    $("#form_enquiry").validate({
        submitHandler: function (form) {
    
            var name1 = $('#name').val();
            var email1 = $('#email').val();
            var telephone1 = $('#telephone').val();
            var message1 = $('#message').val();
            var select_option1 = $('#select_option').val();
            var site_url = <?= $_SERVER['REQUEST_URI'] ?> ;
            if (name1 && email1 && telephone1 && message1 && select_option1) {
                $.ajax({
                    type: 'post',
                    url: '<?= base_url()?>' + 'frontend/form_enquiry',
                    data: 'name=' + name1 + '&email=' + email1 + '&telephone=' + telephone1 + '&message=' + message1 + '&select_option=' + select_option1 + '&site_url=' + site_url
                    //success: function(data) { $('#login_err').html('Success ...'); }
                });
            }
        }
    
    });
    

    Demo: http://jsfiddle.net/54hcvcbk/

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题