How to stop form submission redirecting to PHP page?

siddes · Jul 1, 2008

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 · Jul 1, 2008

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 · Jul 2, 2008

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" "*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="*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:

<?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 · Jul 3, 2008

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 · Jul 3, 2008

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 · Jul 3, 2008

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"));

How to stop form submission redirecting to PHP page?

siddes

Perpetual Fresh Stock

victor_rambo

हॉर्न ओके प्लीज़

amitava82

MMO Addict

siddes

Perpetual Fresh Stock

amitava82

MMO Addict

siddes

Perpetual Fresh Stock