I have two buttons like "Save" and "Create". Now my question is when the page is loaded, the "Create" button should "enabled" and the "Save" button is "disabled".
Now, if I click the "Create" button then the "Save" button should be "enabled" and "Create" button should now be "disabled".
//php code start
<?php
$isSaveDisabled = false;
if(isset($_POST['save']))
{
echo 'Hello robin';
$isSaveDisabled = true;
}
if(isset($_POST['create']))
{
echo 'Byeeee robin';
}
?>
// php code ends
//bootstrap code start
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="BootStrap/css/bootstrap.min.css">
<title></title>
</head>
<body >
<div class="container jumbotron">
<form action="" method="post">
<div class="btn-group-xs">
<button type="submit" id="btn1" name="save" <?php if ($isSaveDisabled) { echo 'disabled="disabled"';}?>>Save</button>
<button type="submit" id="btn2" name="create">Create</button>
</div>
</form>
</div>
</body>
</html>
//bootstrap code ends
Try it..
//php code start
<?php
$isSaveDisabled = true;
$isCreateDisabled=false;
if(isset($_POST['save']))
{
echo 'Hello robin';
$isCreateDisabled=false;
}
if(isset($_POST['create']))
{
echo 'Byeeee robin';
$isSaveDisabled = false;
}
?>
// php code ends
//bootstrap code start
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="BootStrap/css/bootstrap.min.css">
<title></title>
</head>
<body >
<div class="container jumbotron">
<form action="" method="post">
<div class="btn-group-xs">
<button type="submit" id="btn1" name="save" <?php echo $isSaveDisabled?'disabled':''; ?>>Save</button>
<button type="submit" id="btn2" name="create" <?php echo $isCreateDisabled?'disabled':'';?>>Create</button>
</div>
</form>
</div>
</body>
</html>
//bootstrap code ends
It can be done using jQuery.
Try this:
$(document).on('click','#btn2',function(){
$(this).prop('disabled',true);
$('#btn1').prop('disabled',false);
});
Include this in your HTML
<script>
$(document).on('click','#btn2',function(){
$("#btn2").prop('disabled',true);
$("#btn1").prop('disabled',false);
});
</script>
Also, include jQuery in you html.
use a if to test if the page was submitted with create to disable create
<div class="btn-group-xs">
<?php $create,$save = ''; if(isset($_POST['create'])) {$create = 'disabled';} else {$save = 'disabled';}?>
<button type="submit" id="btn1" name="save" <?php $save?>>Save</button>
<button type="submit" id="btn2" value="create" name="create" <?php $save?> >Create</button>
</div>
Related
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 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>
I'm currently working on a website (a quiz), but have run into a somewhat strange issue where my php code is not displaying after a certain point. I'll also note that while I am a student, this is for a research project that I was given express permission from my advisor to post about.
http://zephyr.sista.arizona.edu/learn2cal/index
The issue itself is on the /quiz.php page, but that will give you server errors if you try to access it without going through the start page first.
My own code looks something like this:
<?php
require_once("./databaseAdaptor.php");
$page = '0';
if(isset($_POST["page"])) {
$page = $_POST["page"];
} else {
echo "";
$page = '1';
}
if(isset($_POST['user'])) {
$user = $_POST['user'];
} else {
echo "error";
}
echo $user;
echo $page;
?>
<!DOCTYPE HTML5>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>FOOD CALORIES</title>
<link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<div>
<h4>Calorie4Food</h4>
</div>
<article>
<center>
<h5>How many calories are in the food pictured here? </h5>
<h6>(Type a number in the box)</h6>
<!-- progress bar -->
<num>Progress Bar</num>
<label2><progress id="pro" value="<?=($page-1)*(10/3) ?>" max="100"></progress></label2>
<num id="num"><?=floor(($page-1) * (10/3)) ?></num> <num>%</num>
<br><br>
<?php
require_once("/databaseAdaptor.php");
$image = $myDatabaseFunctions->getImage(1)[0];
$imageIDArray = explode("/", $image);
$imageID = $imageIDArray[1];
?>
<img src="./<?=$image?>.jpg" alt=""/>
<section>
<form method="post" action="./reinforce.php" onsubmit="checkform()">
<input type="number" name="estimate" value="quizInput"/>
<word>cal</word>
<input type='hidden' name='start' value='<?=date('Y-m-d G:i:s')?>'>
<input type='hidden' name='imageID' value='<?=$imageID?>'>
<input type="hidden" name="page" value="<?=($page+1)?>"/>
<input type='hidden' name='user' value='<?=$user?>'>
<input id="submit" type="submit" class="button-next" value="Next" id="btn1"/>
</form>
</section>
<script type="text/javascript">
function checkform(){
if(document.getElementById('q1').value==""){
alert('Please input a number！');
document.getElementById('q1').focus();
return false;
}
}
var progressBar = document.getElementById('pro');
function updateProgress(newValue) {
progressBar.value = newValue;
document.getElementById('num').textContent=newValue;
}
</script>
<br></br>
</center>
</article>
</body>
</html>
When I attempt to load the question page, everything about the page is displaying correctly until you pass the progress bar. After that, the live page looks like this:
<!DOCTYPE HTML5>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>FOOD CALORIES</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div>
<h4>Calorie4Food</h4>
</div>
<article>
<center>
<h5>How many calories are in the food pictured here? </h5>
<h6>(Type a number in the box)</h6>
<!-- progress bar -->
<num>Progress Bar</num>
<label2><progress id="pro" value="0" max="100"></progress></label2>
<num id="num">0</num> <num>%</num>
<br><br>
I'm not sure why this is be happening or where I should begin attempting to debug this problem, any advice would be greatly appreciated!
Update: /databaseAdaptor.php is there and running correctly as far as the rest of the pages are concerned. Thanks so much for catching the second require! Can't believe I missed that.
I am trying to write a simple login code. The problem is that the code works and redirects to dashboard.php without any css and js files.
But as soon as include my header file,consisting of css and js, it stops working and gets stuck on auth_check.php.
Here is my code.
main index file ( index.php) - containing the login form
<?php include('header.php');?>
<?php
$message = $_GET['message'];
if($message == 1) {
echo '
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">
Invalid username or password.</br> ×</button>
</div>
';
}
if($message == 2) {
echo '
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">
You have successfully logged out! </br> ×</button>
</div>
';
}
?>
<div data-role="content">
<div id="loginform" > //Login form code
<form action="auth_check.php" method="post"> // form action="auth_check.php"
<div id="usernameDiv" data-role="field-contain">
<input type="text" id="name" name="username" placeholder="Username">
</div>
<div id="passwordDiv" data-role="field-contain">
<input type="password" id="password" name="password" placeholder="Password">
</div>
<div id="loginbuttonDiv" data-role="field-contain">
<button type="submit" name="submit" id="loginbutton"></button>
</div>
</form>
</div>
<?php include('footer.php'); ?>
Authorisation check (auth_check.php) (here the header(location:) doesnt work after applying js in index.php :(
<?php
include('config.php');
session_start();
include 'PasswordHash.php';
$hasher = new PasswordHash(8, FALSE);
if (!empty($_POST))
{
$username = $sql->real_escape_string($_POST['username']);
$query = "SELECT id, password, UNIX_TIMESTAMP(created) AS salt
FROM users
WHERE username = '{$username}'";
$user = $sql->query($query)->fetch_object();
if ($user && $user->password == $hasher->CheckPassword($_POST['password'],
$user->password))
{
session_register("username"); // session checker for pages
$_SESSION['username']= $username; // storing username in session
header("location: dashboard.php");
exit;
}
else
{
header("location: index.php?message=1");
exit;
}
}
?>
here is the file header.php which is causing the problem.
<?php
include('config.php');
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="custom.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-
1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<head>
My problem is that this code is display "blablabla" when I push 'submit':
<html>
<head>
</head>
<body>
<?php if (isset($_POST["text"])):{
echo $_POST["text"];
}else: ?>
<form action="" method="post" id="testform">
<input type="text" value="blablabla" name="text"/>
<input type="submit"/>
</form>
<?php endif ?>
</body>
</html>
but this second code continue to display the form even after clicking on the button and does not show "blablabla":
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
$('#testbtn').click(function() {
$.post('',{text:'blablabla'});
});
});
</script>
</head>
<body>
<?php if (isset($_POST["text"])):
echo $_POST["text"];
else: ?>
<form action="" method="post" id="testform">
<input type="button" id="testbtn"/>
</form>
<?php endif ?>
</body>
</html>
Why?
Logic, if we do an ajax post, just send the content we want to show inside the body, else show the entire page like if it was a normal form submit. The success callback inside the ajax call, will replace the body with innerHTML
<?php
function getBody() {
if (isset($_POST['text'])) {
// normally I would htmlspecialchars() this variable to disallow HTML injection
echo $_POST['text'];
}
}
if (isset($_POST['ajax'])) {
getBody();
exit();
}
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
$('#testbtn').click(function() {
$.post('',{text:'blablabla', 'ajax':1}, function(bodyData) {
document.body.innerHTML = bodyData;
});
});
});
</script>
</head>
<body>
<?php if (isset($_POST["text"])):
getBody();
else: ?>
<form action="" method="post" id="testform">
<input type="button" id="testbtn"/>
</form>
<?php endif ?>
</body>
</html>
give the page url in post
$.post(window.location, {tetx: 'blablabla'}, success: function(data) {
alert('successful.the response from server is' + data);
});