I want to create a fully dynamic chat UI for my website,
But it reloads the whole page if a person submits the button this will directly show the div
<div class="messeging" id="msg">
<?php print $message->getName() ." : " . $chat->message . ""; ?>
</div>
Without reload msgs are save in some xml file path like example (../user/xml)
HTML
<form action="action.php" method="post">
<input type="text" id="input" value="php echo">
<input type="submit" value="send" onclick="showDiv()">
</form>
<div class="messeging" id="msg">
<?php print $message->getName() ." : " . $chat->message . ""; ?>
</div>
i don't know javascript/ajax well how to solve this
Try jquery ajax, on submit button send last msg for save into db and fetch all record and show them into chat page. so each time you send msg it will fetch all msg. if you don't know about how ajax work then let me know.
Begin by looking at the event on forms called 'onSubmit'. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit
Once you understand that, you can 'event.preventDefault()' in your 'onSubmit' method handler. Or in English, keep a form's default behavior to submit to the action from occurring.
After preventing the default action, you will need to do something with the form, and the easiest in latest browsers is to use the fetch API. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
You should be able to submit the data in the form to some endpoint that returns the HTML you wish to inject.
Once the HTML has been successfully returned, simple document.createElement methods with append (https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) will need to be used.
Good luck learning the web!
I think that this problem occurs often on a web application development. But I'll try to explain in details my problem.
I'd like to know how to correct this behavior, for example, when I have a block of code like this :
<?
if (isset($_POST['name'])) {
... operation on database, like to insert $_POST['name'] in a table ...
echo "Operation Done";
die();
}
?>
<form action='page.php' method='post' name="myForm">
<input type="text" maxlength="50" name="name" class="input400" />
<input type="submit" name="Submit" />
</form>
When the form gets submitted, the data get inserted into the database, and the message Operation Done is produced. Then, if I refreshed the page, the data would get inserted into the database again.
How this problem can be avoided? Any suggestion will be appreciated :)
Don't show the response after your create action; redirect to another page after the action completes instead. If someone refreshes, they're refreshing the GET requested page you redirected to.
// submit
// set success flash message (you are using a framework, right?)
header('Location: /path/to/record');
exit;
Set a random number in a session when the form is displayed, and also put that number in a hidden field. If the posted number and the session number match, delete the session, run the query; if they don't, redisplay the form, and generate a new session number. This is the basic idea of XSRF tokens, you can read more about them, and their uses for security here: http://en.wikipedia.org/wiki/Cross-site_request_forgery
Here is an example:
<?php
session_start();
if (isset($_POST['formid']) && isset($_SESSION['formid']) && $_POST["formid"] == $_SESSION["formid"])
{
$_SESSION["formid"] = '';
echo 'Process form';
}
else
{
$_SESSION["formid"] = md5(rand(0,10000000));
?>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<input type="hidden" name="formid" value="<?php echo htmlspecialchars($_SESSION["formid"]); ?>" />
<input type="submit" name="submit" />
</form>
<?php } ?>
I ran into a similar problem. I need to show the user the result of the POST. I don't want to use sessions and I don't want to redirect with the result in the URL (it's kinda secure, I don't want it accidentally bookmarked). I found a pretty simple solution that should work for the cases mentioned in other answers.
On successfully submitting the form, include this bit of Javascript on the page:
<script>history.pushState({}, "", "")</script>
It pushes the current URL onto the history stack. Since this is a new item in history, refreshing won't re-POST.
UPDATE: This doesn't work in Safari. It's a known bug. But since it was originally reported in 2017, it may not be fixed soon. I've tried a few things (replaceState, etc), but haven't found a workaround in Safari. Here are some pertinent links regarding the issue:
Safari send POST request when refresh after pushState/replaceState
https://bugs.webkit.org/show_bug.cgi?id=202963
https://github.com/aurelia/history-browser/issues/34
Like this:
<?php
if(isset($_POST['uniqid']) AND $_POST['uniqid'] == $_SESSION['uniqid']){
// can't submit again
}
else{
// submit!
$_SESSION['uniqid'] = $_POST['uniqid'];
}
?>
<form action="page.php" method="post" name="myForm">
<input type="hidden" name="uniqid" value="<?php echo uniqid();?>" />
<!-- the rest of the fields here -->
</form>
I think it is simpler,
page.php
<?php
session_start();
if (isset($_POST['name'])) {
... operation on database, like to insert $_POST['name'] in a table ...
$_SESSION["message"]="Operation Done";
header("Location:page.php");
exit;
}
?>
<html>
<body>
<div style='some styles'>
<?php
//message here
echo $_SESSION["message"];
?>
</div>
<form action='page.php' method='post'>
<!--elements-->
</form>
</body>
</html>
So, for what I needed this is what works.
Based on all of the above solutions this allows me to go from a form to another form, and to the n^ form , all the while preventing the same exact data from being "saved" over and over when a page is refreshed (and the post data from before lingers onto the new page).
Thanks to those who posted their solution which quickly led me to my own.
<?php
//Check if there was a post
if ($_POST) {
//Assuming there was a post, was it identical as the last time?
if (isset($_SESSION['pastData']) AND $_SESSION['pastData'] != $_POST) {
//No, Save
} else {
//Yes, Don't save
}
} else {
//Save
}
//Set the session to the most current post.
$_session['pastData'] = $_POST;
?>
We work on web apps where we design number of php forms. It is heck to write another page to get the data and submit it for each and every form. To avoid re-submission, in every table we created a 'random_check' field which is marked as 'Unique'.
On page loading generate a random value and store it in a text field (which is obviously hidden).
On SUBMIT save this random text value in 'random_check' field in your table. In case of re-submission query will through error because it can't insert the duplicate value.
After that you can display the error like
if ( !$result ) {
die( '<script>alertify.alert("Error while saving data OR you are resubmitting the form.");</script>' );
}
No need to redirect...
replace die(); with
isset(! $_POST['name']);
, setting the isset to isset not equal to $_POST['name'], so when you refresh it, it would not add anymore to your database, unless you click the submit button again.
<?
if (isset($_POST['name'])) {
... operation on database, like to insert $_POST['name'] in a table ...
echo "Operation Done";
isset(! $_POST['name']);
}
?>
<form action='page.php' method='post' name="myForm">
<input type="text" maxlength="50" name="name" class="input400" />
<input type="submit" name="Submit" />
</form>
This happen because of simply on refresh it will submit your request again.
So the idea to solve this issue by cure its root of cause.
I mean we can set up one session variable inside the form and check it when update.
if($_SESSION["csrf_token"] == $_POST['csrf_token'] )
{
// submit data
}
//inside from
$_SESSION["csrf_token"] = md5(rand(0,10000000)).time();
<input type="hidden" name="csrf_token" value="
htmlspecialchars($_SESSION["csrf_token"]);">
I think following is the better way to avoid resubmit or refresh the page.
$sample = $_POST['submit'];
if ($sample == "true")
{
//do it your code here
$sample = "false";
}
I am trying to submit a simple form that is in a pop-up dialog and then close the dialog.
The best article I've seen is Submit a form in a popup, and then close the popup but it seems to work intermittently for me. The page launched by the form is a PHP page that modifies a record in the database. I thought that once the request is sent the PHP page will execute, even if the launching window is closed. Apparently not though. Sometimes the table is updated, sometimes it isn't. It seems like if the SQL operation isn't fast enough the page will be closed and the process is killed.
Here's the code:
<form id="xlationform" action="updatexlation.php" method="post" onsubmit="return closeForm(this);">
Source: <br>
<textarea disabled name="sterm" rows=10 cols=50><?php echo $source ?></textarea><br><br>
Translation: <br>
<textarea name="xlt" rows=10 cols=50><?php echo $xlation ?></textarea><br><br>
<input type="hidden" name="id" value="<?php echo $termid ?>">
<input type="submit" value="Update">
</form>
<script>
function closeForm(f) {
f.submit();
window.close();
}
</script>
What's the best way of working this out? I want the window to be closed but the DB operation needs to complete first and I don't want to query the DB again if possible. Thanks for your help.
Do it in updatexlation.php like :
$e = mysqli_query(...) if ($e) { echo "<script>window.close();</script>"; }
But as mentioned above, avoid using popups.
The response page should simply have window.close in the onload event.
After I submit a form, and I click the back button, the page displays the confirm form resubmission page. Instead of that, I actually just want the browser to display the form itself. It there a way to do that? Here is a part of my code below, and it works except that it will not stop refreshing. I just want it to refresh once when you click the back button.
<meta http-equiv="refresh" content="0">
<form method = 'post' action = 'submitPost.php?section=$section'>
<textarea rows='10' cols='100' name = 'post'></textarea> </br>
<input type = 'submit' value = 'Submit'>
</form>
This is a browser security policy - when you want to go back to a page you loaded using the POST http verb it will always ask you for confirmation.
I have a form that is used for search on a website.
<form method="get" action="example.com/search">
<input type="text" name="search"/>
<input type="submit"/>
</form>
Lets say that I searched for "stack" when submitting I want the user to get redirected to example.com/search:stack
right now when submitting user gets redirected to : example.com/search?search=stack
How can I achieve that and allow it on devices that does not support javascript!?
You could set up your search page to redirect your users from /search?search=stack to /search:stack.
PHP:
if(isset($_GET['search']))
{
$search = $_GET['search'];
header('Location: /search:'.$search);
}
else
// no query handling
You'll need Url rewriting to do that.
URL Rewriting for Beginners
You cannot. Submitting a form in the way you describe, i.e. with the GET method, encodes the content of the form as a query string, which has this form:
?search=stack
See section 4.10.22 of the HTML5 Living Standard or section 17.13.3 of the HTML 4.01 Specification.
Correction: I'm sorry, I did not understand your question correctly. You indeed cannot change how the form is submitted, but you can redirect afterwards as you suggest.
Álvaro Martínez suggests a good way to accomplish that in his answer.