Jquery/ Ajax Request Not Going Through And Conflicts

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 ha

Solution 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(),

Solution 2:

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


    }