How do I submit form data to a separate PHP file without clearing the form

Question

I am trying to submit form data to a separate PHP file BUT the form keeps closing on me!

I tried both POST and GET and I tried action="ReadFrmData.php", without the "act=form". My browser is Chrome on Windows 10, PHP 7.1.26.

Here is the form:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

        <form method="post" action="ReadFrmData.php?act=form" name="myform">
            Value:<input type="text" style = "width: 100px"name="sdata" value = "0"><br><br>
            Set Position High Limit<input type="radio" name="Set" value="SetPosHigh"><br>
            Set Position Low Limit<input type="radio" name="Set" value="SetPosLow"> <br>
            <input type="submit" name="sendset" value="Send"/><br>
        </form>


</body>
</html>

Here is the separate PHP file:

<?php
/* Read data and commands from the form */ 

include_once 'ChromePhp.php';

if (isset($_POST['sendset'])){  /* Command submit button */
    $sdata = $_POST['sdata'];
    $param = $_POST['Set'];
    $val = 0;   
    ChromePhp::log("Sendset");  //console message
}   
?>

I need to keep the form open. Thanks!

score 1 · Answer 1 · answered Apr 15 '19 at 23:06

Your requirement lies in the Frontend (HTML) File, not PHP.

Use Javascript to capture the values of your form, and post them via Ajax as mentioned above.

Refer to:

https://stackoverflow.com/a/40758582/8004150

As a guide. With this, you can also handle a response generated by your PHP.

score 1 · Answer 2 · answered Apr 15 '19 at 23:07

You are looking for AJAX (Asynchronous JavaScript And XML). In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its “asynchronous” nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.

This is an example of vanilla javascript implementation of one:

document.querySelector('form[name=myform]').onsubmit = ev => {
  ev.preventDefault();

  // Set up our HTTP request
  var xhr = new XMLHttpRequest();

  // Setup our listener to process completed requests
  xhr.onload = () => {

    // Process our return data
    if (xhr.status >= 200 && xhr.status < 300) {
      // What do when the request is successful
      console.log('success!', xhr);
    } else {
      // What do when the request fails
      console.log('The request failed!');
    }

    // Code that should run regardless of the request status
    console.log('This always runs...');
  };

  // Create and send a GET request
  // The first argument is the post type (GET, POST, PUT, DELETE, etc.)
  // The second argument is the endpoint URL
  xhr.open('POST', 'ReadFrmData.php?act=form');
  xhr.send();
}

<form method="post" name="myform">
  Value:<input type="text" style="width: 100px" name="sdata" value="0"><br><br> Set Position High Limit<input type="radio" name="Set" value="SetPosHigh"><br> Set Position Low Limit<input type="radio" name="Set" value="SetPosLow"> <br>
  <input type="submit" name="sendset" value="Send" /><br>
</form>

If you already use jQuery in your application, take a look at jQuery.ajax() as it is much simpler to implement (imo).

How do I submit form data to a separate PHP file without clearing the form

2 Answers2