How to send data to php after validating information on a javascript file

312

I heard of Ajax/XMLhttprequest but im not quite sure if thats what I need to transfer the data from a javascript variable to php.

The webpage is basicly a contact us page, where customers enter they information plus email, javascript check whether input was enter and validates if email has a @. if everything is fine then customers will be able to submit the form and an email should be delivery to me.

I got two things working, 1 I can get the php file to send an email to me but then I would have to ignore the javascript validation. 2 I can get javacript validation working but then php file wont work as I cant transfer the data. I know javascript execute in the client side and php in the server side, which is why i think i need to validate information in the client side before sending information to server.

HTML

       <form id="uDF" method="post" onsubmit="submitValidation()">
            <input name="uDFName" type="text" id="fName" placeholder="Name"><br>
            <input name="uDFNumber" type="text" id="phone" placeholder="Mobile/Phone Line"><br>
            <input name="uDFEmail" type="text" id="email" placeholder="Email"><br>
            <input name="uDFSubject" type="text" id="subject" placeholder="Subject"><br>
            <textarea name="uDFMessage" placeholder="Message......"></textarea><br>
            <input type="submit" name="uDFButton" value="Submit" class="btnSubmit" id="test">
        </form>

Javascript

function submitValidation(){
var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value,
document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value,
document.forms ["uDF"] ["uDFMessage"].value,]

var char = ''; // variable used to check whether email has @
var x;
var isEmail = false;
var isNotEmpty = false;

//for loop checks email for @ char
for(x = 0; x<data[2].length;x++)
{
    char = data[2].charAt(x);
    if(char === "@"){
        isEmail = true;
        break;
    }
}

var i;

//for loop check if data is collected
for(i=0;i < 5;i++){
    if(data[i] === ""){
        isNotEmpty = false;
    }else{
        isNotEmpty = true;
    }
}
if(isEmail === true && isNotEmpty === true)
{
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP
}else if (!isNotEmpty){
    alert('Empty fields');
}else if(!isEmail){
    alert("Please enter valid email!");
}
}

PHP

<?php
$uDFName = $_POST['uDFName'];
$uDFNumber = $_POST['uDFNumber'];
$uDFEmail = $_POST['uDFEmail'];
$uDFSubject = $_POST['uDFSubject'];
$uDFMessage = $uDFName . "\r\n" . $uDFNumber . "\r\n" . "";

// In case any of our lines are larger than 70 characters, we should use 
wordwrap()
$message = wordwrap($message, 70, "\r\n");
mail($uDFEmail, $uDFSubject, $uDFMessage);

PHP works if I put it on the form as action=("mail.php) but then ofcourse no validation will be done.

927

Answer

Solution:

After your validation finished

You can try like this

It will work like this.

After validation it will call externalphp file. it will send your allinput type form data in thatphp file with this$('#yourform').serialize().

and you can get thatinput form data in yourphp file like this$name = $_POST['name'];

This will work same as the conventional phpGET andPOST but here concept is without page loading.

Hope you can understand Now.

function submitValidation(){ 

var data = [document.forms ["uDF"] ["uDFName"].value, document.forms ["uDF"] ["uDFNumber"].value, document.forms ["uDF"] ["uDFEmail"].value, document.forms ["uDF"] ["uDFSubject"].value, document.forms ["uDF"] ["uDFMessage"].value,];

var char = ''; // variable used to check whether email has @
var x;
var isEmail = false;
var isNotEmpty = false;

//for loop checks email for @ char
for(x = 0; x<data[2].length;x++)
{
    char = data[2].charAt(x);
    if(char === "@"){
        isEmail = true;
        break;
    }
}

var i;

//for loop check if data is collected
for(i=0;i < 5;i++){
    if(data[i] === ""){
        isNotEmpty = false;
    }else{
        isNotEmpty = true;
    }
}
if(isEmail === true && isNotEmpty === true)
{
    THIS IS WHERE I SHOULD TRANSFER THE DATA TO PHP
     /**** Your Ajax ****/
    $.ajax(
    {
       url: 'yourphpfile.php',
       type: 'post',
       data: $("#uDF").serialize(),
       success: function(response) {
         console.log(response);
       }
    });
   return false;


}else if (!isNotEmpty){
    alert('Empty fields');
    return false;
}else if(!isEmail){
    alert("Please enter valid email!");
    return false;
}



}
149

Answer

Solution:

Try this

if(isEmail === true && isNotEmpty === true)
{
 //Put below code here
}

ajax request to submit form

$.ajax({
  type:'post', //method may be get or post to send data
  url:'mail.php', //file name where you will recieve data to precess
  data:$('#uDF').serialize(), //serialize the form data
  success:function(){ //executes when mail.php file found
    //Your success message
  },
  error:function(){ //otherwise error
    //error message
  }
})

People are also looking for solutions to the problem: Pass PHP variable to html email

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.