How to change a HTML table data value after form submission - javascript

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

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 :

Related

Automatically submit a form

I am trying to get a form to submit automatically, which feeds a username and password to another form.
If I remove the javascript and just have the form display on the screen, and manually click the Submit button, the result is I get automatically logged in on the resulting page. This is the result I want.
If I leave the javascript in place, it actually doesn't automatically log me in but it does pass across the username and password pre-filled on the resulting page, then I have to click Submit on the resulting page.
How can I make it automatically submit the form to work the same way as a user actually hitting the submit button? Also I understand that this may not be the most secure way to pass a username and password across, but this is for a special use case.
Note: MyForm is a php page, and I am submitting to an aspx page.
Here is code of what my form would look like:
<form id='myForm' method='post' action='https://blah.com/Login.aspx'>";
<p>Username: <input value='usernameHere' name='Username' type='text' id='Username' data-index='0' maxlength='255' placeholder='Username' class='loginUsername' />";
<p>Password: <input value='passwordHere' name='Password' type='password' id='Password' placeholder='Password' />";
<p><input type='submit' name='btnSignIn' value='Sign In' id='btnSignIn' />
</form>
<script type="text/javascript">
document.getElementById('myForm').submit();
</script>
Thank you.
I suspect there are other issues at play, as using JS to submit the form should replicate a native browser submit.
You can try simulating clicking the 'submit' button via JavaScript:
JavaScript:
document.getElementById('btnSignIn').click();
jQuery:
$('#btnSignIn').click();
You can use onload method for javascript
function submitForm() {
// **NOTE** set form values first
document.getElementById('myForm').submit();
}
window.onload = submitForm;
Or with jQuery if you want:
$(function(){
submitForm();
});
or with tag attribute
he typical options is using the onload event:
<body onload="javascript:submitForm()">
.
.
As the problem is supposed "post a form through php" . It may be achived by using PHP€™s functions fsockopen() and fputs() to send properly formatted data to a remote server. Here is a sample of code :
<?php
//create array of data to be posted
$post_data['Username'] = 'XYZ';
$post_data['Password'] = '********';
$post_data['btnSignIn']="Sign In";
//traverse array and prepare data for posting (key1=value1)
foreach ( $post_data as $key => $value) {
$post_items[] = $key . '=' . $value;
}
//create the final string to be posted using implode()
$post_string = implode ('&', $post_items);
//we also need to add a question mark at the beginning of the string
$post_string = '?' . $post_string;
//we are going to need the length of the data string
$data_length = strlen($post_string);
//let's open the connection
$connection = fsockopen('https://blah.com', 80);
//sending the data
fputs($connection, "POST /Login.aspx HTTP/1.1\r\n");
fputs($connection, "Host: https://blah.com \r\n");
fputs($connection,
"Content-Type: application/x-www-form-urlencoded\r\n");
fputs($connection, "Content-Length: $data_length\r\n");
fputs($connection, "Connection: close\r\n\r\n");
fputs($connection, $post_string);
//closing the connection
fclose($connection);
?>
The above codes do post your form now to get redirect to that page , use simply
header('location :https://blah.com/Login.aspx ');

passing value from a php page to html page using javascript

I have a php page which displays certain profile data like Name,Username,Phone,Addres etc which were passed as params in url.Now after saving those details the page is being redirected to an html login page where I need to display the Username value in the text field for the Username.I tried to pass the username from php to html in many ways but in vain.By what means can i pass the username from the php page to html login page and display it in Username text field?
if you don't use any PHP Framework then you can save it by session or cookies. Then on login page you can get it and show
Use a php Site for login and than use this code at your registerscript (php) (be sure this is the first thing send to the client no echo before this)
header("LOCATION: http://www.something.com?username=walter&secoundusername=white");
In your login page you can access the data with
if(isset($_GET('username'))){
$username = $_GET('username');
}...
I hope this works for you.
your question is not too clear, however if the html login page is just a static page, i don't see how your request could be achieved.
If instead it's a php generated html page, then you may pass the variable via a hidden input field for example.
You could use the fputs php function to create a html page
<?php
$fp = fopen("file.html", 'w+');
fputs($fp, "YOUR HTML CODE");
fputs($fp, "YOUR HTML CODE");
fputs($fp, "$variable");
fclose($fp);
?>
<a href='file.html'>Link</a>
You can pass username as parameter in URL like
http://yoursite.com/login.html?username=abc
and in login.html use javascript to get the url parameter and assign it to textbox.
function getParamURL(param) {
return decodeURIComponent((new RegExp('[?|&]' + param + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
}
var username = getParamURL('username');
document.getElementById("username").value= username;
suppose your textbox id is username then it should assign it to that text box
Here is the login page
<?php
if($_POST)
{
include("Connect.php");
$Username=$_POST["Username"];
$Password=$_POST["Password"];
$Query="select Username from user where username='$Username' and password='$Password' LIMIT 1";
$Result=mysql_query($Query);
while($R=mysql_fetch_array($Result))
{
header("location:main.html?username='$R[0]'");
}
}
?>
<form action="<?=$_SERVER['PHP_SELF'] ?>" method="POST">
<input type="text" name="Username">
<input type="text" name="Password">
<input type="submit"/>
</form>
Here is how you could retrieve the page.The variable needs to be a php page
<html>
<p>Welcome</p> <?php
$Name=$_GET["username"];
echo $Name;
?>
</html>

How To trigger a php query using a link

i have a page, in where by i can want to collect and store the amount of page views, i have a php query that stores my page views onclick of a button,
if(isset($_POST['submit'])){
mysql_select_db($database_epl, $epl);
$query_lin = sprintf("SELECT * FROM topic WHERE id = %s ORDER BY `Date` DESC", GetSQLValueString($colname_lin, "int"));
$topicId = $_GET['id']; // you need to change 'id' to the name of your ID-parameter in the URL
$viewsIncrementQuery = "UPDATE `topic` SET `Views` = `Views` + 1 WHERE `id` = " . $topicId;
$incremented = mysql_query($viewsIncrementQuery, $epl) or die(mysql_error());
// run/execute mysql query
but now i want to be able to call that query using links, (on click of a link)
How can i go about this
You can add a onclick event to the link and have it set a form's action attribute and then trigger a submit
html
<form method="post" id="myForm">
<input type="text" name="id" />
<input type="button" name="submit" value="submit">
</form>
Click to submit
Javascript
function submitForm(element){
var action = element.href;
var form = document.getElementById("myForm");
form.action = action;
form.submit();
}
Your data would then be in the $_POST global array, if you want it in the $_GET global then just change the method attribute to get
You need to call this page with an ajax query, like this in JQuery. With this, you'll be able to transmit parameters as GET or POST, and receive them in your page, where you will do your update query.
Pass a parameter with your link:
http://example.com/yourpage.php?send=123
in yourpage.php
var_dump($_GET['send']);
returns
string(3) => 123
EDIT:
in your html output introduce a parameter for your link:
link
in yourpage.php
if($_GET['updateview'] == 1)
{
//your sql query etc. from the question.
}

Keeping form values after POST

I have a form, which on submitted goes to a php file and inserts values into DB(MySql).After successfully inserting values into DB, I want to return back to form screen, with values previously entered and posted.
Actually I am using the below code to return back to form page, but am unable to load fields with previous values.
echo "<meta http-equiv='refresh' content='1; URL=form.php'>";
form.php file contains form and add_form.php adds values to database. The above code is written in add_form.php on sql query success
Suggest me an easier way of doing this
This is how I do it when I need to retain data that is posted via PHP form
if (isset($_POST['your_button_name'])) {
foreach ($_POST as $field => $value)
$this->settings[$field] = $value;
}
and if I need to refer, I simply do $this->settings['field_name']
note: you will ofcourse have to define variable $settings and make sure to sanitize the data
In your add_form.php after saving data you can redirect like this.
$url = 'form.php?'.http_build_query($_POST);
header('Refresh:5; url= $url');
And in your form.php you can do this.
<input type="text" name="something" value="<?php echo $_GET['something']; ?>" />
you can try JavaScript ajax to do this~

Sending dynamically created html content through email with PHP

I'm making a simple todo list: http://jsbin.com/pemeqeni/1/edit?html,output
I want to be able to email myself the list, and I'm wondering how to do this with PHP specifically. I thought about scraping the HTML with DOMdocument, but I think that will only get the content from the static HTML page, which will never have list items. My other idea is to dynamically create a bunch of hidden input fields in the emailForm and dynamically delete them just as I do with the list items. Are there any other options? What's the standard protocol for something like this?
Something like this should work for getting all list elements.
<script>
function getEachListElement() {
var testList = document.getElementsByClassName("todoBody");
for (var i = 0; i < testList.length; i++) {
document.writeln(testList[i].innerHTML);
}
}
</script>
Try it out by changing your form action to this
<form name="emailForm" method="GET" action="JavaScript:getEachListElement()">
Then you can just create a string that you pass to PHP to email to yourself.
Have you tried the php mail function?
ie
<?
mail( $email, $subject , $text );
?>
Instead of get I would use post then set up a php script you call where you put your values(strings) into variables using $_post and use the mail function to mail those variables(strings).
just to be more clear your html would look like this
<form name="emailForm" method="POST" action="getContent.php">
<input type="text" name="email" value="email"><input type="submit" value="send">
</form>
Your getContent.php would then look like this
<?
$myemail = "myemail#tada.com";
$email = $_POST["email"];
mail ($myemail, 'The shiz you wanted', $email);
?>

Categories

Resources