SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    disable or hide the form after submit

    Hi,

    i have a php application and i flavored it by Ajax. However i'm facing a problem in forms.

    the form submit result will appear after clicking submit above the form. however i want to disable the form or hide it after the everything is gone well.

    i'm using prototype & script.aculo.us.

    here is the form

    HTML Code:
    <div id="resultfinal">
    
                    </div>
    		<div class="mainform">
                    <form action="" onsubmit="sendActiveForm(owneremail.value);return false;" method="post">
    						<div><h1>طلب كود التفعيل</h1>
    						<input type="text" name="owneremail" /><label> البريد الالكتروني</label><br />
    						<input id="but" type="submit" onclick="sendActiveForm(form.owneremail.value)" value="اطلب" /><br />
    		</div></form>
    
                    </div>
    and here is the Ajax code

    Code:
    function sendActiveForm( came )
    {
      if( came == "" )
      {
        $('resultfinal').innerHTML = '<div id="resultfinalshow">الرجاء كتابة بريدك الالكتروني</div>';
      }
      else
      {
        var doForm = new Ajax.Request( 'activereq.php?action=ok' , {method: 'post' , encoding: 'windows-1256' , parameters: 'owneremail='+ came , onComplete: ajax_resp} );
      } 
    }
    function ajax_resp(originalRequest)
    {
        $('resultfinal').innerHTML = originalRequest.responseText;
    }
    the form result will appear successfully after the request is made, how ever i want the form to hide, so i did the following ( here is where everything is ok )

    PHP Code:
    @header('Content-Type: text/html; charset=windows-1256');
    echo 
    "<div id=\"resultfinalshow\">تم ارسال رمز التفعيل الى بريدك الالكتروني</div>";
    echo 
    "<script type=\"text/javascript\" language=\"javascript\">
                                // <![CDATA[
                                  Effect.Fade('mainform');
                                // ]]>
                              </script>"

    how this can be fixed please ? and hide the form after everything is made ok

    the other Q, when i do the same thing for the login, if he put the right user name & password (form is ajax ) how can i transfer him to the main page after everything is ok.

    thank you in advance

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Al-Rehaili,

    Try this:
    Code:
    function ajax_resp(originalRequest)
    {
        $('resultfinal').innerHTML = originalRequest.responseText;
        Effect.Fade('mainform');
    }
    the other Q, when i do the same thing for the login, if he put the right user name & password (form is ajax ) how can i transfer him to the main page after everything is ok.
    In the "onComplete" function for that request:
    Code:
    window.location = "http://www...";

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi MikeFoster,

    Thanx

    it worked fine, however the form will be faded whenever there is a response wither it is success or failure ( in my code sending the activation email ). if it has been sent or not it will hide the form.

    so i did the following:

    PHP Code:
    @header('Content-Type: text/html; charset=windows-1256');
                        echo 
    "done@<div id=\"resultfinalshow\">message that will appear</div>@mainform"
    and in JavaScript i did the following:

    Code:
    function sendActiveForm( came )
    {
      if( came == "" )
      {
        $('resultfinal').innerHTML = '<div id="resultfinalshow">type your email</div>';
      }
      else
      {
        var doForm = new Ajax.Request( 'activereq.php?action=ok' , {method: 'post' , encoding: 'windows-1256' , parameters: 'owneremail='+ came , onLoading: sayWait , onComplete: ajax_resp} );   
      } 
    }
    function ajax_resp(originalRequest)
    {
        $result = originalRequest.responseText.split('@');
        if( $result[0]== 'done' )
        { 
             $('resultfinal').innerHTML = $result[1];
             Effect.Fade($result[2]);
        }
        else
        {
             $('resultfinal').innerHTML = originalRequest.responseText;
        }
    }
    function sayWait(originalRequest)
    {
        $('resultfinal').innerHTML = '<div id="resultfinalshow" style="background-color: #ffffff;"><img src="js/ajax-loader.gif" /></div>';  
    }
    WOW everything is working. however, i'm faced with a new problem which is the email is sent twice to the user. what is wrong and what is happening ? i checked the code, changed from onComplete to onSuccess but the same result. email is sent twice.

    Please, would you know the solution ?

    thank you in advance

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the HTML in your first post, sendActiveForm is the onsubmit handler for the form as well as the onclick handler for the submit button.

    Glad you have it working


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
  •