Web Analytics Made Easy -
StatCounter edit contact form so that it does not reload page? - CodingForum

Announcement

Collapse
No announcement yet.

edit contact form so that it does not reload page?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • edit contact form so that it does not reload page?

    Hi--

    I was hoping someone could tell me how to edit this contact form so that it does not redirect to another page (the php page)? I'd like it to just simply send the message without leaving the page. The trick here is that I am using a javascript link to submit the form, NOT a button...

    Any help would be most appreciated!

    HTML PAGE:

    <body>
    <script type="text/javascript">
    function submitform()
    {
    document.forms["form"].submit();
    }
    </script>

    <form id= "form" method="POST" name="form" action="mailer.php">
    Name:
    <input type="text" name="name" size="19"><br>
    <br>
    E-Mail:
    <input type="text" name="email" size="19"><br>
    <br>

    Message:<br>
    <textarea rows="9" name="message" cols="30"></textarea><br>
    <br>

    <a href="javascript: submitform()" >Searchthis</a>

    </form>


    </body>



    PHP FILE:

    <?php


    $to = "[email protected]";
    $subject = "ABCs of UFOs";
    $name_field = $_POST['name'];
    $email_field = $_POST['email'];
    $message = $_POST['message'];

    $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

    echo "Data has been submitted to $to!";

    mail($to, $subject, $body);


    ?>

  • #2
    This is more PHP related than HTML related. I know PHP though, so I can answer your question. Using PHP, you are always going to have to reload the page because it is a server side language. It doesn't have to go to another page though. There are a couple of options. The easiest would be to have it open a new page, kind of like a popup. You can make it so that it resizes to a smaller window, but this will just open a new, full size page. Change the form line to the code below for this solution.

    Code:
    <form id= "form" method="POST" name="form" action="mailer.php" target="_blank">
    The other option is to include the PHP code in the HTML file (you would actually need to rename it to a PHP file), add an if statement, and adjust the action attribute in the form to submit to itself. So to change the action attribute change the form line to
    PHP Code:
    <form id= "form" method="POST" name="form" action="<?php echo $_SERVER['PHP_SELF'] . "&action=sendmail ?>" >
    Next you need to include the mailer script. Add to somewhere in the head, or below body; it doesn't really matter as long as there are no duplicate HTML tags.
    PHP Code:
    <?php include_once("mailer.php"); ?>
    finally, modify the PHP script to include an if statement. It uses a get method, by adding "action=sendmail" to the end of the url. The new php file code is below.

    PHP Code:
    <?php
     
    if(isset($_GET['action'])===TRUE && $_GET['action']=='sendmail'){
    $to "[email protected]";
    $subject "ABCs of UFOs";
    $name_field $_POST['name'];
    $email_field $_POST['email'];
    $message $_POST['message'];

    $body "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

    echo 
    "Data has been submitted to $to!";

    mail($to$subject$body);
    ?>
    Give this a try. Should work; I didn't debug it though, so if there is an issue post back.
    Last edited by JamesOxford; Aug 22, 2011, 11:52 PM.

    Comment


    • #3
      Hi, James--

      Thanks very much for this. I did give it a try, but no go.

      Here is what I have for the HTML and PHP codes. Did I do this correctly?

      With this in the header: <?php include_once("mailer3.php"); ?>

      <body>
      <script type="text/javascript">
      function submitform()
      {
      document.forms["form"].submit();
      }
      </script>
      <form id= "form" method="POST" name="form" action="<?php echo $_SERVER['PHP_SELF'] . "&action=sendmail ?>" >
      Name:
      <input type="text" name="name" size="19"><br>
      <br>
      E-Mail:
      <input type="text" name="email" size="19"><br>
      <br>

      Message:<br>
      <textarea rows="9" name="message" cols="30"></textarea><br>
      <br>

      <a href="javascript: submitform()" >Searchthis</a>

      </form>


      </body>

      And this for the PHP (which is named mailer3.php) and uploaded separately:

      <?php
      if(isset($_GET['action'])===TRUE && $_GET['action']=='sendmail'){
      $to = "[email protected]";
      $subject = "ABCs of UFOs";
      $name_field = $_POST['name'];
      $email_field = $_POST['email'];
      $message = $_POST['message'];

      $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

      echo "Data has been submitted to $to!";

      mail($to, $subject, $body);
      } ?>

      Comment


      • #4
        I'm also working on a form with a similar problem, so I'm interested to see the answer to this.
        mortgage calculator

        Comment


        • #5
          Here is a simple example of a form that submits data using ajax so the page doesnt reload. You can change it up to use for your needs.

          Code:
          <html> 
           <head>
            <title>Break Neck Pizza Delivery</title>
            <link rel="stylesheet" type="text/css" 
                  href="breakneck.css" media="screen" />
            <script language="javascript" type="text/javascript">
             var request = null;
          
             try {
               request = new XMLHttpRequest();
             } catch (trymicrosoft) {
               try {
                 request = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (othermicrosoft) {
                 try {
                   request = new ActiveXObject("Microsoft.XMLHTTP");
                 } catch (failed) {
                   request = null;
                 }
               }
             }
          
             if (request == null)
               alert("Error creating request object!");
          
             function getCustomerInfo() {
               var phone = document.getElementById("phone").value;
               var url = "lookupCustomer.php?phone=" +
                         escape(phone);
               request.open("GET", url, true);
               request.onreadystatechange = updatePage;
               request.send(null);
             }
          
             function updatePage() {
               if (request.readyState == 4) {
                 /* Get the response from the server */
                 var customerAddress = request.responseText;
          
                 /* Update the HTML web form */
                 document.getElementById("address").value =
                   customerAddress;
               }
             }
            </script>
           </head>
          
           <body onLoad="document.forms[0].reset();">
            <p><img src="breakneck-logo.gif" alt="Break Neck Pizza" /></p>
            <form method="POST" action="placeOrder.php">
             <p>Enter your phone number:
              <input type="text" size="14" 
                     name="phone" id="phone" onChange="getCustomerInfo();" />
             </p>
             <p>Type your order in here:</p>
             <p><textarea name="order" id="order"
                          rows="6" cols="50"></textarea></p>
             <p>Your order will be delivered to:</p>
             <p><textarea name="address" id="address"
                          rows="4" cols="50"></textarea></p>
             <p><input type="submit" id="submit"
                       value="Order Pizza" /></p>
            </form>
           </body>
          </html>
          Teed

          Comment


          • #6
            Thanks for the example, Teed, but I was hoping to hold onto my original code and javascript link to submit the form.

            I am still working on this, or more exactly, not getting anywhere... Any ideas out there on how I could fix this script to make it NOT leave the page and also use the js link to submit?:

            With this in the header: <?php include_once("mailer3.php"); ?>

            <body>
            <script type="text/javascript">
            function submitform()
            {
            document.forms["form"].submit();
            }
            </script>
            <form id= "form" method="POST" name="form" action="<?php echo $_SERVER['PHP_SELF'] . "&action=sendmail ?>" >
            Name:
            <input type="text" name="name" size="19"><br>
            <br>
            E-Mail:
            <input type="text" name="email" size="19"><br>
            <br>

            Message:<br>
            <textarea rows="9" name="message" cols="30"></textarea><br>
            <br>

            <a href="javascript: submitform()" >Submit This</a>

            </form>


            </body>

            And this for the PHP (which is named mailer3.php) and uploaded separately:

            <?php
            if(isset($_GET['action'])===TRUE && $_GET['action']=='sendmail'){
            $to = "[email protected]";
            $subject = "ABCs of UFOs";
            $name_field = $_POST['name'];
            $email_field = $_POST['email'];
            $message = $_POST['message'];

            $body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

            echo "Data has been submitted to $to!";

            mail($to, $subject, $body);
            } ?>

            Comment


            • #7
              OK--It seems that AJAX is the way to go. Thanks for all the help!

              Comment


              • #8
                Originally posted by eabigelow View Post
                OK--It seems that AJAX is the way to go. Thanks for all the help!
                lol yep!

                There are tons of ajax tuts on the web as well.

                Like this one: http://www.simonerodriguez.com/ajax-...ubmit-example/
                Last edited by teedoff; Aug 25, 2011, 11:27 AM.
                Teed

                Comment


                • #9
                  Problem resolved. Thanks!

                  Comment

                  Working...
                  X