Question

i wana send elements of a form to DB (with php ajax but no jquery)

so I found these tutorial from w3schools.com

http://www.w3schools.com/php/php_ajax_database.asp

the tutorial send a value of one element...(without submit button) but Now I wana send value of all elemnts by clicking submit button:

<form>
 <input name="name1" type="text">
 <input name="name1" type="text">
 <input  type="submit" value>
</from>

how can send valuse of name1 and name2 to "getuser.php"?

tnx

Was it helpful?

Solution

use this Script

<script type="text/javascript">
        function loadXMLDoc() {
            var xmlhttp;
            var val=document.getElementById('name1').value;

            var val1=document.getElementById('name2').value;
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("display").innerHTML = xmlhttp.responseText;
                    console.log(xmlhttp.responseText);

                }
            }

            xmlhttp.open("GET", "getuser?value="+val+"&value2="+val1, true);
            xmlhttp.send(null);
        }


    </script>

In your html

 <form>
     <input id="name1" type="text">
     <input id="name2" type="text">
    <input type="button" value="submit" onclick='loadXMLDoc()'/>
    </from>

<div id="display">
//to show the response
</div>

OTHER TIPS

What you can do is call a javascript function when you submit the form

<form id="tt" onsubmit="return sendValues('getuser.php', this.id);">
    ...

The following function should send those values (encoded) to getuser.php

function sendValues(destination, formID) {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4) {
            if (xmlhttp.status === 200) {
                // Successful call to the back-end
            }
            else {
                // There was a server error
            }
        }
    };

    var form = document.getElementById(formID);
    if (form !== null) {
        var args = '';
        var elements = form.elements;
        for (var i = 0, c = elements.length; i < c; i++) {
            if (i !== 0) {
                args += "&";
            }
            args += encodeURIComponent(elements[i].name) + "=" + encodeURIComponent(elements[i].value);
        }


        xmlhttp.open("POST", destination, true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(args);
    }
    else {
        console.log("Error: This form ID does not exist.");
    }
    return false;
}

To send input values to another page without Ajax, you can use the 'action' attribute in your form element.

<form method="post" action="getuser.php">
    ...
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top