How to stop form submission redirecting to PHP page?

siddes · 01-07-2008, 04:30 PM

Hi,

I'm working on a comments system and whenever I click on submit, the page redirects to the php file.

I don't want this happening, I just want to submit my data to the file using ajax, have the php file write that data to another file without any kind of response except success or failure.

The response after the submit button has been clicked will be given by my script.

Any ideas?

victor_rambo · 01-07-2008, 09:21 PM

Use onsubmit event. When the form is submitted, trigger AJAX function and return false so that the form is not submitted. The advantage is that if javascript is disabled, the comment will be submitted as a normal form submission. So prepare the server side comment-adding script accordingly.

amitava82 · 02-07-2008, 02:23 AM

Use jQuery library+form plugin for this. Here is an example:

1. register.html file:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>    
<script type="text/javascript" src="jquery.form.js"></script>          
 <script type="text/javascript">                                         
  
$(document).ready(function() {

$('#signup').submit(function(){

	var options = {
		target: '#response',
		success: function(){
		$('#response').fadeIn('medium');
		}
	};

    $(this).ajaxSubmit(options);
    return false; 
});

});
  
 </script>
 <style type="text/css">
<!--
#response {
	background-color: #FFFFCC;
	display: none;
	color: #FF0000;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
-->
 </style>
</head>

<body>
<h2>Register:</h2>
<form id="signup" name="signup" method="post" action="register.php">
  <table width="200" border="0">
    <tr>
      <td><label>Name: </label></td>
      <td><input type="text" name="name" id="name" /></td>
    </tr>
    <tr>
      <td>Email: </td>
      <td><input type="text" name="email" id="email" /></td>
    </tr>
    <tr>
      <td><label></label></td>
      <td><input type="submit" name="submit" id="submit" value="Submit" /></td>
    </tr>
  </table>
</form>
<div id="response"></div>
</body>
</html>

2. register.php file

PHP Code:


			
<?php



$name = trim($_POST['name']);

$email =  trim($_POST['email']);



if ($name =="" && $email == ""){



    echo "Please check your input and try again.";

}



else {



    echo "Thank you. Here are the informations you have submitted: <br />";

    echo "Name: ".$name. "<br />";

    echo "Email: ".$email. "<br />";



}

 

?>

siddes · 03-07-2008, 01:25 PM

Well, I'm having a little problem.

The code from where I submit my comments is

Code:

<html>
<head>
<script src="jquery.js">
</script>


<script>
$(document).ready(function() {
    $('#submitForm').bind('submit', function() {
        var username = $('#uname').val();
        var usercomment = $('#ucomment').val();
        alert (username + " says " + usercomment);
        $.post("q.php", {'uname: username, ucomment: usercomment'}, alert("done"));
        return false;
    })
})

</script>

<form name="asd" id="qwe" action="q.php" method="post">
Name <input type="text" id="uname"><br>
Message <input type="text" id="ucomment"><br>
<input type="Submit" value="Submit" id="submitForm">
</form>

And my PHP file is

Code:

<?php
    $filename = "frontend.htm";
    if (isset($_POST['uname'])) {
        $username = $_POST["uname"];
    } 
       
    if (isset($_POST['ucomment'])) {
        $usercomment = $_POST["ucomment"];
    }
        
    if(!($myFile = fopen($filename, "a")))
    {
        print("Error: ");
        print("'$filename' could not be created\n");
        exit;
    }

    //Trim and Create special characters into respective HTML entities
    $named = htmlentities(trim($username));
    $commented = htmlentities(trim($usercomment));
    echo "This works";
    
    //Write to file
    fwrite($myFile, "<p><b>$named says</b> says<br>");
    fwrite($myFile, "$commented<br></p>\n");

    //close the file
    fclose($myFile);

?>

The error I get is

Notice: Undefined variable: username in c:\program files\easyphp1-8\www\new\q.php on line 19

Notice: Undefined variable: usercomment in c:\program files\easyphp1-8\www\new\q.php on line 20

By the way, I'm using EasyPHP 1.8 which consists of apache 1.3.33 - php 4.3.10 - mysql 4.1.9 - phpmyadmin 2.6.1

amitava82 · 03-07-2008, 08:31 PM

Your form should be like this:

Code:

<form name="asd" id="qwe" action="q.php" method="post">
Name <input type="text" id="uname" name="uname"><br>
Message <input type="text" id="ucomment" name="ucomment"><br>
<input type="Submit" value="Submit" id="submitForm">
</form>

You call post value using field name.

siddes · 03-07-2008, 11:42 PM

Found the problem.

Its in the jQuery code

Code:

$.post("q.php", {'uname: username, ucomment: usercomment'}, alert("done"));

The values passed to the php file should not contain inverted commas

Code:

$.post("q.php", {uname: username, ucomment: usercomment}, alert("done"));

Popular Categories

Popular Articles

Content Categories

Sister Sites

Follow Us

Facebook Channels

Digit Magazine