Send data to php file with javascript on submit

Question

so basically, when someone clicks the submit input, I want to retrieve values from various inputs and spans using javascript, then send it to php using $post to then send it by email. I have already tried to delete all the javascript code (except the preventdefault and the click function) and replacing it by a alert, and when I click submit, the alert does execute as it should. But now i'm trying to figure out how to make retrieve all this data and send it by email.

I have a live example here, if you want to see what i'm trying to do.

Thanks

<script type="text/javascript">
                                $("#submit").click(function (e) {
                                e.preventDefault();

                                var PrimaryParentName;
                                var SecondaryParentName;
                                var PrimaryEmail;
                                var SecondaryEmail;
                                var PrimaryPhone;
                                var SecondaryPhone;
                                var Address;
                                var ChildName;
                                var ChildBirth;
                                var ChildAllergies;
                                var ChildSchool;
                                var ChildLevel;
                                var UniformSize;
                                var PreferedPositions;

                                PrimaryParentName = document.getElementById("first_parent_name")
                                    .value;
                                if (document.getElementById("second_parent_name").value ==
                                    null || document.getElementById("second_parent_name")
                                    .value == "") {
                                    SecondaryParentName = 'N/A';
                                } else {
                                    SecondaryParentName = document.getElementById(
                                        "second_parent_name").value;
                                }

                                SecondaryEmail = document.getElementById("first_email")
                                    .value;
                                if (document.getElementById("second_email").value ==
                                    null || document.getElementById("second_email")
                                    .value == "") {
                                    SecondaryEmail = 'N/A';
                                } else {
                                    SecondaryEmail = document.getElementById(
                                        "second_email").value;
                                }

                                PrimaryPhone = document.getElementById("first_phone")
                                    .value;
                                if (document.getElementById("second_phone").value ==
                                    null || document.getElementById("second_phone")
                                    .value == "") {
                                    SecondaryPhone = 'N/A';
                                } else {
                                    SecondaryPhone = document.getElementById(
                                        "second_phone").value;
                                }

                                Address = document.getElementById("address")
                                    .value;

                                ChildName = document.getElementById("child_name")
                                    .value;

                                ChildBirth = document.getElementById("child_date")
                                    .value;

                                ChildAllergies = document.getElementById("child_allergies")
                                    .value;

                                ChildSchool = document.getElementById("school")
                                    .value;

                                ChildLevel = document.getElementById("uniform_size")
                                    .value;

                                UniformSize = document.getElementById("leveldescription")
                                    .innerHTML;

                                PreferedPositions = document.getElementById("Goalie")
                                    .value;

                                alert(PreferedPositions + UniformSize + ChildLevel);


                                $.post('registration.php', {
                                    PostPrimaryParentName: PrimaryParentName,
                                    PostSecondaryParentName: SecondaryParentName,
                                    PostPrimaryEmail: PrimaryEmail,
                                    PostSecondaryEmail: SecondaryEmail,
                                    PostPrimaryPhone: PrimaryPhone,
                                    PostSecondaryPhone: SecondaryPhone,
                                    PostAddress: Address,
                                    PostChildName: ChildName,
                                    PostChildBirth: ChildBirth,
                                    PostChildAllergies: ChildAllergies,
                                    PostChildSchool: ChildSchool,
                                    PostChildLevel: ChildLevel,
                                    PostUniformSize: UniformSize,
                                    PostPreferedPositions: PreferedPositions


                                }, function () {});
                                });
                            </script>

<?php
        $PrimaryParentName=$_POST['PostPrimaryParentName'];
        $SecondaryParentName=$_POST['PostSecondaryParentName'];
        $PrimaryEmail=$_POST['PostPrimaryEmail'];
        $SecondaryEmail=$_POST['PostSecondaryEmail'];
        $PrimaryPhone=$_POST['PostPrimaryPhone'];
        $SecondaryPhone=$_POST['PostSecondaryPhone'];
        $Address=$_POST['PostAddress'];
        $ChildName=$_POST['PostChildName'];
        $ChildBirth=$_POST['PostChildBirth'];
        $ChildAllergies=$_POST['PostChildAllergies'];
        $ChildSchool=$_POST['PostChildSchool'];
        $ChildLevel=$_POST['PostChildLevel'];
        $UniformSize=$_POST['PostUniformSize'];
        $PreferedPositions=$_POST['PostPreferedPositions'];

        $to='email@gmail.com';
        $subject= 'Nouvelle inscription pour le CSEO';
        $message="<span style='font-size: 26px'><b>Contact information</b></span>"."Primary parent's name: ".$PrimaryParentName."\n"."Primary parent's email: ".$PrimaryEmail."\n"."Primary parent's phone number: ".$PrimaryPhone."\n\n"."Secondary parent's name: ".$SecondaryParentName."\n"."Secondary parent's email: ".$SecondaryEmail."\n"."Secondary parent's phone number: ".$SecondaryPhone."\n\n"."Address: ".$Address."\n <hr> \n"."<span style='font-size: 26px'><b>Child's information</b></span>"."\n"."Child name: ".$ChildName."\n"."Child's date of birth: ".$ChildBirth."\n"."Allergies: ".$ChildAllergies."\n"."Child's school: ".$ChildSchool."\n"."Child's level of experience: ".$ChildLevel."\n"."Prefered positions: ".$PreferedPositions."\n"."Uniform size: ".$UniformSize;

        mail($to, $subject, $message);
?>

Why not making it simple.... by placing all inputs in a FORM and then post the values by using $(form).serialize....?? https://api.jquery.com/serialize/ — MJ Khan, Apr 09 '19 at 04:00
Possible duplicate of [In javascript how to send data to php file using post method](https://stackoverflow.com/questions/44105471/in-javascript-how-to-send-data-to-php-file-using-post-method) — Anandhukrishna VR, Apr 09 '19 at 04:04
[Duplicate](https://stackoverflow.com/questions/44105471/in-javascript-how-to-send-data-to-php-file-using-post-method) use ajax js submit — Anandhukrishna VR, Apr 09 '19 at 04:05
There's just a single jQuery statement in the code (`$("#submit").click(...`) Is that on purpose (or would replacing this with pure javascript make a difference)? — Cat, Apr 09 '19 at 05:09
@Khan Because some of the options aren't inputs including some dropdowns for example. You can see here theres more to it: http://hyun.x10host.com/soccer/Register.html — TahaInc, Apr 10 '19 at 00:44

score 0 · Accepted Answer · answered Apr 10 '19 at 01:26

Alright I solved it, the problem was with the if in before the $post.

if (document.getElementById("second_phone").value == null || document.getElementById("second_phone") .value == "") { SecondaryPhone = 'N/A'; } else { SecondaryPhone = document.getElementById( "second_phone").value; }

I don't know what the exact issue was but it works without it and i'm fine without them.

Send data to php file with javascript on submit

1 Answers1