Question

我在页面中添加了联系表单。在同一页面中，我有一个脚本，根据下拉列表的值获取价格。现在，当我尝试提交联系人消息时，我与脚本的价格发生冲突。基本上它试图运行它，我不知道为什么。提交时的联系表单也无法正常工作...我只是用URL打开一个新页面..？message = blablabla 什么出了什么问题？

我正在使用Laravel 4.2，所以您看到的路线会重定向到我的php功能。这是JSfiddle，这里是php代码：

    public function postSendMessage() {
    echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>";
}

Answer 1

取消点击，以便表单不会提交

$("button#send").click( function(evt){
    evt.preventDefault();

新错误，表单有联系ID，而不是类

data: $('form.contact').serialize(),

需要

 data: $('form#contact').serialize(),

Answer 2

这就是我为同样的情况所做的事情

    //For your drpbox use this code
    $(document).on("change", "#yorDropBoxId", function(){        
        dropBoxValue=$("#yorDropBoxId").val();
        var request = $.ajax({//http://api.jquery.com/jQuery.ajax/
                        url: "samePagePHPcript.php",
                        type: "POST",
                        data: { 
                              ObjEvn:"dropBoxEvent",
                              dropBoxValue: dropBoxValue //You will use $myVar=$_POST["dropBoxValue"] to retrieve the information from javascript                              
                      },
                        dataType: "json"
             });
             request.done(function(dataset){
             //If you want to retrieve information from PHP sent by JSON.  
                for (var index in dataset){ 
                    JsResponse=dataset[index].phpResponse;
                }

                 if(JsResponse test someting){
                 "do dometing"
                 control the beheaivor of your HTML elements
                 }
             }); 
             request.fail(function(jqXHR, textStatus) {
                  alert( "Request failed: " + textStatus );
             });

    });



    //To submit your form use this code. You must use Prevent default if you are using a button or using a <a> link tag to trigger the evenrmrnt
    $(document).on("click", "#btn_sendForm", function(e){
        e.preventDefault();    
        var dt={ 
                ObjEvn:"FormEvent",
                input1:$("#txt_input1").val(), 
                input2: $("#txt_input2").val(), 
                input3: $("#txt_input3").val() 
            };
        var request = $.ajax({//http://api.jquery.com/jQuery.ajax/
                            url: "samePagePHPcript.php",
                            type: "POST",
                            data: dt,
                            dataType: "json"
                 });
            request.done(function(dataset){
                 //If you want to retrieve information from PHP send by JSON.  
                    for (var index in dataset){ 
                        JsResponse=dataset[index].phpResponse;
                    }

                     if(JsResponse test someting){
                     "do dometing"
                     control the beheaivor of your HTML elements
                     }
            }); 
            request.fail(function(jqXHR, textStatus) {
                      alert( "Request failed: " + textStatus );
            });
    });  



    //In the samePagePHPcript.php you can do this:You will return your information from PHP using json like this

    $event = $_POST["ObjEvn"];

    if(event==="FormEvent"){//Event to insert in your form
    $arrToJSON = array(
            "phpResponse"=>"data you want to send to javascript",
            "asYouWant"=>"<div class=\".class1\">more data</div>"    
            );  
    echo json_encode(array($arrToJSON));

    }
    elseif(event==="dropBoxEvent"){//Event to your dropbox - if you want
    $arrToJSON = array(
            "phpResponse"=>"data you want to send to javascript",
            "asYouWant"=>"<div class=\".class1\">more data</div>"    
            );  
    echo json_encode(array($arrToJSON));


    }

JQUERY / AJAX请求不通过和冲突

2 个答案: