Form Submit with Fade Out Message using Jquery Ajax PHP

[zervas]

I am not used to building code with AJAX . So, I need your valuable help . I have the following code . The problem is when a user fills out all the fields of my form and clicks the button reservation , php shows the message 'your reservation has been completed successfully' , but my JS Code doesn't work . It only works when a user clicks the button submit but without completing the fields of my form . Does anyone have any idea of what is happening or anything that I could try ? thank you all of you for your time and effort .

I will post the url of my live web site. http://portfoliozervas.heliohost.org/kalnterimi/en/contactus.php

$(document).ready(function(){



    $('#reservation').click(function(){


        var fname = $('#firstname').val();
        var lname = $('#lastname').val();
        var total_number_people = $('#total-number-people').val();
        var visit_date = $('#visit-date').val();
        var visit_hour = $('#visit-hour').val();
        var telephone_number = $('#telephone-number').val();
        var email = $('#email').val();


        if(fname=='' || lname=='' || total_number_people=='' || visit_date=='' || visit_hour=='' || telephone_number==''|| email=='')
         {
             $('#error_message').html("<h1>You must fill out all the fields of the form</h1>");    
             }
        else
          {
              $('#error_message').html('');
              $.ajax({
                  url:"contactus.php",
                  method:"POST",
                  data:{fname:fname,lname:lname,total_number_people:total_number_people,visit_date:visit_date,visit_hour:visit_hour,telephone_number:telephone_number,email:email},
                  success:function(data){
                          $("#myform").trigger("reset");
                          $('#success_message').fadeIn().html(data);
                          setTimeOut(function(){
                              $('#success_message').fadeOut('slow');
                              },4000);
                      }
                  });
              }    

        });



    });

[something else]

This line might be missing the empty input values:
if(fname=='' || lname=='' || total_number_people=='' || visit_date=='' || visit_hour=='' || telephone_number==''|| email=='')

So you may need to use null instead:
if(fname==null || lname==null || total_number_people==null || visit_date==null || visit_hour==null|| telephone_number==null || email==null)


Other than that I am guessing there is a problem in the codes that you have not shown. (Html codes + contactus.php )

[zervas]

I tried your suggestion but without success . php code is absolutely right , because when I click on button reservation , php sends an email to my email (about reservation details). So, it works. I think the problem is on file .JS(javascript). That's why I posted all the code of JS . About html , you can view html code by using CTRL+U to see the source code of the file contactus.php

[something else]

Sorry I didn't read you post correctly - I didn't see the url.

Anyway by the looks of things you have a built in function spelt incorrectly...
It should be:
setTimeout

not:
setTimeOut

[zervas]

No it didn't work again

[something else]

Can you fix it on the live version as I don't want to have to download all the files to see what is going on.

This is your error messages:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.wh jquery.min.js:4

Uncaught ReferenceError: setTimeOut is not defined at Object.success contactform_en.js:37

GET http://portfoliozervas.heliohost.org...5c00_1x100.png 404 (Not Found) jquery.min.js:4
GET http://portfoliozervas.heliohost.org...ound/click.mp3 sound/click.mp3:1

2nd from top is the setTimeOut function not being defined (due to incorrect spelling)

next 2 are missing files - nothing really important.

and the top one is probably because you need to remove the type="submit" on your reservation button, although the enter button could submit the form, so maybe something like this would be better:

$("reservation").submit(function(e){
        e.preventDefault();    
}); 

[zervas]

I added async: true in $.ajax() and now it prints out the whole site in green color and then fades out after 4 seconds . Why does it print out the whole site instead of 'the reservasion has been completed successfully'?

in case you have some time check out contactform.php to see it

[zervas]

Is this what you told me to do ?
why do I have to write

$('reservation')

? It is id selector. So I think I have to write #reservation. I followed your suggestion but without success . Check it out to see if I made the changes successfully and I also removed the type=submit from <button>

