Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Non refreshing page on form submit

    hi guys I'm new to the forum. Anyway, I need help on this little problem. I have my form and validation set up with js, and a form submit through php. What I want to do is have the page NOT refresh on submit, and instead pop up a hidden field saying thank you, and I do realize the PHP will need to be replaced. Can anyone guide me to a tutorial, or walk me through it? Here's the code for the form validation and php.

    PHP Code:
    <?php
        
        $name 
    $_REQUEST['name'] ;
        
    $email $_REQUEST['email'] ;
         
    $message $_REQUEST['message'] ;

          
    mail"awedderien@gmail.com""Portfolio Contact Form",
        
    $message"From: $email" );
          
    header"Location: http://www.hi.com" );
    ?>
    Code:
     function checkForm() {
        
      name = document.getElementById("name").value;
      email = document.getElementById("email").value;
      message = document.getElementById("message").value;
     
      if (name == "") {
      hideAllErrors();
    document.getElementById("nameError").style.display = "inline";
    document.getElementById("name").select();
      return false;
      } else if (email == "") {
    hideAllErrors();
    document.getElementById("emailError").style.display = "inline";
    document.getElementById("email").select();
      return false;
      } else if (email.indexOf("@") < 1) { //  must contain @, and it must not be the first character
    hideAllErrors();
    document.getElementById("emailError").style.display = "inline";
    document.getElementById("email").select();
      return false;
      } else if (email.lastIndexOf(".") <= email.indexOf("@")) {  // last dot must be after the @
    hideAllErrors();
    document.getElementById("emailError").style.display = "inline";
    document.getElementById("email").select();
      return false;  
      } else if (email.indexOf("@") == email.length) {  // @ must not be the last character
    hideAllErrors();
    document.getElementById("emailError").style.display = "inline";
    document.getElementById("email").select();
      return false;  
      } else if (email.indexOf("..") >=0) { // two periods in a row is not valid
    hideAllErrors();
    document.getElementById("emailError").style.display = "inline";
    document.getElementById("email").select();
      return false; 
      } else if (email.indexOf(".") == email.length) {  // . must not be the last character
    hideAllErrors();
    document.getElementById("emailError").style.display = "inline";
    document.getElementById("email").select();
      return false; 
        } else if (message == "") {
    hideAllErrors();
    document.getElementById("messageError").style.display = "inline";
    document.getElementById("message").select();
    document.getElementById("message").focus();
      return false;
      }
      
      return true;
      }
     
      function hideAllErrors() {
    document.getElementById("nameError").style.display = "none"
    document.getElementById("emailError").style.display = "none"
    document.getElementById("messageError").style.display = "none"
    
      }
    Code:
    <form name="contact_form" method="post" onsubmit="return checkForm();" action="Scripts/mail.php">
    				
    					<label for="name">Name</label><h5>(required)</h5>
    					<input id="name" name="name" type="text" /><br />
    					<div class="error" id="nameError">Required: Please enter your name.<br /></div><br />
    				
    
    					<label for="email">Email</label><h5>(required)</h5>
    					<input id="email" name="email" type="text" /><br />
    					<div class="error" id="emailError">Required: Please enter a valid email address.<br /></div><br />				
    								
    					<label for="message">Message</label><h5>(required)</h5>
    					<textarea name="message" id="message"</textarea><br />
    					<div class="error" id="messageError">Required: Please enter a message.<br /></div><br />
    				 
    					<button type="submit" id="submit_btn" value="Submit" >Send</button><br />
    						
    			</form>
    [/PHP]

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Submit the form to a hidden iframe by setting the form's target or look into the 1000's of examples of Ajax form submissions online.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts

  • #4
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts
    I've litterally just worked out some very basic ajax stuff myself tonight.

    It consists of 2 pages an index.php and an xml.php page.

    You should be able to use these as a basis of your registration form.

    index.php
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <
    title>Ajax test</title>
    <
    script type="text/javascript" src="js/prototype.js"></script>
    <script>
    function dbadd() {
        var inputtext = $F('inputtext');
        var url = './xml.php';
        var pars = 'action=add&input=' + inputtext;
        var myAjax = new Ajax.Updater({success: 'result'},url,
          {
            method:'post',
            parameters: pars, 
            onFailure: reportError
          });
    }
    function dbget() {
        var url = './xml.php';
        var pars = 'action=get';
        var myAjax = new Ajax.Updater({success: 'retrieved'},url,
          {
            method:'post',
            parameters: pars, 
            onFailure: reportError
          });
    }
    function dbupdate() {
        var updatetext = $F('updatetext');
        var updateid = $F('updateid');
        var url = './xml.php';
        var pars = 'action=update&input=' + updatetext + '&id=' + updateid;
        var myAjax = new Ajax.Updater({success: 'confirmupdate'},url,
          {
            method:'post',
            parameters: pars, 
            onFailure: reportError
          });
    }
    function reportError(request)
        {
            alert('Sorry. There was an error.');
        }
    </script>
    </head>
    <body>


    <div id="myDiv">
        <p><input type="text" value="" id="inputtext" /></p>
    </div>
    <div id="myOtherDiv">
        <p id="result"></p>
    </div>
    <input type="button" value="Add to DB" onclick="dbadd();"/><br/> 
    <br/><br/><br/>
    <div id="myOtherDiv">
        <p id="retrieved"></p>
    </div>
    <input type="button" value="Retrieve DB" onclick="dbget();"/><br/> 
    <br/>
    <br/><br/><br/>
    <div id="myDiv">
        <p>ID <input type="text" value="" id="updateid" /></p>
        <p>New Text<input type="text" value="" id="updatetext" /></p>
    </div>
    <div id="myOtherDiv">
        <p id="confirmupdate"></p>
    </div>
    <input type="button" value="Update DB Entry" onclick="dbupdate();"/><br/> 
    <br/>
    </body>
    </html> 
    xml.php
    PHP Code:
    <?php    
    // Setup Databse Connection
    $serverAddress "localhost";
    $databaseToUse "ajaxtest";
    $databaseUsername "root";
    $databasePassword "";

    // DB Connection String
    $database mysql_pconnect($serverAddress$databaseUsername$databasePassword);
    mysql_select_db($databaseToUse,$database);

    if (
    $_POST['action']=="add") {
        
    $insertsql "insert into `testing` (inputText) values ('".mysql_real_escape_string($_POST['input'])."')";
        
    $result mysql_query($insertsql);
        if (!
    $result) {
            die(
    'Invalid query: ' mysql_error());
        } else {
            echo 
    'Successfully added <strong>'.$_POST['input'].'</strong> to the database';
        }
    }
    if (
    $_POST['action']=="get") {
        
    $insertsql "SELECT * FROM `testing` order by ID ASC";
        
    $result mysql_query($insertsql);
        if (!
    $result) {
            die(
    'Invalid query: ' mysql_error());
        } else {
            while (
    $resultlist mysql_fetch_array($result)) {
                echo 
    $resultlist[0].",".$resultlist[1]."<br />";
            }
        }
    }
    if (
    $_POST['action']=="update") {
        
    $updatesql "update `testing` set inputText='".mysql_real_escape_string($_POST['input'])."' where ID=".$_POST['id'];
        
    $result mysql_query($updatesql);
        if (!
    $result) {
            die(
    'Invalid query: ' mysql_error());
        } else {
            echo 
    'Successfully updated DB entry <strong>'.$_POST['id'].'</strong> with the data <strong>'.$_POST['input'].'</strong>';
        }
    }
    ?>
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com


  •  

    Posting Permissions

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