How to change a HTML table data value after form submission

64
March 05, 2021, at 01:00 AM

I have a form.

<form action="form.php" method="POST" name="form1" id="f1">

On this form is an input for a name.

<input type="text" class="form-control" id="n1" placeholder="Name" required>

The user inputs their name and clicks submit, the form.php then kicks in and this name is emailed to an email address.

$name = $_POST['n1'];

If this is successful the user is redirected to another page via;

header("Location: /anotherpage.html");

Up to this point everything works fine.

On this page is a HTML table with a table data cell;

<td id="table1"></td>

Q. What I am trying to do is when the user is redirected to this page the name they submit appears in the tables data cell.

I have tried a couple of things with no success.

On the HTML side;

value="<?php echo $name;?>" & value="<?php echo $_POST['n1'];?>" within the td tag.

<?php echo $name;?> & <?php echo $_POST['n1'];?> between the td tags.

& on the PHP side after the redirect header;

getElementById('n1').value = $name;

getElementById('n1').value = $_POST['n1'];

Is there a way of doing this?

Look forward to hearing from anyone

Kind Regards

Answer 1

You can send the name over the url using the header using PHP...

// check the submission of your form using the name set in the submit button...
if(isset($_POST['submit'])){
    // DO NOT SKIP ON SANITIZING YOUR INPUTS!!!!!
    // This example is very basic, I am not showing how to sanitize inputs
    $fname = filter_var(strip_tags($_POST['fname'], FILTER_SANITIZE_STRING));
    $lname = filter_var(strip_tags($_POST['lname'], FILTER_SANITIZE_STRING));
    // do your email stuff
    // after you have done all your other code, send the name 
    // key/value pair over the url using the header...
    header("Location: someotherpage.html?fname=".fname ."&lname=".lname);
}

Once you have sent the values over the url to the someotherpage.html page you can use URLSearchParams to search the url for key parameters to get their paired value/s. window.location.search => The query string portion of the URL. This includes the question mark, and everything following. Use .get() to get the url's parameters using their key. Then you can assign them using javascript with the dataset attribute => element.dataset.fname = firstName.

let parameters = new URLSearchParams(window.location.search);
let firstName = parameters.get('fname');
let lastName = parameters.get('lname');
let div = document.getElementById('data');
div.dataset.fname = `${firstName} ${lastName}`;

Returns the following on someotherpage.html :

READ ALSO
JavaScript filter array of objects based on property values

JavaScript filter array of objects based on property values

I have an array of objects in javascriptThe contents look like this;

59
How to kill a query running by pd.read_sql and connected by sqlalchemy (or mysql.connector)

How to kill a query running by pd.read_sql and connected by sqlalchemy (or mysql.connector)

I have a Python API that receives a request from PHP code and executes some queries with pdread_sql() in a MariaDB 10

66
How to run a file in VS Code?

How to run a file in VS Code?

I am learning PHP and I have decided to use VS CodeIs there any way I can run the files without a compiler? I have looked in the output section but nothing is there

60
Kotlin - OnSharedPreferenceChangeListener

Kotlin - OnSharedPreferenceChangeListener

I learn to develop my first Android appI choose Kotlin, just because

67