JQUERY/ AJAX Request not going through and conflicts

Question

I have included a contact form in my page. In the same page I have a script that gets prices depending on the value of a dropdown. Now when I try to submit the contact message I have a conflict with the script for prices. Basically it tries to run it and I have no clue why. Also the contact form when submitted never works...I just get a new page to open with URL..?message=blablabla Any idea what is going wrong?

I am working on Laravel 4.2 and so the route you see redirects to my php function. Here is the JSfiddle and here is the php code:

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

well you do not cancel the form submission. – epascarello Oct 10 '14 at 12:20 — epascarello, Oct 10 '14 at 12:20

epascarello · Answer 1 · 2014-10-10T12:32:36.360

1

Cancel the click so the form will not submit

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

New error, form has an id of contact, not a class

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

needs to be

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

edited Oct 10 '14 at 12:32

answered Oct 10 '14 at 12:21

epascarello

204,599
20
195
236

If i'm right buttons don't submit... Only inputs with a submit type – Andreas Furster Oct 10 '14 at 12:23
@epascarello , not sure to understand what you mean? The form must be submitted on click. The conflict is with the script that pulls a price called retrievePrice. Thanks – commandantp Oct 10 '14 at 12:25
Your making an Ajax call onclick so why would you need to submit the form? Try adding the code. – epascarello Oct 10 '14 at 12:26
@AndreasFurster `` It is a submit button. – epascarello Oct 10 '14 at 12:30
oh....I get what you mean now. So i could just remove the submit type of the button ? Also now I get this error but names are correct :0 Uncaught SyntaxError: Unexpected identifier for data: $('form.contact').serialize(), – commandantp Oct 10 '14 at 12:31
Well you have no form with a class contact. – epascarello Oct 10 '14 at 12:31
Yes I did, it solves that issue and also there was a typo. However now I have not solved the root problem since I still get the server 500 error. :( – commandantp Oct 10 '14 at 13:07

score 0 · Answer 2 · answered Oct 10 '14 at 12:53

This is what I do for the same situation

    //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));


    }

What is the first dropbox function for exactly? Why is the script so long now? — commandantp, Oct 10 '14 at 13:05
I use this script in a multi-language site. You have a 2 functions. One for the drop box another to the button send form. You can simplify it and merg at one. My site are very dynamic. So my dropbox can send message to serever retrieve information and do someting. Form as the same idea. I have no conflicts with this kind of technic. Even when I call the same php page to analyse which event was trigged — IgorAlves, Oct 10 '14 at 14:34

JQUERY/ AJAX Request not going through and conflicts

2 Answers2

Linked