how to make a form submit without reloading the page

Question

how to make a form submit without reloading the page i know that i have to use ajax but how can I do this?

html file:

<form name='myform' method="post" action="send.php">
                <span class="close-btn" id="close">&#10006;</span>
                <p>Введите свои контактные данные</p>
                <p>Мы Вам перезвоним</p>
                <input type="text" name="name" placeholder="Имя" maxlength="30">
                <p class="Error" id="Error">Это поле обязательное для заполнения</p>
                <p class="ErrorTwo" id="ErrorTwo">Некорректный ввод</p>
                <input type="tel" name="phone" placeholder="Телефон" maxlength="13">
                <p class="Error" id="telError">Это поле обязательное для заполнения</p>
                <p class="ErrorTwo" id="telErrorTwo">Некорректный ввод</p>
                <input type="submit" value="Отправить заявку"  name="save" id="save" disabled>
                <p>Данные не передаються третьим лицам</p>
            </form>

php:

<?php 
$ToEmail = 'myemail@gmail.com'; 
$EmailSubject = 'форма обратной связи'; 
$mailheader = "From: ".$_POST["email"]."\r\n";
$MESSAGE_BODY = "Имя: ".$_POST["name"].""; 
$MESSAGE_BODY .= "Телефон: ".$_POST["phone"].""; 
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure"); 
?>

js:

/-----------------------------validation----------------------------------------/

   //validation name
    document.myform.name.onchange= function() {
        var name = document.myform.name.value;
        if (name === "") {
            document.myform.name.removeAttribute("class", "ready");
            document.myform.name.style.border = "1px solid #da3637";
            document.getElementById("Error").style.display = "block";
            document.getElementById("ErrorTwo").style.display = "none";
        } else {
                document.myform.name.style.border = "1px solid #509d12";
                document.getElementById("Error").style.display = "none";
                var pattern = new RegExp("^[a-z]+$", "i");
                var isValid = this.value.search(pattern) >= 0;
                if (!(isValid)) {
                    document.myform.name.style.border = "1px solid #da3637";
                    document.getElementById("ErrorTwo").style.display = "block";
                    document.myform.name.removeAttribute("class", "ready");
                } else {
                    document.getElementById("ErrorTwo").style.display = "none";
                    document.myform.name.style.border = "1px solid #509d12";
                    document.myform.name.setAttribute("class", "ready");
                }
        }
    };


    //validation phone
    document.myform.phone.onchange = function() {
        var name = document.myform.phone.value;
        if (name === "") {
            document.myform.phone.removeAttribute("class", "ready");
            document.myform.phone.style.border = "1px solid #da3637";
            document.getElementById("telError").style.display = "block";
            document.getElementById("telErrorTwo").style.display = "none";
        } else {
                document.myform.phone.style.border = "1px solid #509d12";
                document.getElementById("telError").style.display = "none";
                var pattern = new RegExp("^\\d+$");
                var isValid = this.value.search(pattern) >= 0;

                if (!(isValid)) {
                    document.myform.phone.style.border = "1px solid #da3637";
                    document.getElementById("telErrorTwo").style.display = "block";
                } else {
                    document.getElementById("telErrorTwo").style.display = "none";
                    document.myform.phone.style.border = "1px solid #509d12";
                    document.myform.phone.setAttribute("class", "ready");
                }
            }
    };

    //filling the form
    document.myform.onchange = function() {
        var a = document.myform.name.getAttribute("class");
        var c = document.myform.phone.getAttribute("class");
        if (a === "ready" && c === "ready") {
            document.getElementById("save").removeAttribute("disabled");
            document.getElementById("save").style.cursor = "pointer";
            document.getElementById("save").style.opacity = "1";
        }
    };

refer to https://developer.mozilla.org/en/docs/AJAX – binariedMe Jul 31 '16 at 18:09 — binariedMe, Jul 31 '16 at 18:09

score 2 · Accepted Answer · answered Jul 31 '16 at 18:25

Use AJAX. I'd recommend enconding your form as JSON: In HTML:

<form name='myForm' onsubmit='event.preventDefault(); sendForm("myForm");'>...</form>

In Js:

   function sendForm(formName){
      var http = new XMLHttpRequest();
      http.open("POST","YourPage.php");
      http.send(JSON.encodeForm(document.forms[formName]));
      http.onreadystatechange = function(){
        if(http.readyState == 4 && http.status == 200){
           console.log(http.responseText); //PHP page's response handling
        }
      }
    }
    JSON.encodeForm = function(form){
      var array = {};
      for (key in form) {
        var item=form[key];
        if(form.hasOwnProperty(key) && item == "[object HTMLInputElement]"){
          array[item.name]=item.value;
        }
      }
      return JSON.stringify(array);
    }

Then, in your PHP page:

$input = json_decode(file_get_contents("php://input") , true);
echo "Saved";

score 0 · Answer 2 · answered Jul 31 '16 at 18:21

In my opinion better option is to validate data in the server-side file (some.php) and return response to client-side file.

php code will look like this:

$var = $_POST['some'];

if($var (bla bla bla))
    { echo 'ok.'; } else { echo 'Error'; }

response in your js file is echo message from your php file.

jsfiddle

EDIT (added input mask info):

if you need to validate your inputs in client-side file just use some input mask library (for example jquery input mask). This will be much easier way than creating own validation script.

how to make a form submit without reloading the page

2 Answers2