www.webdeveloper.com
Results 1 to 2 of 2

Thread: Simple AJAX Problem

  1. #1
    Join Date
    Jan 2010
    Posts
    6

    Question Simple AJAX Problem

    I am having difficulty getting this AJAX code to work at all. I have two forms, which both activate the same javascript function. Depending on which form the user submits, it either supplies (via the GET method) an "emailunsubscribe" variable or an "email" variable to an external PHP file (submitEmail.php). The PHP figures out all the rest. The output of the PHP should go into a span tag with the id "emailForm." But, nothing happens upon submitting the form, and I can't figure out why.

    Code:
    <script type="text/javascript">
    function submitEmail(action)
    {
    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 && xmlhttp.status==200)
        {
        document.getElementById("emailForm").innerHTML=xmlhttp.responseText;
        }
      }
      
      if (action="addEmail") {
        xmlhttp.open("GET","/submitEmail.php?email="+document.getElementById("email").value,true);
      }
      
      if (action="unsubEmail") {
        xmlhttp.open("GET","/submitEmail.php?emailunsubscribe="+document.getElementById("emailunsubscribe").value,true);
      }
    xmlhttp.send();
    }
    </script>
    Additional Information

    I have two different forms on my page. I would like it to happen is that when the user submits either form, this javscript replaces both forms with the output from my external PHP file. Here is how this is set up:

    Code:
    <span id="emailForm">
    <form action="javascript:submitEmail('unsubEmail')">
    	<p>To unsubscribe from the email list, enter your email here: 
    	<input type="text" name="emailunsubscribe" id="emailunsubscribe"> 
    	<input type="submit" value="Unsubscribe"></p>
    </form>
    
    <br>
    
    <form action="javascript:submitEmail('addEmail')">
    	<p>Add your email to receive our newsletter: 
    	<input type="text" name="email" id="email"> 
    	<input type="submit" value="Subscribe!"></p>
    </form>
    </span>
    Let me know if you need any more information, and thanks so much for all your help. I welcome any assistance.

    Sincerely,
    yortzec

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    First you're taking no action to prevent standard submission of the form when the submit button is pressed, so the page may just be reloading.

    The function should be called by an onsubmit handler which should return false, not as the form's action parameter, which I'm not even sure is possible.

    In fact if you're not going to have a non-scripting fallback, there's no need to use forms at all, just post the data from a text field.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles