Posting form data to mysql database with ajax and php

Question

My index.php:

<html>
<head>
</head>
<body>

<form name="form1" action="submit.php" method='POST'>
<select id="dropdown1" name="country" onchange="window.getStates()">
<option> Select Country</option>
<option value="1">Pakistan</option>
<option value="2">India</option>
<option value="3">USA</option>
<option value="4">UK</option>
</select>
<input type="text" id="area" style="display: none;" size="16" placeholder=" Enter value"></input>
<input type="submit" id="submit" style="display: none" name="submit" value="submit" onclick="submit()">
</form>
<script type="text/javascript">
function show() {
{ document.getElementById('area').style.display = 'inline-block';
  document.getElementById('submit').style.display = 'inline-block';}
}
function getStates()
{
var xmlhttp;
try{
    xmlhttp = new XMLHttpRequest;
}catch(e)
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp)
{
    var form = document['form1'];
    var country = form['country'].value;

    xmlhttp.open("GET","http://localhost/getStates.php?country="+country,true);
    xmlhttp.onreadystatechange = function()
    {
        if(this.readyState == 4)
        {
            var s = document.createElement("select");
            s.onchange=show;
            s.id="dropdown2";
            s.name="state";
            s.innerHTML = this.responseText;

            if(form['state'])
            {
                form.replaceChild(s, form['state']);
            }
            else
                form.insertBefore(s,form['submit']);
        }
    }
    xmlhttp.send(null);
}
}

function submit() {
    var table = document.getElementById("dropdown1").value;
    var parameter = document.getElementById("dropdown2").value;
    var value = document.getElementById("area").value;
    $.ajaxSetup({
           url: "http://localhost/database.php",
         type: "POST",
    });
     $.ajax({
        data: 'table='+table+'&parameter='+parameter+'&value='+value+,       
        success: function (msg) {
        alert (msg);},
        error: function (XMLHttpRequest, textStatus, errorThrown)
        {   
        alert('Error submitting request.'); 
        }

        }); 
}
</script>
</body>
</html>

my getStates.php code:

<?php

$states=array(
"1" => array("NWFP","Sindh","Bala","Punjab","Select"),
"2" => array("gujrat","goa","U.P.","Select"),
"3" => array("bgjs","hhtrs","Bhtrshts","Utah","Select"),
"4" => array("England","Scotland","Bahwgla","Punthwthjab","Select")
);

if(isset($_GET['country']))
{
$c = $_GET['country'];
if(isset($states[$c]))
{
    for($i = count($states[$c]) -1; $i>=0; $i--)
    {
        echo "<option value='".$states[$c][$i]."'>".$states[$c][$i]."</option>";
    }
}
}

?>

database.php code:

<?php
header('Content-type: text/html; charset=ISO-8859-1');
try
{
if(isset($_POST['table']) && isset($_POST['parameter']) && isset($_POST['value'])){
$table = ($_POST['table']);
$parameter = ($_POST['parameter']);
$value = ($_POST['value']);
$db = mysql_connect(localhost, root, "");
$select = mysql_select_db(records, $db);
$query="INSERT INTO $_POST['table'] (Parameter,Value)
       VALUES ('".$_POST['parameter']."','".$_POST['value']."');";
}
mysql_query($query,$connection);}
catch(Exception $e)
{
echo 'Erreur : '.$e->getMessage().'<br />';
echo 'N° : '.$e->getCode();
}
?>

Also, the submit button has a onclick() and an action tag. When the submit button is clicked, i want the submit() function to be executed, so what should i do for that? When i press submit, the parameter and value values are not being inputted into my database called records with 4 tables named 1,2,3 and 4. Thanks!

I think there is some probllem with this line:

$query="INSERT INTO $_POST['table'] (Parameter,Value)
       VALUES ('".$_POST['parameter']."','".$_POST['value']."');";

**Danger**: You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Jul 22 '15 at 08:40
It is not fine. You're teaching yourself bad habits. You're assuming that local code will never be turned into public facing code (a frequently wrong assumption). You're asking for help debugging code that uses functions people don't use any more. You're using functions that are simply harder to debug than the modern versions. — Quentin, Jul 22 '15 at 08:56

score 0 · Answer 1 · edited Jul 22 '15 at 12:03

0

You have commented out submit() and Maybe that's the problem...

The form submission overtakes the onclick call.

You should check this out: http://www.codediesel.com/javascript/prevent-form-submissions-with-javascript-disabled/

<script>
$(function(){
  $("form").submit(function(e) {       
    e.preventDefault();
  });
});
</script>

edited Jul 22 '15 at 12:03

Ram Sharma

8,676
7
43
56

answered Jul 22 '15 at 08:40

bni i

103
7

Oh sorry. I forgot to edit it. Check now. Its still not working – RaviTej310 Jul 22 '15 at 08:42

Posting form data to mysql database with ajax and php

1 Answers1