CODEWITHSUNDEEP
phphtmlajax
Aero Chocolate
Aero Chocolate

Reputation: 1497

Displaying a confirmation message after doing a query with AJAX and PHP

I am trying to call a function with Javascript, HTML, AJAX, and PHP. I am still new to Javascript, AJAX, and PHP.

Background info: I am trying to add a new customer to my database but I am now trying to get a confirmation message on the same page without the page refreshing.

This is what I have:

<script type="text/javascript">

function addCustomer(ln,fn,pn,dob)
{
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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","addCustomer.php?add_LN="+ln+"?add_FN="+fn+"?add_PN="+pn+"?add_DOB="+dob,true);
xmlhttp.send();
}
</script>

<p>Suggestions: <span id="txtHint"></span></p>
            <form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">
                <input type="text" name="add_LN" id="add_LN" />
                <br />
                <br />
                <input type="text" name="add_FN" id="add_FN" />
                <br />
                <br />
                <input type="text" name="add_PN" id="add_PN" />
                <br />
                <br />
                <input type="text" name="add_DOB" id="add_DOB" />
                <br />
                <br />
                <input type="submit" name="add_Customer" id="add_Customer" value="Add Customer" />
            </form>
            <span id="txtHint"></span>
          </p>        </td>
        </tr>
      </table>
      </div>

I get a "This link appears broken" With: http://127.0.0.1/cpsc471/return%20addCustomer(this.add_LN,%20this.add_FN,%20this.add_PN,%20this.add_DOB);?add_LN=ee&add_FN=123&add_PN=eee&add_DOB=eee&add_Customer=Add+Customer in the url bar.

What am I doing wrong? :) I do not want the page to refresh. I am trying to just get the confirmation or non-confirmation to display.

Thanks again for all the help!

Upvotes: 1

Views: 708

Answers (2)

nanda kumar
nanda kumar

Reputation: 31

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) {

// put your codes here like

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

// document.getElementById("show_label").innerHTML='text as you wish like updated enjoy';

}

} And add a label with the id of show_label

Upvotes: 1

Nanne
Nanne

Reputation: 64409

Your problem is here:

 <form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">

You don't want the form action to be a javascript call, you need to do this onclick or something.

The arguments above by @thiefmaster and @martin are correct: using jquery is much simpler. You are right about the framework thing, but in this case you need to go and code for a lot of troubles (responses, when is there a successfull AJAX call, different browsers etc)

Upvotes: 1

Related Questions