We Keep Coding

how to display an image after successfully submitting form in the same form page?

I have created a page that contains a form, I want to show an image that's hidden in the same page after successfully submitting the form, I'm trying to do it using JavaScript inside the PHP code.
here is the code
html code:
<label for="UserEmail">Email</label> &nbsp&nbsp&nbsp&nbsp&nbsp
<input type="text" name="UserEmail" placeholder="Enter Email"><br><br>
<label for="UserEmail">Password</label>
<input type="password" name="UserPass" placeholder="Enter Password"><br><br>
<input type="submit" value="Log in">&nbsp&nbsp
<button>click</button>
Forgot password&nbsp&nbsp
New !! register
<div id="imge">
<img src="profile.png" alt="Profile Image">
</div>
</form>
PHP code:
<?php
error_reporting(0);
$x ="hi";
$y ="1";
if(($_POST["UserEmail"]==$x) and ($_POST["UserPass"]==$y))
{
echo "<script>
document.getElementById('img').style.display='block';
</script>";
header("location: index.html");
}
else {
echo "<script>alert('Login Faild');window.location.href='index.html';</script>";
}
?>

You must use jQuery with ajax to submit the form, and when you submit the form successfully and insert the data in database and upload the image into the folder, then return that image's location and in the jQuery's success method, use that image location to display image on any specific element using jQuery selector and make that element visible

How to submit photo upload when clicking "open" in file browser

Right now I have it as when a user clicks on the image the file browser will open up. But what I want is for after the file browser has opened and a file is chosen, once you click "open" the form will submit and the image will upload.
This is the closest I have gotten using the answer chosen here: Open File Browser on Link Click
code:
<div class="col-sm-6">
<img height="120" width="140" id="profileImage" alt="profile-image" class="userimg" style="margin-bottom: 1rem;" onclick="document.getElementById('imageFile').click();" src="<?php echo $image_src; ?>" />
</div>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>?id=<?php echo $childId; ?>" method="post" enctype="multipart/form-data" id="imageForm" name="imageForm" class="text-center">
<!-- <input type="submit" id="btn-imageUpload" value="Submit" name="submit" /> -->
<input type="file" style="display:none;" id="imageFile" name="profile-photo" onchange="this.form.submit() enctype=”multipart/form-data” capture/>
</form>
It almost worked.. When I click "open" in the file browser the page submits and refreshes, but the photo was not uploaded at all.
But it works fine if I submit using the "submit" button on the page instead of the "open" button in the file browser.

Add an event listener to your file input. Once it recognizes a change you can send them to where they need to go. Or make the request via AJAX.
var form = document.querySelector('#profile_image'),
input = document.querySelector('input[name="picture"]');
input.addEventListener('change', e => {
e.preventDefault();
// form.submit(); // Uncomment this line or change it to your preferred AJAX mechanism
document.querySelector('body').innerHTML += 'Event Listener worked!';
});
<form action="/upload/profile/<?=$childId?>" method="POST" id="profile_image">
<input type="file" name="picture" />
</form>
This should easily submit your form.

Disable page background on button submit click

I have a html page where I have placed a paypal check out button and stripe pay now button.
When the paypal check out button is clicked i wanted to disable the page just like clicking a modal popup in bootstrap, until the next paypal page is loaded
clicking a default stripe button I have on my page does this already.
when the paypal button is clicked there is a small delay from clicking the button, until the paypal page loads, so disabling the page after the paypal button click would stop users clicking anything else during the small wait time.
<form action="paypal_checkout.php" method="post" autocomplete="off">
<input type="hidden" name="product" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="bookingid" value="<?php echo $singleUserBooking[0]['id']; ?>">
<input type="hidden" name="price" value="<?php echo $singleUserBooking[0]['booking_price']; ?>">
<input type="hidden" name="currency" value="<?php echo strtoupper($singleUserBooking[0]['booking_currency']); ?>">
<input type="image" src="assets/images/payment/gold-rect-paypalcheckout-34px.png" alt="Submit">
</form>
how click I disable the page / background on the button click in the form above
I am using twitter bootstrap in my page theme
what would be the simplest why to achive this, thanks

