I want to insert the value of my hidden file input into my database but I'm unsure how. My code just keeps inserting blank values to my database, but I want to insert the filename that's being uploaded. This is my code:
<form action="handler.php" method="post" enctype="multipart/form-data">
<div id="bd1" class="border">
<input id="inp1" class="imginp" type="file" name="img1" hidden>
<img src="https://img.icons8.com/wired/64/000000/add-image.png">
</div>
<input type="submit" name="submit">
</form>
<script>
for (let a = 1; a < 3; a++) {
$("#bd"+a).click(function(e) {
$(this).children(".imginp").click()
});
$('#inp'+a).click(function (e) {
e.stopPropagation();
});
$('#inp'+a).on('change', function(e){
var files = e.target.files;
$.each(files, function(i, file){
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
template =
'<div class="border">'+
'<input id="inp'+a+'" class="imginp" type="file" name="img'+a+'">'+
'<img class="blah" src="'+e.target.result+'">'+
'</div>';
$('#bd'+a).replaceWith(template);
};
});
});
}
</script>
if (isset($_POST['submit'])) {
$img1 = $_FILES['img1']['name'];
$img1targ = "images/".basename($_FILES['img1']['name']);
$img1muf = move_uploaded_file($_FILES['img1']['tmp_name'], $img1targ);
$stmt = $conn->prepare("INSERT INTO images (img1) VALUES (?)");
$stmt->bind_param("s", $img1);
$stmt->execute();
$stmt->close();
}
You are dynamically over-writing the input field with javascript, essentially erasing it before it can be submitted.
File input fields are controlled by the browser. If you debug in Chrome (hit F12, then right-click and inspect), you'll notice an input field of "file" type never actually changes. There's no value field, nothing.
Please see this excellent post:
Using readAsDataURL() for image preview
I believe that is close to what you want to do.
Also, regarding debugging, this is what you would need to do:
if (isset($_POST['submit'])) {
print "<pre>" . print_r($_POST,TRUE) . "</pre>"; exit;
$img1 = $_FILES['img1']['name'];
$img1targ = "images/".basename($_FILES['img1']['name']);
$img1muf = move_uploaded_file($_FILES['img1']['tmp_name'], $img1targ);
$stmt = $conn->prepare("INSERT INTO images (img1) VALUES (?)");
$stmt->bind_param("s", $img1);
$stmt->execute();
$stmt->close();
}
I've added the print line that dumps out $_POST and then exits.
It will show something like this when you click submit:
Array
(
[submit] => Submit
)
There are many ways you can do it.
1 hide input
<input type='hidden' name='bla' value='bla'>
1 hide input 2
//...
<html>
<head>
<style>
/*class to hide inputs, or insert it in a file css*/
.inputHidden{display:none !important;}
</style>
</head>
<body>
<!--add class-->
<input class='inputHidden' type='file' name='bla'>
</body>
</html>
There are other ways with javascript but it's not necessary in your case.
And I'm sorry I don't use jQuery for a while, but I did understand that jQuery has nothing to do with your request to send the name of your file to the database, I also don't see any problem with your query at all unless if you have a typo there like name of the column or name of the table, types of the columns, length of string in a column ...
In my MVC5 web app, I have a textbox that I key comment text into then click a button to add the comment. JavaScript ajax fires off the controller action method that adds the comment to the database returns a partial view with the added comment. Then it rebuilds the HTML. At that point, just want to remove the content that was keyed into the textbox.
Here's the ajax call and where I try to reset the textbox using:
document.getElementById("comment_1").innerText = "Add a Comment Again ...";
.
// For when clicking the addComment button. Adding a new comment.
$('.addComment').on('click', function () {
var postId = $(this).attr('data-id');
var commentMsg = $('#comment_' + postId).val();
var dateTimeNow = new Date();
// An object.
var comment = {
CommentMsg: commentMsg,
CommentedDate: dateTimeNow.toLocaleString()
};
// Call the Comments controllers action method to get add a comment related to the post id. Will show a partial view.
$.ajax({
type: 'POST',
url: '#Url.Action("AddComment", "Comments")',
data: { comment, postId },
success: function (response) {
$('div[class=allComments_' + postId + ']').remove();
// Dynamically building the HTML to hold the comments returned which now includes the added comment.
// The area for the Shared/_MyComments.cshtml to be placed.
var allCommentsArea = $('<div>').addClass('allComments_' + postId);
allCommentsArea.html(response);
allCommentsArea.prependTo('#commentsBlock_' + postId);
// Reset the value in the input textbox.
document.getElementById("comment_1").innerText = "Add a Comment Again ...";
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Critical Error: something is wrong in the call to AddComment! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
}
});
});
Here's the textbox - whose id will become "comment_1":
<div id="#string.Format("{0}_{1}","commentsBlock", post.PostID)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
<div class="AddCommentArea" style="margin-left: 30%; margin-bottom: 5px; margin-top: 8px;">
<input type="text" id="#string.Format("{0}_{1}", "comment", post.PostID)" class="form-control" placeholder="Add a Comment ..." style="display: inline;" />
<button type="button" class="btn btn-default addComment" data-id="#post.PostID"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</div>
</div>
Here's the resulting page after I attempt to reset the text box to a different value then I had keyed in.
I does not remove the text I keyed in.
I tried .innerText, .innerHTML and .TextContent
Test result from suggestion:
What you are doing is setting the text of the input to be "Add a Comment Again.." when you really want to be clearing the input text + making the placeholder "Add a Comment Again..". Try changing this code
// Reset the value in the input textbox.
document.getElementById("comment_1").innerText = "Add a Comment Again ...";
to this:
// Reset the value in the input textbox using jquery.
$("#comment_1").val('')
document.getElementById("comment_1").placeholder = "Add a Comment Again ...";
This way, you both clear the old text and also make the placeholder what you want it to be.
I am showing a flash error message if a mobile number is not validated.
Flash message as "Mobile number not validated. click here to validate".
But I want to display the same error message with "click here" as the hyper link which will redirect me to the top of the page.
if (res.json.response.mobilevalidated == false) {
FlashService.Error("Mobile number not validated." + ( click here ) +" to validate", false);
$scope.disabled = function() {
$scope.model.disabled = true;
$scope.title = "Cannot access until mobile number is validated.";
}
} else {
$scope.model.disabled = false;
}
How can I use html tags inside the controller? As my error message is a dynamic one.
Use ng-include.
Js add
$scope.includePath = function () {
`templateUrl="..../your template path"`
};
HTML
<div ng-include="includePath" > New html is here </div>
Here in this case you can use <button> if you want to give click event.
HTML
<div ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error', 'selected': hlink}" ng-click = "linking()" ng-if="flash" ng-bind="flash.message" style="margin-top: 20px; ">
</div>
My Controller
if (res.json.response.mobilevalidated == false) {
$scope.linking = function(){
$location.path('/otp');
}
$scope.hlink =" click here";
FlashService.Error("Mobile number not validated." + $scope.hlink +" to validate" , false);
}
What you are looking for can be achieved using $sce that is included in Angular. Take a look at the Documentation here: https://docs.angularjs.org/api/ng/service/$sce
You basically define your HTML string as trusted in the Controller like this: $sce.trustAsHtml(Stackoverflow") and bind it in the template using ng-bind-html like <span ng-bind-html="mySuperCoolLink"></span>.
There is an example in the documentation liked above.
Edit:
Your function FlashService.Error receives an invalid string. You use string concatenation to include your HTML link, however, that only works if your HTML link is stored in a variable. So you have to do one of the following:
A)
FlashService.Error("Mobile number not validated. click here ) to validate", false);
or B)
var link = "( click here )";
FlashService.Error("Mobile number not validated." + link + " to validate", false);
In your provided code, the JS engine will recognise the round brackets as they are valid JS, but not the pointy brackets (I forgot their name...).
Edit 2:
Plunkr: https://plnkr.co/edit/WzzWtnJW98u3e7eTLn2q?p=preview
I have a simple form that submits text to my SQL table. The problem is that after the user submits the text, they can refresh the page and the data gets submitted again without filling the form again. I could redirect the user to another page after the text is submitted, but I want users to stay on the same page.
I remember reading something about giving each user a unique session id and comparing it with another value which solved the problem I am having but I forgot where it is.
I would also like to point out that you can use a javascript approach, window.history.replaceState to prevent a resubmit on refresh and back button.
<script>
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
Proof of concept here: https://dtbaker.net/files/prevent-post-resubmit.php (Link no longer works)
I would still recommend a Post/Redirect/Get approach, but this is a novel JS solution.
Use the Post/Redirect/Get pattern. http://en.wikipedia.org/wiki/Post/Redirect/Get
With my website, I will store a message in a cookie or session, redirect after the post, read the cookie/session, and then clear the value of that session or cookie variable.
You can prevent form resubmission via a session variable.
First you have to set rand() in a textbox and $_SESSION['rand'] on the form page:
<form action="" method="post">
<?php
$rand=rand();
$_SESSION['rand']=$rand;
?>
<input type="hidden" value="<?php echo $rand; ?>" name="randcheck" />
Your Form's Other Field
<input type="submit" name="submitbtn" value="submit" />
</form>
After that check $_SESSION['rand'] with textbox $_POST['randcheck'] value
like this:
if(isset($_POST['submitbtn']) && $_POST['randcheck']==$_SESSION['rand'])
{
// Your code here
}
Make sure you start the session on every file you are using it with session_start()
I use this javascript line to block the pop up asking for form resubmission on refresh once the form is submitted.
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
Just place this line at the footer of your file and see the magic
When the form is processed, you redirect to another page:
... process complete....
header('Location: thankyou.php');
you can also redirect to the same page.
if you are doing something like comments and you want the user to stay on the same page, you can use Ajax to handle the form submission
You should really use a Post Redirect Get pattern for handling this but if you've somehow ended up in a position where PRG isn't viable (e.g. the form itself is in an include, preventing redirects) you can hash some of the request parameters to make a string based on the content and then check that you haven't sent it already.
//create digest of the form submission:
$messageIdent = md5($_POST['name'] . $_POST['email'] . $_POST['phone'] . $_POST['comment']);
//and check it against the stored value:
$sessionMessageIdent = isset($_SESSION['messageIdent'])?$_SESSION['messageIdent']:'';
if($messageIdent!=$sessionMessageIdent){//if its different:
//save the session var:
$_SESSION['messageIdent'] = $messageIdent;
//and...
do_your_thang();
} else {
//you've sent this already!
}
I found next workaround. You may escape the redirection after processing POST request by manipulating history object.
So you have the HTML form:
<form method=POST action='/process.php'>
<input type=submit value=OK>
</form>
When you process this form on your server you instead of redirecting user to /the/result/page by setting up the Location header like this:
$cat process.php
<?php
process POST data here
...
header('Location: /the/result/page');
exit();
?>
After processing POSTed data you render small <script> and the result /the/result/page
<?php
process POST data here
render the <script> // see below
render `/the/result/page` // OK
?>
The <script> you should render:
<script>
window.onload = function() {
history.replaceState("", "", "/the/result/page");
}
</script>
The result is:
as you can see the form data is POSTed to process.php script.
This script process POSTed data and rendering /the/result/page at once with:
no redirection
no rePOST data when you refresh page (F5)
no rePOST when you navigate to previous/next page through the browser history
UPD
As another solution I ask feature request the Mozilla FireFox team to allow users to setup NextPage header which will work like Location header and make post/redirect/get pattern obsolete.
In short. When server process form POST data successfully it:
Setup NextPage header instead of Location
Render the result of processing POST form data as it would render for GET request in post/redirect/get pattern
The browser in turn when see the NextPage header:
Adjust window.location with NextPage value
When user refresh the page the browser will negotiate GET request to NextPage instead of rePOST form data
I think this would be excelent if implemented, would not? =)
Use header and redirect the page.
header("Location:your_page.php"); You can redirect to same page or different page.
Unset $_POST after inserting it to Database.
unset($_POST);
A pretty surefire way is to implement a unique ID into the post and cache it in the
<input type='hidden' name='post_id' value='".createPassword(64)."'>
Then in your code do this:
if( ($_SESSION['post_id'] != $_POST['post_id']) )
{
$_SESSION['post_id'] = $_POST['post_id'];
//do post stuff
} else {
//normal display
}
function createPassword($length)
{
$chars = "abcdefghijkmnopqrstuvwxyz023456789";
srand((double)microtime()*1000000);
$i = 0;
$pass = '' ;
while ($i <= ($length - 1)) {
$num = rand() % 33;
$tmp = substr($chars, $num, 1);
$pass = $pass . $tmp;
$i++;
}
return $pass;
}
A refined version of Moob's post. Create a hash of the POST, save it as a session cookie, and compare hashes every session.
// Optionally Disable browser caching on "Back"
header( 'Cache-Control: no-store, no-cache, must-revalidate' );
header( 'Expires: Sun, 1 Jan 2000 12:00:00 GMT' );
header( 'Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT' );
$post_hash = md5( json_encode( $_POST ) );
if( session_start() )
{
$post_resubmitted = isset( $_SESSION[ 'post_hash' ] ) && $_SESSION[ 'post_hash' ] == $post_hash;
$_SESSION[ 'post_hash' ] = $post_hash;
session_write_close();
}
else
{
$post_resubmitted = false;
}
if ( $post_resubmitted ) {
// POST was resubmitted
}
else
{
// POST was submitted normally
}
Basically, you need to redirect out of that page but it still can make a problem while your internet slow (Redirect header from serverside)
Example of basic scenario :
Click on submit button twice
Way to solve
Client side
Disable submit button once client click on it
If you using Jquery : Jquery.one
PRG Pattern
Server side
Using differentiate based hashing timestamp / timestamp when request was sent.
Userequest tokens. When the main loads up assign a temporary request tocken which if repeated is ignored.
How to prevent php form resubmission without redirect. If you are using $_SESSION (after session_start) and a $_POST form, you can do something like this:
if ( !empty($_SESSION['act']) && !empty($_POST['act']) && $_POST['act'] == $_SESSION['act'] ) {
// do your stuff, save data into database, etc
}
In your html form put this:
<input type="hidden" id="act" name="act" value="<?php echo ( empty($_POST['act']) || $_POST['act']==2 )? 1 : 2; ?>">
<?php
if ( $_POST['act'] == $_SESSION['act'] ){
if ( empty( $_SESSION['act'] ) || $_SESSION['act'] == 2 ){
$_SESSION['act'] = 1;
} else {
$_SESSION['act'] = 2;
}
}
?>
So, every time when the form is submitted, a new act is generated, stored in session and compared with the post act.
Ps: if you are using an Get form, you can easily change all POST with GET and it works too.
The $_POST['submit'] variable would not exist on initial loading of page, and curl can be run only if below condition is true.
if($_POST['submit'] == "submit"){
// This is where you run the Curl code and display the output
$curl = curl_init();
//clear $post variables after posting
$_POST = array();
}
After inserting it to database, call unset() method to clear the data.
unset($_POST);
To prevent refresh data insertion, do a page redirection to same page or different page after record insert.
header('Location:'.$_SERVER['PHP_SELF']);
Using the Post/Redirect/Get pattern from Keverw answer is a good idea. However, you are not able to stay on your page (and I think this was what you were asking for?) In addition, it may sometimes fail:
If a web user refreshes before the initial submission has completed
because of server lag, resulting in a duplicate HTTP POST request in
certain user agents.
Another option would be to store in a session if text should be written to your SQL database like this:
if($_SERVER['REQUEST_METHOD'] != 'POST')
{
$_SESSION['writeSQL'] = true;
}
else
{
if(isset($_SESSION['writeSQL']) && $_SESSION['writeSQL'])
{
$_SESSION['writeSQL'] = false;
/* save $_POST values into SQL */
}
}
As others have said, it is not possible to out of using post/redirect/get. But at the same time it is quite easy to do what you want to do server side.
In your POST page you simply validate the user input but do not act on it, instead you copy it into a SESSION array. You then redirect back to the main submission page again. Your main submission page starts by checking to see if the SESSION array that you are using exists, and if so copy it into a local array and unset it. From there you can act on it.
This way you only do all your main work once, achieving what you want to do.
I searched for solution to prevent resubmission in a huge project afterwards.
The code highly works with $_GET and $_POST and I can't change the form elements behaviour without the risk of unforeseen bugs.
So, here is my code:
<!-- language: lang-php -->
<?php
// Very top of your code:
// Start session:
session_start();
// If Post Form Data send and no File Upload
if ( empty( $_FILES ) && ! empty( $_POST ) ) {
// Store Post Form Data in Session Variable
$_SESSION["POST"] = $_POST;
// Reload Page if there were no outputs
if ( ! headers_sent() ) {
// Build URL to reload with GET Parameters
// Change https to http if your site has no ssl
$location = "https://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
// Reload Page
header( "location: " . $location, true, 303 );
// Stop any further progress
die();
}
}
// Rebuilt POST Form Data from Session Variable
if ( isset( $_SESSION["POST"] ) ) {
$_POST = $_SESSION["POST"];
// Tell PHP that POST is sent
$_SERVER['REQUEST_METHOD'] = 'POST';
}
// Your code:
?><html>
<head>
<title>GET/POST Resubmit</title>
</head>
<body>
<h1>Forms:</h1>
<h2>GET Form:</h2>
<form action="index.php" method="get">
<input type="text" id="text_get" value="test text get" name="text_get"/>
<input type="submit" value="submit">
</form>
<h2>POST Form:</h2>
<form action="index.php" method="post">
<input type="text" id="text_post" value="test text post" name="text_post"/>
<input type="submit" value="submit">
</form>
<h2>POST Form with GET action:</h2>
<form action="index.php?text_get2=getwithpost" method="post">
<input type="text" id="text_post2" value="test text get post" name="text_post2"/>
<input type="submit" value="submit">
</form>
<h2>File Upload Form:</h2>
<form action="index.php" method="post" enctype="multipart/form-data">
<input type="file" id="file" name="file">
<input type="submit" value="submit">
</form>
<h1>Results:</h1>
<h2>GET Form Result:</h2>
<p>text_get: <?php echo $_GET["text_get"]; ?></p>
<h2>POST Form Result:</h2>
<p>text_post: <?php echo $_POST["text_post"]; ?></p>
<h2>POST Form with GET Result:</h2>
<p>text_get2: <?php echo $_GET["text_get2"]; ?></p>
<p>text_post2: <?php echo $_POST["text_post2"]; ?></p>
<h2>File Upload:</h2>
<p>file:
<pre><?php if ( ! empty( $_FILES ) ) {
echo print_r( $_FILES, true );
} ?></pre>
</p>
<p></p>
</body>
</html><?php
// Very Bottom of your code:
// Kill Post Form Data Session Variable, so User can reload the Page without sending post data twice
unset( $_SESSION["POST"] );
It only works to avoid the resubmit of $_POST, not $_GET. But this is the behaviour I need.
The resubmit issue doesn't work with file uploads!
What Works For Me is :
if ( !refreshed()) {
//Your Submit Here
if (isset( $_GET['refresh'])) {
setcookie("refresh",$_GET['refresh'], time() + (86400 * 5), "/");
}
}
}
function refreshed()
{
if (isset($_GET['refresh'])) {
$token = $_GET['refresh'];
if (isset($_COOKIE['refresh'])) {
if ($_COOKIE['refresh'] != $token) {
return false;
} else {
return true;
}
} else {
return false;
}
} else {
return false;
}
}
function createToken($length) {
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$charactersLength = strlen($characters);
$randomString = '';
for ($i = 0; $i < $length; $i++) {
$randomString .= $characters[rand(0, $charactersLength - 1)];
}
return $randomString;
}
?>
And in your Form
<form action="?refresh=<?php echo createToken(3)?>">
</form>
This form.php sample shows how to use PRG correct (when form is valid or not).
It redirects to the same page, only when form is valid and action was performed.
Redirection protects form from being resubmitted on page refresh.
It uses session to not loose success messages you want to show when form is valid.
There are two buttons for testing: "Valid submit", "Invalid submit". Try both and refresh page after that.
<?php
session_start();
function doSelfRedirect()
{
header('Location:'.$_SERVER['PHP_SELF']);
exit;
}
function setFlashMessage($msg)
{
$_SESSION['message'] = $msg;
}
function getFlashMessage()
{
if (!empty($_SESSION['message'])) {
$msg = $_SESSION['message'];
unset($_SESSION['message']);
} else {
$msg = null;
}
return $msg;
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Validation primitive example.
if (empty($_POST['valid'])) {
$formIsValid = false;
setFlashMessage('Invalid form submit');
} else {
$formIsValid = true;
}
if ($formIsValid) {
// Perform any actions here.
// ...
// Cool!
setFlashMessage('Form is valid. Action performed.');
// Prevent form resubmission.
doSelfRedirect();
}
}
?>
<h1>Hello form</h1>
<?php if ($msg = getFlashMessage()): ?>
<div><?= $msg ?></div>
<?php endif; ?>
<form method="post">
<input type="text" name="foo" value="bar"><br><br>
<button type="submit" name="invalid" value="0">Invalid submit</button>
<button type="submit" name="valid" value="1">Valid submit</button>
</form>
if (($_SERVER['REQUEST_METHOD'] == 'POST') and (isset($_SESSION['uniq']))){
if($everything_fine){
unset($_SESSION['uniq']);
}
}
else{
$_SESSION['uniq'] = uniqid();
}
$everything_fine is the boolean result of form-validation. If the form is not validating then it shall be usually displayed again with a hint what to correct, so that the user can send it again. Therefore the $_SESSION['uniq'] is created again too if a corrected form is desired
Why not just use the $_POST['submit'] variable as a logical statement in order to save whatever is in the form. You can always redirect to the same page (In case they refresh, and when they hit go back in the browser, the submit post variable wouldn't be set anymore. Just make sure your submit button has a name and id of submit.
i created a form element like that:
<form id="TextForm1" name="TextForm1">
<input type="text" id="Text1" name="Text1" value="" placeholder="" />
</form>
But it isn´t working in my .html site. I can´t type in something.. But if i embed it with an iframe it works perfectly.. I am using a scrolling script "iscroll" in my content area. But i can´t figure out why it isn´t working with it.
Does anyone have an idea? Thanks
You are using jQuery so you can use click event like:
Check Out The Working Demo
$(yourElement).click(function()
{
// your code
});
I changed two functions of your code to this and removed the onclick event from the inputs:
JavaScript:
$('#buttonCm').click(function(){
var cmEingabe = document.getElementById("cm");
var cm = cmEingabe.value;
var cmNeu = cm - 3;
$('#Liste').append('<br/>' + '<br/>' + '-' + ' '+ 'Bauteil passend zu ' + cmNeu +'cm' + ' ' +'Breite');
$('#Form1').fadeOut(700);
$('#Form2').delay(700).fadeIn(700);
});
$('#buttonCm2').click(function(){
var cmEingabe2 = document.getElementById("cm2");
var cm2 = cmEingabe2.value;
$('#Liste').append('<br/>' + '<br/>' + '-' + ' '+ 'Bauteil passend zu ' + cm2 +'cm' + ' ' +'Höhe');
$('#Form3').fadeOut(700);
$('#Liste').delay(700).fadeIn(700);
});
HTML:
<input type="button" id="buttonCm" name="buttonCm" value="auswählen" />
<input type="button" id="buttonCm2" name="buttonCm2" value="auswählen" />
I hope this might help you. But I could not find the script in your code to check how you had bind the iScroll plugin. Because iScroll it self prevent some events. But most probably if any form fields not responding after you bind iScroll means this is the solution which I used to overcome.
input fields not responding after added 'iscroll'-PhoneGap