We Keep Coding

Submit form and refresh DIV without page refresh not working?

Please note this is not a duplicate question. This question involves submitting a form and refreshing a div on a change event - not a click event. FYI.
I have a form to allow users to upload an image. I have removed the submit button and added a javascript on change event to submit the form automatically when the user inputs an image.
This works fine and the image is uploaded.
However, I am also pulling through the image to display this to the user. At the moment, the user does not see the image change until they refresh the page or sometimes not even until they clear their cache.
The div containing the images should refresh upon the form being submitted, and the page itself should not refresh. At the moment the div is not refreshing and I think the form is submitting and refreshing the page.
Please can someone show me where I am going wrong? Thanks
Code:
<!-- Commence Photo Upload A -->
<?php
if(isset($_FILES['image6'])){
$dir = $image .'/F/';
$file_name = $_FILES['image6']['name'];
$file_name = $dir. 'sub_img.jpg';
$file_size = $_FILES['image6']['size'];
$file_tmp = $_FILES['image6']['tmp_name'];
$file_type = $_FILES['image6']['type'];
$tmp = explode('.',$_FILES['image6']['name']);
$file_ext=strtolower(end($tmp));
$extensions= array("jpeg","jpg","png","gif");
if(in_array($file_ext,$extensions)=== false){
$errors[]="extension not allowed, please choose a GIF, JPEG or PNG file.";
}
if($file_size > 2097152) {
$errors[]='File size must be excately 2 MB';
}
if(empty($errors)==true) {
move_uploaded_file($file_tmp, $file_name);
}else{
}} ?>
<script>
$('#uploads6').submit(function(){
var data = $(this).serialize();
$.ajax({
url: "upload_6.php",
type: "POST",
data: data,
success: function( data )
{
//here is the code I want to refresh the div(#container)
$('.image6').html(data);
},
error: function(){
alert('ERROR');
}
});
return false;
});
</script>
<form id="uploads6" action = "" method = "POST" enctype = "multipart/form-data">
<label class="profile_gallery_image_in"><input type="file" name="image6" id="image6" onchange="form.submit()"/><p class="label"></p><img class="myImg" src="<?php echo $image.'/F/sub_img.jpg'; ?>" height="100%" width="100%" /></label>
</form>

For image caching you can try the age old "cachebuster" method.
All it is is put something unique into the url query.
www.example.com/image.jpg?cachebuster=somethingunique
The browser will see this as a new request because it doesn't know what the query string does, it could be a search form for all it cares. So it will not pull it from the cache.
Good choices for the something unque is any time based component, as you know its never been used before. Ive used filesize($file) before when doing image edits.
$url = "www.example.com/image.jpg?cachebuster=".microtime(true); //as a float
$url = "www.example.com/image.jpg?cachebuster=".time(); // only 1 second granularity
$url = "www.example.com/image.jpg?cachebuster=".filesize($file); // based on the size of the file
$url = "www.example.com/image.jpg?cachebuster=".hash_file($file); //based on file contents
And so on. You can even do it in JavaScript if you want to.
For the form
$('#uploads6').submit(function(e){
e.preventDefault();
//.. other code
return false;
});
One note is using $.post how you are will probably prevent the file from being uploaded.
Here is another SO question on that:
jQuery Ajax File Upload
If you want a non-javascript way to upload without refreshing page, you can also do it though an iframe but the onLoad even may not work in Chrome for that, so it can be hard to tell when the file is uploaded from the client side.
Here is a SO question I answered on that back in 2014
How can I upload files asynchronously?

To prevant default form submission try:
e.preventDefault();
To stop event bubling try:
e.stopPropagation();
Also try to add a ‚#‘ or ‚javascript:void(0)‘ in your HTML action-attribute.

You need to use
$('#uploads6').submit(function(e) {
e.preventDefault();
// your code
}
to prevent the submit event from directing to the page that is given in the action value. This is right now the same page since the value of the action attribute is an empty string and therefor the page is refreshed.

How to prevent a php page from browser back button?

I have a form which contains many drop-down and numeric slide-bar.
I am using post method to pass the selected variables to another page. Where I am getting the variables in the next page by $_POST() method.
And I am updating the variables passed into the database, after updation giving javascript pop-up as "you have saved successfully".
So my problem is when I click on browser back button, the values are getting updated in the database again and again. How can I prevent this by disabling browser back button.

You can have your post method open up a new tab so that there is no back navigation to go to:
<!DOCTYPE HTML>
<html>
<body>
<form action="www.google.com" method="post" target="_blank">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#theSubmit').on('click', function () {
setTimeout(function(){
window.close();
}, 500);
})
</script>
The target generates the new window
And if you would like to close the old window add the two scripts that close the previous tab 500ms after the new tab is opened.

