having a problem submitting forms via ajax

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • bettor
    New Member
    • Jun 2007
    • 27

    having a problem submitting forms via ajax

    Hi guys,

    I have some text inputs which I would like to submit to a database via PHP using ajax. What i want to do is when the submit button is pressed I want the forms to disappear and on their place to show up a message saying ...."thanks for submitting you data"... how can I do that. any help pls?
    so i have [code=html]<form...><input .../>
    <input>
    <input type="submit">
    </form>[/code]
    after pressing on submit I want only the text form out of the whole page to disappear and the rest to remain and on their place to show up a message echo-ed by php.
  • pbmods
    Recognized Expert Expert
    • Apr 2007
    • 5821

    #2
    Bettor, please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

    Comment

    • bettor
      New Member
      • Jun 2007
      • 27

      #3
      OK sorry for the mistake. I need help replacing forms with a successful submittion message using ajax. any help?

      Comment

      • ak1dnar
        Recognized Expert Top Contributor
        • Jan 2007
        • 1584

        #4
        Originally posted by bettor
        Hi guys,

        I have some text inputs which I would like to submit to a database via PHP using ajax. What i want to do is when the submit button is pressed I want the forms to disappear and on their place to show up a message saying ...."thanks for submitting you data"... how can I do that. any help pls?
        so i have [code=html]<form...><input .../>
        <input>
        <input type="submit">
        </form>[/code]
        after pressing on submit I want only the text form out of the whole page to disappear and the rest to remain and on their place to show up a message echo-ed by php.
        Insert your Form inside a <div id="formName"> and On submit set the visibility property to hidden for it.

        Then Remaining Task could Handle by Ajax, ResponseTexts.

        Comment

        • bettor
          New Member
          • Jun 2007
          • 27

          #5
          If I am using the following ajax function
          [CODE=javascript]<script type="text/javascript">
          function ajaxFunction()
          {
          var xmlHttp;
          try
          {
          // Firefox, Opera 8.0+, Safari
          xmlHttp=new XMLHttpRequest( );
          }
          catch (e)
          {
          // Internet Explorer
          try
          {
          xmlHttp=new ActiveXObject(" Msxml2.XMLHTTP" );
          }
          catch (e)
          {
          try
          {
          xmlHttp=new ActiveXObject(" Microsoft.XMLHT TP");
          }
          catch (e)
          {
          alert("Your browser does not support AJAX!");
          return false;
          }
          }
          }
          xmlHttp.onready statechange=fun ction()
          {
          if(xmlHttp.read yState==4)
          {
          document.myForm .time.value=xml Http.responseTe xt;
          }
          }
          xmlHttp.open("G ET","time.asp", true);
          xmlHttp.send(nu ll);
          }
          </script>[/CODE]
          how should I change [CODE=javascript]document.myForm .time.value=xml Http.responseTe xt;[/CODE] to address the div id=someid

          Comment

          • ak1dnar
            Recognized Expert Top Contributor
            • Jan 2007
            • 1584

            #6
            Exelent, at least you are trying http://www.w3schools.com.But I am Not recomending the GET method to submit your Form data. How about POST.[BTW you can use GET also].


            • Create a Form by putting id for each form element in the form.
            • Onsubmit the pass call for javascript function to collect the Submitted data from the form.
            • On the Page where you have created your Form create empty div.
              Code:
               <div id="status_msg"></div>
            • If you are familiar with readyState property of t XMLHttpRequest you can write down some messages to the status_msg div while the process is going on and and also you can hide your Form at the same time.
            P.S. I can Send you the code but how about learning it step by step your self. I think you are not in a hurry.

            Comment

            • dmjpro
              Top Contributor
              • Jan 2007
              • 2476

              #7
              Originally posted by ajaxrand
              Exelent, at least you are trying http://www.w3schools.com.But I am Not recomending the GET method to submit your Form data. How about POST.[BTW you can use GET also].


              • Create a Form by putting id for each form element in the form.
              • Onsubmit the pass call for javascript function to collect the Submitted data from the form.
              • On the Page where you have created your Form create empty div.
                Code:
                 <div id="status_msg"></div>
              • If you are familiar with readyState property of t XMLHttpRequest you can write down some messages to the status_msg div while the process is going on and and also you can hide your Form at the same time.
              P.S. I can Send you the code but how about learning it step by step your self. I think you are not in a hurry.

              Ajaxrand is right.
              It is better to learn it from yourself instead of taking the help from the beginning.
              And one thing you have not pass the parameters which you want to submit.
              Follow dis code it may help you to do it.

              [code=javascript]
              if(XMLHttp.read yState==4 && XMLHttp.status= =200)
              {
              document.write( XMLHttp.respons eText);
              }
              else{alert("The re is something error with the target page");}
              [/code]

              Best of luck with your try.

              Kind regards,
              Dmjpro.

              Comment

              • pbmods
                Recognized Expert Expert
                • Apr 2007
                • 5821

                #8
                Heya, Bettor.

                Thanks for using CODE tags! Did you know that you can specify a language for your CODE tags to make your source code easier to read (and therefore make it more likely that our Experts will post solutions)?

                You will still need to use [/CODE] to close your code blocks, regardless of the language, but you can the use one of these tags to open your code block:

                [CODE=html]
                [CODE=javascript]
                [CODE=php]

                and so on.

                Thanks!

                MODERATOR

                Comment

                Working...