$(document).ready(function(){



$('reservation').submit(function(e){

e.preventDefault();
var fname = $('#firstname').val();
var lname = $('#lastname').val();
var total_number_people = $('#total-number-people').val();
var visit_date = $('#visit-date').val();
var visit_hour = $('#visit-hour').val();
var telephone_number = $('#telephone-number').val();
var email = $('#email').val();


if(fname=='' || lname=='' || total_number_people=='' || visit_date=='' || visit_hour=='' || telephone_number==''|| email=='')
{
$('#error_message').html("<h1>Please fill out all the fields</h1>");




}
else
{
$('#error_message').html('');
$.ajax({
url:"contactus.php",
method:"POST",
data:{fname:fname,lname:lname,total_number_people: total_number_people,visit_date:visit_date,visit_ho ur:visit_hour,telephone_number:telephone_number,em ail:email},
success:function(data){
$("#myform").trigger("reset");
$('#success_message').fadeIn().html(data);
setTimeout(function(){
$('#success_message').fadeOut('slow');
},4000);
}
});
}

});



});

[zervas]

I solved the problem. The problem was in my .php file

I just had to remove the code

if(isset($_POST['mybtn'])){}

could you explain me why didn't work with if isset $_POST['mybtn']? thank you. I am not good at php

if(isset($_POST['mybtn'])){
if(mail($to,$subject,implode("<br/>",$message),implode("\r\n",$headers)))
{
    echo "Your reservation has been completed successfully";
    }
else
 {echo "something went wrong";}    
}

[something else]

if(isset($_POST['mybtn'])){
this line is php alone would work if you hit your submit button as it would post the name of it (mybtn) to the next page providing your submit buttons name is mybtn


$_POST['mybtn'] collects the data that is posted/sent

The reason it didn't work with jquery/ajax was because you did not post it in this line:

data:{fname:fname,lname:lname,total_number_people: total_number_people,visit_date:visit_date,visit_ho ur:visit_hour,telephone_number:telephone_number,em ail:email},
so it would have been:

data:{fname:fname,lname:lname,total_number_people: total_number_people,visit_date:visit_date,visit_ho ur:visit_hour,telephone_number:telephone_number,em ail:email,mybtn:mybtn},

also I just noticed that you have a space in that line:
em ail:email






on the:

$("reservation").submit(function(e){
        e.preventDefault();    
}); 

you had it in the correct place but had missed the closing of the functions: });

[zervas]

Thank you for your reply . I am very happy that I overcame this problem , because I've been searching for a solution for a couple of days or more .

I have some questions that I would like you to guide me .

about $.ajax(data:{fname:fname}), the first fname is variable and the second fname is the value of the variable ? If am not mistaken the second fname has taken a value from var fname=$('#first-name').val(). About the first piece of fname, Can I give anything name I like ? for example data{variable1:fname}

In .html I named the firstname input as fname (input type=text name="fname"). If the name of the firstname was 'name' (for example) then data would be data{name:fname} ??

And now I have another more general question about ajax mechanism. I have .html , .js and .php files . The .js file sends request to .php and then the data to .php . After that, the .php processes the request of .js and then sends the result to .html and then DOM is updated without refresh? Could you explain me the whole process that takes place between .html, .js and . php file ? (for my case) thank you again for your time , effort and your patience

[something else]

yes data{name:fname} is correct.

I'm not sure I can explain the process better than you have wrote it above.

Ajax basically makes your DOM visit a page like your browser does but without seeing it and collects the text that is wrote on that page.

In this case:
success:function(data){ data is the variable that contains the text that was wrote on your php page.

[zervas]

I see.

So the first piece of data is the name of the variable and it depends on what name has in .html file. for example, if in.html file an input text has a name of visitPlaces . In .js file should be {data:visitPlaces:value-Of-visit-Places} . first piece is the name(variable name visitPlaces) and second piece refers to the value of the variable(value-Of-Visit-Places contains the value of the variable visitPlaces). if am wrong , please correct me , because I am trying to learn .

So $.ajax() function sends a request to .php . php made a process and returns the data back to ajax and then ajax prints out the data

. I am new to ajax and Jquery. So I am trying to get used to it .

[something else]

Yes you have got it correct