Instead of disabling the back button, you could redirect the user if he gets back to the page using sessions.
page1.php
session_start();
if (isset($_SESSION['block'])) {
header('Location: page2.php');
}
page2.php
session_start();
$_SESSION['block'] = true;
Another option:
This is how you could set values of all your input fields back, if the user clicks back:
page1.html
var block = localStorage.getItem("block");
window.addEventListener("beforeunload", function() {
if (block === 1) {
const block = true;
}
});
if (block) {
const inputs = document.getElementsByTagName('input');
for (input of inputs) {
input.value = '';
}
}
page2.html
localStorage.setItem("block", 1);
In this case, if you don't want your values get updated in your database, use:
if (!empty($_POST['my_value']) { // Add to database })

Don't disable the back button, fix the problem that the data is saved multiple times instead. You could use pass the users to a separate page with message "you have successfully...".
Then if the user tries to go back you look at $_SERVER['HTTP_REFERER'] if that is "successful.php" then don't save the data.
Disabling back buttons is a big reason for me to block a page so that I can't visit it again.
I truly hate when they do that or add several pages that you have to click back to get out of a page.

Whenever you post your data then you should check your post data that this is empty or not
<?php
if(isset($_POST) && !empty($_POST) ){
//your code for update
//Then after run update query and success message ,do empty the post
$_POST=array(); // empty the post
}
?>

Set up a link to open a page and open a Javascript form?

I have a Subscribe form that only opens through Javascript on a link in a page. It is located at https://pixelark.com/cscc (under 'or signup via email to receive our weekly bulletin. Click here').
The problem is that it requires an extra click for someone to see this subscribe form. First click to access the page and the second click to access the form.
Is it possilbe to set it up in the a link such that it will goes to the page and open the form automatically?
Thanks

Why don't you check for parameters in your URL and in your Document.ready event
something like https://pixelark.com/cscc?page=register or https://pixelark.com/cscc#register
$(document).ready(function(){
if ($('.slider img').length == 2) {
var global_rotator = setInterval( "rotate()", 5000 );
}
// insert code here to check location parameters
});
here is an example on how to check location parameters

without using jQuery or something else, add a script tag:
<script>
(function() {
window.onload = function() { show_signup_form('426'); })
})(window);
</script>

how to show a page that is shown after form data is submitted in a new window?

I have two submit buttons in a form.
One for creating a post. The other one for previewing a post that's been under editing.
I'd like to show a page that appears after the form data is submitted in a new window when preview button clicked.
For now, I just added jquery code as the below.
previewBtn.on('click', function(){
window.open();
})
But, of course, it just shows a blank page in a new window.
I don't know how to show the page that is shown after the form data submitted in a new window.
Please help me out !
Thanks in advance!!!
+++ edited +++
I'm sending form data to editdo.php.
In this file, there is a code like this.
if(isset($_POST['Post']) && isset($_POST['preview'])){
Yii::app()->session['preview'] = $_POST['Post'];
$this->redirect("index.php?r=admin/post/preview");
}
Basically, if the form is submitted by clicking a preview button, editdo.php keep the data posted in session and redirect to preview page.

JavaScript
$(".form-btn").click(function(){
var action = $(this).data("action");
var form = $(this).parents("form");
switch(action){
case "submit":
form.removeAttr("target");
form.attr("action","editdo.php");
break;
case "preview":
form.attr("target","_blank");
form.attr("action","editdo.php?preview=1");
break;
}
form.submit();
});
Add target="_blank" to submit in a new window
PHP
if(isset($_POST['Post']) && $_GET['preview'] == '1'){
Yii::app()->session['preview'] = $_POST['Post'];
$this->redirect("index.php?r=admin/post/preview");
}
Change to $_GET['preview']
http://jsfiddle.net/Kpd8y/1/

Use correct syntax: window.open
window.open(urlOfThePage);

window.open(your desired url);

jQuery plugin for submiting Forms

I have a Form like this in asp Classic ..
<form method="post" name="AddItemForm" id="AddItemForm" action="/files/includes/CartControl.asp" style="display:inline;">
// bunch of Hidden Fields.
Then a SUBMIT button.
action of the form takes all the hidden fields and then after processing them redirects user to a CART page.
now what I want to do is....I want user to click on ADD TO CART button, however I want user to stay on the product page while form submits to a new window (not a javascript new window...something like lightbox/colorbox/fancybox DIV etc).
I looked into many jQuery plugins but could not get a satisfied answer...which plugin is BEST for my case? any simple example?
basicly I want to submit to a new overlay div and within that DIV redirect user to a new page to show Product Info.
Thanks

It seems that you are looking for some functionality for asynchronous form submission. There is this jQuery AJAX Form plugin that provides AJAX functionality for forms. You will have something like:
$('#AddItemForm').submit( function() {
// Submit asynchronously
$( this ).ajaxSubmit( function() {
// Form processing is done
// Redirect to the shopping cart page
});
// Show a modal or a fancy "please wait" message
// Prevent default submission
return false;
});

You can find some info in this answer, the code from one of the answers:
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
In "do something with response" you can take the data or url and load it into an overlay div.
If it's a URL, you can use jquery .load :
$('#result').load('ajax/test.html');
If it's html (or data which you wrap in html), just do
$('#result').html(theHTML)

the simplest way (in my view) is to add target attribute to the form which will open new window while the current page won't chage...