Just surround your page content in a div, and hide it when you want.
For example:
<form id="Form1" method="post" runat="server">
<div id="mainContent">
some text
<br> some more text
<br> even more text
<br>
<input onclick="JavaScript: hideContent();" type="button" value="Hide Content">
</div>
<input onclick="JavaScript: showContent();" type="button" value="Show Content">
</form>
<script type="text/javascript">
<!--
function hideContent() {
document.getElementById('mainContent').style.display = 'none';
}
function showContent() {
document.getElementById('mainContent').style.display = 'block';
}
// -->
</script>
Edit:
To give it some kind of overlay (blacked out) you could do something like this:
Example.
And you could also disable page contens like so:
document.getElementById("btn1").disabled = true;

You could have an absolute positioned div with initially hidden and on click make it visible set it's style to
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color:rgba(100,100,100,0.75);
Optionally you can show a message as well Please wait inside this div

Use this PayPal button, it'll handle that for you: https://developer.paypal.com/demo/checkout/#/pattern/client

How to refresh the main page after the <form> opens a new window?

I have a form that opens a new window with the results.
Why? Because the new page calcalates the data and produces a PDF on screen.
So in simple form the code (lets say index.php) looks like this:
<?
//loads data and finds the next availiable numerical (autoincrease) ID. e.g. $nextid=103;
?>
<form action=newpage.php method=post target=_blank>
Next Availiable ID: <input type=text name=id value="<?=$nextid?>"><br/>
Your Name: input type=text name=thename maxlength=64><br/>
<button type=submit>Go!</submit>
<form>
After submitting the form, the newpage.php opens in a new window and produces the pdf. When I return to index.php (the page with the form) I would like it to be refreshed so it will get a new availiable id number.
I've tried javascript functions on the button object (onmouseup, onsubmit etc) but loading a page doesn't work. To test the code I typed an alert ("test"); command and it runs! When it comes to loading a page or refreshin the current page, it wont work.
onclick="loadUrl('http://somesite.com')" doesn't work either.
Right now I'm bypassing it with control code in the newpage.php, yet I would like the page to be refreshed in order PHP to read the database.
Any ideas?
Thank you for your time.

Try this ;)
<form action="newpage.php" method="post" target="_blank" onsubmit="javascript: setTimeout(function(){location.reload();}, 1000);return true;">
Next Availiable ID: <input type="text" name="id" value="<?= $nextid ?>"><br/>
Your Name: <input type="text" name="thename" maxlength="64"><br/>
<button type="submit">Go!</button>
</form>

Try putting this inside the form tag :
onsubmit = "document.location = 'http://somewebsite.com'"

reload form on submit with latest post data

I have a form to post content into a database. The existing database content for the form is posted into the form as the value. enalbeing the form to show the existing database content.
On submit the database is updated and to view the newly updated content in the form the page must be reloaded.
I have produced a reload script in javascript to reload the page on submit. The page reloads but the php content doesn't update. The page still need to be reloaded manually for the new content to show up.
This is the code for my form.
<form method="POST" action="">
<input type="text" name="title" <?php echo "value=\"" .$row['title']."\">"?>
<textarea id="editor" name="content"><?php echo $row['content']; ?></textarea>
<input type="submit" name="save" value="Save" class="submit" onclick="reload();">
</form>
Javascript
function reload(){
document.location.reload(true);
}
I have also tried
window.location = window.location.href;
Both are relaoding the page but the php isn't being refreshed.

you should first update the db with submitted value before selecting the records to display in the form value.
use <?php $_SERVER['PHP_SELF'] ?> in form action.
mysql_query("UPDATE xyz SET title=$_request['title'],... WHERE id = 1") .
2.Then select query mysql_query("SELECT * from xxx where id =1").
These may solve your problem of reloading to get new values.

java script excecute only on the client side. php is Server side. you need to reload the PHP.
<form method="POST" action="<<NAME OF YOUR PHP>>.php">
<input type="text" name="title" <?php echo "value=\"" .$row['title']."\">"?>
<textarea id="editor" name="content"><?php echo $row['content']; ?></textarea>
<input type="submit" name="save" value="Save" class="submit" onclick="reload();">
</form>

Is there a reason it needs to be done with ajax? If you don't need ajax it's better to handle it with php. ajax is more work and doesn't have the same rate of success as submitting a form via php, sometimes weird things happen. You can just do a redirect after saving the form:
header("Location: /routeToYourPage&id=".$ID,TRUE,303);