How to show box after submit value in form - javascript

So I have pop-up window where user need to enter name, after clicking submit button this window close.
You can test it here: http://eurokos.lt/under20/button.php (Click 21 button, then try to enter any value and see what happens)
For this pop-up box I've used function:
function popUp() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
This function is used for X button to close window:
function closeWindow() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
My button which open pop-up window looks like:
Echo "<input type='button' onclick='popUp();' value='".$i."' />";
And here is PHP_SELF and form:
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
echo "</br>You have entered: <b> $name </b>";
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
`
What I need to do that posted result what entered and window not closed?
Maybe I need to use popUp() function again when submitting? But how to do that correctly? Thank you.

Try this:
html:
<form method="post" action="" onsubmit="return display()">
<div id="answer"></div>
<input type="text" name="name" id="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
javascript:
function display(){
var ans = document.getElementById("name").value
document.getElementById("answer").innerHTML="You have entered:"+ans;
return false;
}
Update:
function popUp(){
document.getElementById("answer").innerHTML=""; //Add these in your popup function
document.getElementById("name").value="";
}

First of all i suggest you to avoid PHP_SELF in the action it can be manipulated by people and it's not good.
at top of page try to do :
<?php
$thispage = $_SERVER['PHP_SELF'];
?>
<html>
.
.
.
<form method="post" action="<?=$thispage?>">
<input type="text" name="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
</html>
Then, using the action for sending data to PHP, will reload the page so you are probabilly losing all the inline fix you did.
Try to get the input values after the submit, assign them to varibles and do, for example:
xmlhttp.open("POST","<?=$thispage?>",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=name");
with an asynchronous call you don't reload the page and you don't lost your changes

Related

How can I submit form and stay on the same page after require?

I have a code which its simplified version could look like this :
file1.php
$array = array();
$array = new randomObject(1);
$array = new randomObject(2);
require('file2.php');
file2.php
<form method="post" action="?">
<?php
foreach ($array as $a) {
<p><?php echo $a->getAValue();
<textarea rows="5" cols="70" name="textbox[]">
</textarea>
</p>
<?php } ?>
<input id="isTrue"> //true or false
<input type="submit" >
</form>
The user is supposed to write answers in the textarea and click on submit then his answers are compared to the randomObject values. Then it shows if it's true or false next to each textarea
You are looking for something that the fron-tend will handle for you and an AJAX call is exactly what you need.
First of all, name your form
<form id="myForm" method="post" action="?">
<?php
foreach ($array as $a) {
<p><?php echo $a->getAValue();
<textarea rows="5" cols="70" name="textbox[]">
</textarea>
</p>
<?php } ?>
<input id="isTrue"> //true or false
<input id="submitButton" type="submit" >
</form>
Now you have proper id's both on the submit button and on the form itself.
<script>
let submitB = document.querySelector("#submitButton");
submit.addEventListener("click", function(e) {
e.preventDefault();
});
</script>
From now on you just have to write a proper ajax call to the url you wanted to access and you will be set to go.
If you need help with that let me know and I will throw something your way.
I am guessing you want to retain the values entered by the user, since they go away if you submit the form. (Page reloads)
This can be done by altering the input fields. If a value was submited pass that value to each corresponding input field.
Something like that:
<textarea rows="5" cols="70" name="textbox[]" <?php if(isset(value[SOMETHING])){?> value="<?php echo value[SOMETHING]; ?>" <?php } ?> >
This is just an example of how it would work. Make sure you adapt it to your code!

Form to redirect to a particular URL

I need a form with one input (eg. "number") that after sumbit redirects the broswer to http://staticurl/[number].html
How can I do?
header('location: http://staticurl/'.$_POST['number'].'html');
Maybe?
Assume a HTML form like
<form action="" method="POST">
<input type="number" name="number">
<input type="submit" name="submit" value="submit">
</form>
Now using php you can redirect
<?php
if(isset($_POST['submit'])){
header("Location: http://staticurl/".$_POST['number'].".html");
}
?>
If header() returns any error then you can do it with javascript inside php like
<?php
if(isset($_POST['submit'])){
echo '
<script>
window.location.href = "http://staticurl/'.$_POST['number'].'.html";
</script>
';
}
?>
Validate the form data before processing it.
Solved with
<script type="text/javascript">
function goTo()
{
var NUM= document.forms[0].NUM.value;
var URL = 'http://staticurl/'
window.location = URL+NUM+'.jpg';
return false;
}
</script>
And
<form action="" method="get" onsubmit="return goTo()">

browser is blocking Javascript window.open

I want to create a button that opens a new tab with the user's name. But in Chrome it always block the popup window. Is there way to do this without enabling popup windows?
<div class="box">
<form action="" method="post">
<input type="text" name="meno" class="form-control" placeholder="Nick">
<input type="submit" name="submit" class="tlacitko" value="Submit">
</form>
<?php
if($_POST){
$nick = $_POST['meno'];
$hlasovat = "<script>window.open('https://czech-craft.eu/vote?id=16942&user=$nick') </script>";
echo $hlasovat;
unset($_POST);
}
?>
</div>
If you want your HTML form to open in a new window/tab when submitted you can use:
<form action="" method="post" target="_blank">
instead of
<form action="" method="post">
For your code to work using this technique you will probably also need to do something like:
$hlasovat = "<script>window.location.href = 'https://czech-craft.eu/vote?id=16942&user=$nick' </script>";
or
$hlasovat = "<script>window.location.assign('https://czech-craft.eu/vote?id=16942&user=$nick') </script>";
or
$hlasovat = "<script>window.location.replace('https://czech-craft.eu/vote?id=16942&user=$nick') </script>";
instead of
$hlasovat = "<script>window.open('https://czech-craft.eu/vote?id=16942&user=$nick') </script>";

Trying to validate a form client and server side

The client side validation looks something like this:
function validateFname() {
var x = document.getElementById('fname').value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
The server side below it:
if(isset($_POST['SubmitForm'])){
if(empty($_POST['fname'])){
echo "First name cannot be empty!<br/><br/>";
return false;
}
and the form itself below that:
<form name = 'checkout' method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>"
accept-charset='UTF-8'>
First Name:<input type="text" name="fname" id="fname" onsubmit="return validateFname()"
class="required" value="<?php echo $fname;?>" />
<input type="submit" name="SubmitForm" value="Send"/>
Ofcourse there is a lot more to it but ive just given one example above. I am trying to figure out why the (clientside)javascript function is not working and instead the (server) php error is coming up. I need to be able to have the client run validation checks before the server to reduce load.
The onsubmit is a event that belongs to the <form> element. You have placed it with the submit button which won't work.
Here's a working fiddle:
Demo
Reference
<form name = 'checkout' method='post' action="<?php echo $_SERVER['PHP_SELF']; ?>" accept-charset='UTF-8'>
First Name:<input type="text" name="fname" id="fname" value="<?php echo $fname;?>" />
<input type="submit" name="SubmitForm" onClick="return validateFname()" value="Send"/>
</form>
try the above code. Instead of using onSubmit in input text field use onClick in submit button.
good luck

Require logging off before log in

I have two buttons, one to log in and another to log out.
Now I want only one button, I want that it only shows the log in button.
And if you are logged in, then the page refresh (already done) but then I want that the log in button is changed into a logoff button. So that you don't log in two or more times a day and you have to log out first.
<form action="begintijd.php" method="POST">
<input name="begintijd" value="aanmelden" type="submit">
</form>
<form action="eindtijd.php" method="POST">
<input name="eindtijd" value="afmelden" type="submit">
</form>
header("Refresh: 2; index.php");
So you can log in and off so many times you want. But I only want that you can log in once and then you first have to log out before you can log in.
(some things are in dutch, you can overwrite it if you want)
Simple.
You are using a cookie to set login data. If cookie is set, then display button 1, else display button 2, like;
<?php
if (isset($_COOKIE["user"])){
echo '<form action="begintijd.php" method="POST">
<input name="begintijd" value="aanmelden" type="submit">
</form>';
}else{
echo '<form action="eindtijd.php" method="POST">
<input name="eindtijd" value="afmelden" type="submit">
</form>';
}
?>
Use sessions: Using sessions & session variables in a PHP Login Script
<?PHP
session_start();
if (!(isset($_SESSION['login']) && $_SESSION['login'] != '')) {
echo '<form action="begintijd.php" method="POST">'.
'<input name="begintijd" value="log in" type="submit">'.
'</form>';
}
else
{
echo '<form action="begintijd.php" method="POST">'.
'<input name="begintijd" value="log out" type="submit">'.
'</form>';
}
?>
You need to read about session variables or cookies.
If your are using sessions.You can do using this.
<?php if($_SESSION['logged_in']==true){?> //if user is logged in show logout button
<form action="begintijd.php" method="POST">
<input name="begintijd" value="aanmelden" type="submit">
</form><?php } else {?>//if user is logged out show login button
<form action="eindtijd.php" method="POST">
<input name="eindtijd" value="afmelden" type="submit">
</form><?php }?>
You can try this.
<form action="<?=($_SESSION['login']!="")?"begintijd.php":"eindtijd.php"?>" method="POST">
<input name="<?=($_SESSION['login']!="")?"begintijd":"eindtijd"?>" value="<?=($_SESSION['login']!="")?"aanmelden":"afmelden"?>" type="submit">
</form>
Send us your begintijd.php and eindtijd.php codes

Categories