SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using Ajax to check for duplicates... onsubmit problem

    I'm trying to create a script that checks for duplicates after you hit the submit button. If it finds duplicates, it cancels the submission and displays the duplicates on the page. If there are no duplicates, it submits the form.

    I can get all the PHP side of things to work but not the canceling of the submission or tracking whether the PHP file has returned any data. Here is my code:

    HTML Code:
    <form onsubmit="return CheckLeadDuplicates();" ....
    Code:
    var AJAXForms = false;
    var LastField = null;
    var isIE = false;
    // on !IE we only have to initialize it once
    if (window.XMLHttpRequest) {
    AJAXForms = new XMLHttpRequest();
    }
    
    function CheckLeadDuplicates() {
    
    if (window.XMLHttpRequest) {
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
    AJAXForms = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    AJAXForms.onreadystatechange = processChange;
    AJAXForms.open("GET", "modules/leads/ajax-duplicates.php?op=ajax&company=" +document.lead.company.value);
    AJAXForms.send(null);
    }
    
    function processChange() {
        if (AJAXForms.readyState == 4) {   
    
         var res = document.getElementById("duplicatescheck");
    
            if (AJAXForms.responseText) {
                res.innerHTML = AJAXForms.responseText;
                res.style.visibility = "visible";
                return false;
            } else {
                return true;
            }
    
        } 
    }

  2. #2
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    XMLHttpRequest runs asynchronous, so by the time processChange() gets called, the form has already been submitted.

    How about changing your design a bit, so that you submit the data (through XMLHttpRequest, and check the status-code and on ground of that either displays an error, or reload the page)

  3. #3
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great idea! I'll give it a shot and see how I go!

  4. #4
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One quick question. Is it possible to post using ajax instead of having:

    Code:
    AJAXForms.open("GET", "modules/leads/ajax-duplicates.php?op=ajax&company=" +document.lead.company.value+&name='+document.lead.name.value+....etc ....etc);
    I have quite a few text fields and also a textarea... What do you suggest?

  5. #5
    SitePoint Evangelist Mr. Tech's Avatar
    Join Date
    Feb 2003
    Location
    Australia
    Posts
    562
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another Q. As you can see, I'm quite new with AJAX... Sorry for being such a newbie.

    How do I check whether or not something was returned from the AJAX post... Here are two examples I tried:

    Code:
    function processChange() {
        if (AJAXForms.readyState == 4) {    
        if (AJAXForms.responseText) {    window.location.href='index.php?module=leads&action=manage&record=add&msg=added';
        } else {
        var res = document.getElementById("duplicatescheck");
        res.innerHTML = AJAXForms.responseText;
        res.style.visibility = "visible";
        }
        }
    }
    Code:
    function processChange() {
        if (AJAXForms.readyState == 4) {    
        var res = document.getElementById("duplicatescheck");
        res.innerHTML = AJAXForms.responseText;
        res.style.visibility = "visible";
        } else {    window.location.href='index.php?module=leads&action=manage&record=add&msg=added';
        }
    }

  6. #6
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mr. Tech View Post
    One quick question. Is it possible to post using ajax instead of having:

    Code:
    AJAXForms.open("GET", "modules/leads/ajax-duplicates.php?op=ajax&company=" +document.lead.company.value+&name='+document.lead.name.value+....etc ....etc);
    I have quite a few text fields and also a textarea... What do you suggest?
    Yes. The first argument to open() is the http-method. You can put POST in there, instead of GET. In the subsequent send() call, you will then send the content of the request.
    Whilst you can do this manually, I suggest that you use a library, which provides a nicer API than the native one provided by the browser. Personally, I prefer mochikit, although prototype is very popular as well.
    In mochikit, you could write your POST-request like this:
    Code:
    var request = doXHR(
      "modules/leads/ajax-duplicates.php",
      {
        "method": "POST",
        "headers": {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        "sendContent": queryString({
          "op": "ajax",
          "company": document.lead.company.value,
          "name": document.lead.name.value
        })
      }
    );
    request.addCallback(function(transport) {
      // the request went well
      // transport.responseText contains the response-body
    });
    request.addErrback(function(transport) {
      // the request failed
      // transport is an error. transport.message contains the error-message
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •