I am using PHP and I have a form that I want to disappear/hide when the user clicks submit. It shouldn't appear/show for same user again.
form.php
<?php
session_start();
include('config.php');
if(isset($_SESSION['User']))
{
$nameuser = $_SESSION['User'];
}
else
{
header("location:signin.php");
}
?>
<!doctype html>
<html lang="en" class="no-js">
<head>
<title></title>
</head>
<body>
<header>
</header>
<!-- Form -->
<main class="cd-main-content">
<div class="container">
<form id="question_form" novalidate action="insertswat.php" method="post">
<div class="row">
<div class="col-25">
<label for="title">Swat form</label>
</div>
<div class="col-75">
<input type="text" id="" name="swat" >
</div>
</div><!--End -->
<hr>
<div class="row">
<input type="submit" value="submit">
</div>
</div></form><!-- End form -->
</main>
<!-- cd-main-content -->
</body>
</html>
insertswat.php
<?php
include('config.php');
$swat=$_POST['swat'];;
// Insert data into mysql
$sql = "INSERT INTO swatreport (swat)
VALUES ('$swat')";
if (mysqli_query($con, $sql)) {
header("location:swatform.php?q=success");
} else {
header("location:swatform.php?q=error");
}
mysqli_close($con);
?>
How could I go about this?
When user fill text field and clicks Submit
He will never see that form again
You can change this line <input type="submit" value="submit">
to assign id and name like this:
<input type="submit" name="submit" id="submit" value="submit">
Then:
<?php
$submit = $_POST['submit'];
if(!isset($submit)){
//Do NOT put closing curly brace
?>
<form>
//Your form you want to hide on submit
</form>
<?php
} //this is the closing curly brace
?>
//Put the stuff you want to show after submit here...
in header check if userlogged in
session_start();
if(!isset($_SESSION['loggedin'])){
header('location:login.php');
exit();
}
Try this JQuery snippet,
<script>
$( "#questions_form" ).submit(function( event ) {
$("#questions_form").fadeOut(500);
event.preventDefault();
});
</script>
Related
i am new in ajax and i try to learn it.
i got this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script>
$(document).ready(function(){
/**Add Ajax**/
$("#add-car-form").submit(function (evt) {
evt.preventDefault();//prevent form to be submitted as null
var postData=$(this).serialize();//get all the data from the form
var url=$(this).attr('action');//the url is the action attribute
$.post(url, postData, function(php_table_data){//send back the data from the url
$("#car-result").html(php_table_data);
});
});
});//End Document Ready
</script>
</head>
<body>
<div id="container" class="col-xs-6 col-xs-offset-3">
<div class="row">
<h2>Search our Database</h2>
<input class="form-control" type="text" name="search" id="search" placeholder="search our inventory">
<br>
<br>
<h2 class="bg-success" id="result"></h2>
</div>
<div class="row">
<form method="post" id="add-car-form" action="add_cars.php" class="col-xs-6">
<div class="form-group">
<input type="text" name="car_name" class="form-control">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="add car">
</div>
</form>
<div class="col-xs-6">
<div id="car-result">
</div>
</div>
</div>
</div>
</body>
</html>
and i got the add_car.php
<?php
include "../db.php";
if(isset($_POST['car_name'])){
$car_name=$_POST['car_name'];
$query="INSERT INTO cars(cars) VALUES('{$car_name}')";
$query_car_name=mysqli_query($connection,$query);
if(!$query_car_name){
die("QUERY FAILED".mysqli_error($connection));
}
header("Location: index.html");
}
?>
now, when i click submit in the form the sql statemant is working but some how i got a dublicate form as a result
here is a picture before insert data:
enter image description here
and here is a result after insterting data:
enter image description here
In add_car.php
Change your code like this
<?php
include "../db.php";
if(isset($_POST['car_name'])){
$car_name=$_POST['car_name'];
$query="INSERT INTO cars(cars) VALUES('{$car_name}')";
$query_car_name=mysqli_query($connection,$query);
if(!$query_car_name){
die("QUERY FAILED".mysqli_error($connection));
}
$table="<table><thead><tr><th>ID</th><th>Car Name</th></tr></thead><tbody>";
$query="Select * From cars ORDER BY id DESC";
$result=mysqli_query($connection,$query);
if($result){
while($row = $result->fetch_assoc()) {
$table.="<tr><td>" . $row["id"]. "</td><td>" . $row["cars"]."</td></tr>";
}
}
$table.="</tbody></table>";
echo $table;
}
?>
How can I change a web page title for everyone on that site and not to be changed with refreshing, using javascript or PHP?
I've tried HTML DOM title but it gets back to its first title after refreshing.
I've tried giving variable in PHP and changing it by after a button pressed but the title didn't change!
These were my codes:
<?php
$title = "Chat";
?>
<html>
<head>
<title><?php echo $title ?></title>
</head>
<body>
<div id="chat_messages"></div>
<form enctype="multipart/form-data" method="post">
<input onClick="dokme()" class="button2" type="submit" name="send" value="Send">
</form>
</div>
<?php
if(isset($_POST['send'])){
$title = "new message";
}
?>
</body>
</html>
Any idea what should I do?
Glad to help.
Of course the title won't change, because php reads your code from 1st line to the end, and you have already added $title = "Chat";
what to do is to change the code like this:
<?php
if(isset($_POST['send'])) $title = "new message";
else $title = "Chat";
?>
<html>
<head>
<title><?php echo $title ?></title>
</head>
<body>
<div id="chat_messages"></div>
<form enctype="multipart/form-data" method="post">
<input onClick="dokme()" class="button2" type="submit" name="send" value="Send">
</form>
</div>
</body>
</html>
This will change the title.
Also, if you want to change the title without refreshing the page, you need JS.
Just use
document.title = '***'; //use your title to replace "***"!
Have a good day~
There are some mistakes in your code like you have used onClick instead you should use onclick
you have not putted a semicolon ; while you are typing
You have not assigned action to your form
Action will be echo htmlspecialchars($_SERVER['PHP_SELF'])
And we will use if else
This will work
<?php
if (isset($_POST['send'])) {
$title = "new message";
} else {
$title = "Chat";
}
?>
<html>
<head>
<title><?php echo $title;?></title>
</head>
<body>
<div id="chat_messages"></div>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" enctype="multipart/form-data" method="post">
<input onclick="dokme()" class="button2" type="submit" name="send" value="Send">
</form>
</div>
</body>
</html>
I hope this will Help you
I have a little problem. Why do I have to click twice on my submit button before my js script run? I want that when I click the button the data are send, and the js script runs without click again
This is my page:
<html>
<head>
<script src="js-scripts.js"></script>
<style>
.content {
max-width: 600px;
margin: auto;
}
.test{
width:200px;
text-align: center;
}
</style>
</head>
<body>
<div class="content" id="tot-op">
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<center>
<div class="content" id="tot-op">
<fieldset>
<input type="number" min="1" max="7" name="num" required>
<br><br>
<input type="submit" value="Invia" onclick="hide()">
</fieldset>
</div>
</center>
</form>
</div>
<div id="insert" style="display:none">
<?php
$test=$_POST["num"];
echo $test;
?>
</div>
</body>
</html>
And this is my script:
function hide(){
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
}
What can I do?
Add an id attribute to your form like:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" id="test-form">
Change your button definition to:
<input type="button" value="Invia" onclick="hide()">
and then, inside your hide() add the form submit action like:
function hide()
{
document.getElementById("test-form").submit();
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
}
You can always break out of php and run javascript code or manipulate HTML using conditional blocks. Below the <script> tag will be added to the document only if condition returns true.
It is similar to echo "<script>...</script>".
So, your form data gets handled and also the Javascript code runs the
way you want it.
<?php
if( isset($_POST["sButton"]) ) //I had done a mistake here
{ //start if
//close php and add script which will run only if the variable $_POST["num"] is set
?>
<script>
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
</script>
<?php
//start php again and complete the if block
$test=$_POST["num"];
echo $test;
} //end of if block
?>
Set a name for your submit button. I have used sButton here and use
if( isset($_POST["sButton"]) ). I made changes above and remove onclick. It is not required here.
<input type="submit" name="sButton" value="Invia">
I've got a really simple form that displays a single field. When you punch in a value and hit submit, it gives you a list of checkboxes. You check some and then click another button below and it displays a success/failure message.
I'm trying to convert this to a jQuery mobile app but am having nothing but problems. For example, I can pragmatically call a popup using $("#element").popup("open"); when the page first loads, but after the post when I call the popup open like above I see the URL change but no popup is visible and it's pretty much the exact same page. I also tried just posting the checkboxes to a secondary URL (/update) and then use an HTTP redirect back to the original page, but somehow jQuery Mobile is breaking that.
I've pasted the majority of the code below. If anyone can point me in the correct direction, that's all I'm looking for.
<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).on("pagecreate", function() {
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>
</head>
<body>
<div id="lookup" data-role="page">
<div data-role="header">
<h1>Lookup Order</h1>
</div>
<div data-role="content">
<?php if (validation_errors()): ?>
<div class="errors"><?=validation_errors()?></div>
<?php endif; ?>
<?php if ($this->session->flashdata('error')): ?>
<div class="errors"><?=$this->session->flashdata('error')?></div>
<?php endif; ?>
<form method="post" id="search_form" action="/search">
<label for="term">Term:</label>
<input type="number" data-clear-btn="true" name="term" id="term" value="<?=set_value('term')?>" />
<input type="submit" value="Search" />
</form>
<?php if (!empty($fish) && $fish->num_rows()): ?>
<form method="post" action="/update">
<br /><strong>Species:</strong> <?=$species?><br />
<hr />
Uncheck All / Check All<br />
<?php foreach ($fish->result_array() as $k => $f): ?>
<fieldset data-role="fishgroup">
<?php if (!$f['is_deleted']): ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" />
<?php else: ?>
<input type="checkbox" name="fish[]" id="checkbox-<?=$f['id']?>" value="<?=$f['id']?>" checked="checked" disabled="disabled" />
<?php endif; ?>
<label for="checkbox-<?=$f['id']?>">
<?php if ($f['type']): ?>
<?= $f['1'] ?> <?= $f['2'] ?> Attr: <?= $f['3'] ?> Attr: <?= $seat['4'] ?>
<?php else: ?>
<?= $f['3'] ?> <?= $f['4'] ?>
<?php endif; ?>
</label>
</fieldset>
<?php endforeach; ?>
Uncheck All / Check All<br /><br />
<input type="button" value="Update Fish(s)" id="button" />
</form>
<?php endif; ?>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
</div> <!-- end content -->
</div><!-- end page -->
</body>
</html>
Using the following prevents the click handler from being called twice but I still don't get the actual popup after the initial page load:
$(document).off("click").on("click", "#button", function() {
$(" #popupBasic").popup("open");
});
All I'm getting is #&ui-state=dialog added to the URL, and calling $("#button").popup("close"); removes that.
It might be that youre attaching same handler multiple times add
<script type="text/javascript">
$(document).on("pagecreate", function() {
$("#button").off();
$(document).on("click", "#button", function(e) {
// Do ajax stuff here
$("#popupBasic").popup("open");
});
});
</script>
I have a html form to collect name and place and after user submit the form, the out will display at bottom of the page using PHP echo
My requirement is,
hide the output div before the form submit and after user enter data and submit, I have to make output div visible to display form output using PHP echo.
Here is my HTML code:
<div class="main">
<form id="main" name="main" action="#text" method="post">
<div class="input">
<div id="name">
<div class="block">
<div class="input-quest">Your Name</div>
<div class="input-resp"><span><input class="textbox" id="nm" name="nm" type="text" value="" /></span>
</div>
</div>
</div>
<div id="place">
<div class="block">
<div class="input-quest">Your Place</div>
<div class="input-resp"><span><input class="textbox" id="pl" name="pl" type="text" value="" /></span>
</div>
</div>
</div>
</div>
<div class="submit">
<input id="generate" type="submit" name="script" value="generate" />
<input type="submit" id="clear" name="clear" value="clear" />
</div>
</form>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
</div>
It contain the PHP echo codes at output div section.
I have searched for solution in previous questions and tried below methods mentioned there:
1.Added a inline CSS tag for output div to hide it
<div id="output" style="display: none;">
<!-- echo php here -->
</div>
and added JavaScript to call function during submit
$('main').submit(function(){
$('#output').show();
});
It didn't work.
2.Tried with below JavaScript code
$('main').submit(function(e){
$('#output').show();
e.preventDefault();
});
It didn't work.
3.Removed inline CSS for output div to hide and added the same to my CSS stylesheet
<div id="output">
and in stylesheet
#output{
display:none;
}
and used below JavaScript code on submit
$('main').submit(function(){
$('#output').css({
'display' : 'block'
});
});
It didn't work.
Added a onclick function along with the form submit
and submit button code:
<input id="generate" type="submit" name="script" value="generate" onclick="showoutput()"/>
and JavaScript:
showoutput(){
$('#output').slideDown("fast");
}
and with
showoutput(){
$('#output').show();
}
It didn't work.
Please suggest a solution to do this.
I'm not sure why you need to use js/css for this at all. Just check if the variables were posted, and if they were, echo them (you'd have to set your form action to point to the same page):
<?php if (!empty($_POST['nm']) && !empty($_POST['pl'])) { ?>
<div class="output">
Hello, I am <?php echo $_POST['nm']; ?>, and I am from <?php echo $_POST['pl']; ?>
</div>
<?php } ?>
If you just want to display the name and place in div.output, without actually submitting the form, you could do:
$('#main').submit(function(e) {
e.preventDefault(); // prevent form from being submitted
$('div.output').text('Hello, I am ' + $('#nm').val() + ', and I am from ' + $('#pl').val());
});
Here's a fiddle
<?php if(isset($_POST['nm'])) { ?>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
<?php } ?>
Create a separate page to process your form using javascript/jquery (ajax), and have it return the info you want, hide the form and show the .output div.
PHP Page:
<?php
$name = $_POST['nm'];
$place = $_POST['pl'];
echo "Hello, I am ".$name." and I am from ". $place;
?>
The javascript/jquery would catch that as responseText and then use innerHTML on your .output div to put that responseText. You'd then use the JS/Jquery to hide the form and show the .output
You can actually accomplish this entirely with php. The simplest method that I would use would be to make a hidden input with a given value. Once the user submits the form, that variable will exist and you can grab it in your php.
First you need to change the entire page to .php, and echo all of your html. then in the form, set the action to the name of the page so that it will send the variables to itself and then you can deal with them on the same page.
add this to the html:
<input type='hidden' name='display' value='display' />
In your php, add:
if (isset($_POST['display']){
echo "make the div here";
}else{
//don't show the div
}