CODEWITHSUNDEEP
phphtmlforms
dm90
dm90

Reputation: 795

submit should not redirect to another page in HTML form

I have a HTML form which reads some data and saves in the text file with help of PHP. The form's HTML code looks like below.

What is happening now:
1. once i click on submit button it redirects to the 'myprocessing.php'
2. successfully saving in data.txt

The help i required on
1. when i click on submit it shouldn't redirect me to the php page, it should stay on the HTML form page
2. it should show the php file's output on the same HTML page
In simple words, I want to stay on the HTML page itself. Since I'm pretty new to HTML and PHP, struggling much to do these. Thanks in advance :-) 

<html>
<head>
<title></title>
</head>
<body>
     <form action="myprocessing.php" method="POST">
     <input name="field1" type="text" />
     <input name="field2" type="text" />
     <input type="submit" name="submit" value="Save Data">
     </form>
<a href='data.txt'>Show data</a>
</body>
</html>

This is my data prcoessing PHP file.

<?php
echo "starting...";
if(isset($_POST['myTextBox']) && isset($_POST['field2'])) {
    $data = $_POST['field1'] . '-' . $_POST['field2'] . "\n";
    $ret = file_put_contents('data.txt', $data, FILE_APPEND | LOCK_EX);
if($ret === false) {
    die('There was an error writing this file');
}
else {
    echo "$ret bytes written to file";
}
echo "Ended...";
}
else {
die('no post data to process');
}
?>

Upvotes: 0

Views: 5922

Answers (3)

Pramod
Pramod

Reputation: 2896

<html>
<head>
<title></title>
</head>
<body>
     <form action="" method="POST" name="testForm" id="testForm">
         <input name="field1" type="text" />
         <input name="field2" type="text" />
         <input type="submit" name="submit" value="Save Data">
     </form>
<a href='data.txt'>Show data</a>
<div class="result"></div>
</body>
</html>

add the name and id for form tag. if you keep action as blank, it will submit your form to current page itself. You need a ajax call to perform as per your requirement.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $( "#testForm" ).on( "submit", function( event )
    {
        $.ajax({
            url:'myprocessing.php',
            type:'POST',
            data: $("#testForm").serialize()
            success:function(results) {
                jQuery(".result").html(results);
            }
        });
        return false;
    });

</script>

Dont forget to put a return false at the end. If we dont put return false, it will submit your form after the ajax call.

Upvotes: 1

Khushboo
Khushboo

Reputation: 1817

Try below. Call refresh_div() on button click :-

<div class="result"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    function refresh_div() {
        jQuery.ajax({
            url:'YOUR PHP page url',
            type:'POST',
            success:function(results) {
                jQuery(".result").html(results);
            }
        });
    }

</script>

Upvotes: 3

rack_nilesh
rack_nilesh

Reputation: 553

Write php code in same html file and use isset() function to check for $_POST data

Try this

<?php
if(isset($_POST['field1']) && isset($_POST['field2']))
{
echo "starting...";
if(isset($_POST['myTextBox']) && isset($_POST['field2'])) {
    $data = $_POST['field1'] . '-' . $_POST['field2'] . "\n";
    $ret = file_put_contents('data.txt', $data, FILE_APPEND | LOCK_EX);
if($ret === false) {
    die('There was an error writing this file');
}
else {
    echo "$ret bytes written to file";
}
echo "Ended...";
}
else {
die('no post data to process');
}
}
?>

<html>
<head>
<title></title>
</head>
<body>
     <form action="current_page.php" method="POST">
     <input name="field1" type="text" />
     <input name="field2" type="text" />
     <input type="submit" name="submit" value="Save Data">
     </form>
<a href='data.txt'>Show data</a>
</body>
</html>

Upvotes: 2

Related Questions