I'm trying to disable a submit button when I get some trigger from the database that tells me I should disable it, I added some code in the echo line in PHP but it didn't work, what am I doing wrong?
PHP CODE
$tries= CCL::Triescount($userip)->NumofTries;
if ($tries > 2 ) //Check wheter they have tried more than 2 times then block them
{
$msg = "More than 2 attempts, block user";
echo '<input type="submit" disabled="disabled" />';
}
else
{
$tries++;
$msg = "Less than 2 attempts";
CCL::Updatetries($userip,$tries,0);
//insert into the DB
}
HTML FORM
<div class="ui-body ui-body-c ui-corner-all">
<h1>Forgot Password</h1>
<form>
<label for="emailpassdlbl"> Please enter the e-mail associated with your account, and a new auto-generated password will be sent to this e-mail account.</label>
<input type="text" id="email"><BR>
<div class="right">
<input type="submit" data-inline="true" value="Submit" disabled="disabled">
</div>
</form>
<br/>
<div data-role="popup" class="ui-body ui-body-c ui-corner-all">
<h2 id="result"></h2>
OK
</div>
If you're changing the entire code with PHP to disable it, why not remove the submit functionality altogether?
For example:
if ($tries > 2 ) //Check wheter they have tried more than 2 times then block them
{
$msg = "More than 2 attempts, block user";
echo '<button type="button" disabled" />';
}
As you can see we have actually removed the type="submit" and replaced it with type="button" it should still look like the same button however it wont submit the form (in addition to the disabled attribute).
Related
I have a page that call "plans.php" and a page that call "register.php". In "plans.php" page i have the code below:
<?php
session_start();
$_SESSION['quarterly'];
$_SESSION['annual'];
?>
**Quarterly submit button**
<form method="post" action="register.php" >
<input type="hidden" name="quarterly" value="">
<input type="submit" class="btn btn-success btn-lg" href="register.php" name="quarterly" value="Quarterly Plan" />
</form>
**Anual submit button**
<form method="post" action="register.php" >
<input type="hidden" name="annual" value="">
<input type="submit" class="btn btn-success btn-lg" href="register.php" name="annual" value="Annual Plan" />
</form>
And in "register.php" page i have the code below:
<?php session_start(); ?>
<?php
if (isset($_SESSION['quarterly'])) {
echo '<div class="alert alert-success" role="alert">You selected Quarterly Plan - CHANGE</div>';
}
if (isset($_SESSION['annual'])) {
echo '<div class="alert alert-success" role="alert">You selected Annual Plan - CHANGE</div>';
}
?>
When user click on quarterly or annual submit button in plans.php page, the register.php page display 2 Bootstrap alerts instead one alert related with user click and, in this same page, when user refresh register.php page, both of alerts continue appear.
I've also tried inserting the code below to see if terminating one of the sessions only shows one alert instead of two but no success:
<?php
if (isset($_SESSION['quarterly'])) {
echo '<div class="alert alert-success" role="alert">You selected Quarterly plan - CHANGE</div>';
session_unset('annual');
}
if (isset($_SESSION['annual'])) {
echo '<div class="alert alert-warning" role="alert">You selected Annual plan - CHANGE</div>';
session_unset('annual');
}
?>
How can i show just one alert without this alert disappear when the same page were refreshed?
The problem is that you are setting those $_SESSION values, so your session will contain them. The solution is to check which of those $_POST is containing via isset. If you want to store this into the session, then you can override the value in $_SESSION for the one which was posted and remove the other.
Simplifying your code.... Try something like that.
Make it simple.
plans.php
<form method="post" action="register.php" >
<input type="submit" class="btn btn-success btn-lg" name="submit" value="Quarterly Plan" />
</form>
<form method="post" action="register.php" >
<input type="submit" class="btn btn-success btn-lg" name="submit" value="Annual Plan" />
</form>
register.php
session_start();
if(isset($_POST['submit'])){
$_SESSION['plan'] = $_POST['submit'] ;
}
if (isset($_SESSION['plan'])){
echo '<div class="alert alert-success" role="alert">You selected '.$_SESSION['plan'].' - CHANGE</div>';
}else{
echo '<div class="alert alert-success" role="alert">You don\'t have any plan, Please - Select</div>';
}
Good programmer always avoid to use much If_Else, Loops, and unnecessary code.
I want to make Login page with PHP.
And want to use button but it didn't works.
and it looks like just refresh the page.
I tried button tag in the form.
How can I make this works??
<?php
include "login.php";
?>
<form method="post" id="sign">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="email" name="user_mail" id="user_mail" value="<?php echo addslashes($_POST['user_mail'] ?? '') ?>">
<label class="mdl-textfield__label" for="user_mail">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" name="passcode" id="passcode" value="<?php echo addslashes($_POST['passcode'] ?? '') ?>">
<label class="mdl-textfield__label" for="passcode">Password</label>
</div>
</form>
//this <input> works
<input type="submit" name="signup" form="sign"/>
//I want to use this <button>
<button type="submit" name"signup" form "sign" formmethod="post"></button>
<?php
if ($error ?? '') {
echo addslashes($error);
}
login.php
if ($_POST['signup'] ?? '') {
$error = '';
if (!$_POST['user_mail']) $error .= "<br />Please enter email";
else if (!filter_var($_POST['user_mail'], FILTER_VALIDATE_EMAIL)) $error .= "<br />Please enter valid email";
if (!$_POST['passcode']) $error .= "<br />Please enter password";
else {
if (strlen($_POST['passcode']) < 8) $error .= "<br />Please enter a password more than eight";
if (!preg_match('`[A-Z]`', $_POST['passcode'])) $error .= "<br />please least one capital letter";
}
if ($error) $error = "there were errors:" . $error;
<button> means put a button on the page and execute whatever is in the onclick method. <submit> submits a form.
If you want a button to sumbit your form, use the onclick method of the button to do it. Why can't you use submit, though?
See here, they use a link <a onclick='...' but you can do the same for your button: How to submit a form with JavaScript by clicking a link?
As #Arun says below, you can use:
<button type='submit'> inside your form, too. There are lots of ways to do things, so my only advice on top of this is to be consistent. I use input out of habit, and that way I don't have a bunch of mixed conventions throughout my code.
If you want to submit a form on button click, add click event of button using jquery and submit a form like:
Html:
<button type="submit" name"signup" id="btn_submit" value="submit" >Submit</button>
Jquery:
$("#btn_submit").click(function() {
$("#sign").submit(); // submit a form
});
You need to make 2 changes:
Add action attribute
Move your button element inside the form. You can't expect any button on the page to submit your form. It must be inside the form, to which it is associated.
<form method="post" id="sign" action="form-destination.php">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="email" name="user_mail" id="user_mail" value="<?php echo addslashes($_POST['user_mail'] ?? '') ?>">
<label class="mdl-textfield__label" for="user_mail">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" name="passcode" id="passcode" value="<?php echo addslashes($_POST['passcode'] ?? '') ?>">
<label class="mdl-textfield__label" for="passcode">Password</label>
</div>
<button type="submit" name"signup" form "sign" formmethod="post"></button>
</form>
<?php
if ($error ?? '') {
echo addslashes($error);
}
?>
I think you need to put a action on the form element:
<form method="post" id="sign" action="login.php">
i don't know PHP so i might be wrong.
I need one help.I need to totally remove the submit button after submit the form and when it will be submitted the button will display to user.I am explaining my code below.
<form name="billdata" id="billdata" enctype="multipart/form-data" method="POST" onSubmit="javascript:return checkForm();" action="complain.php">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px"> Name :</span>
<input type="text" name="u_name" id="name" class="form-control" placeholder="Add Name" onKeyPress="clearField('name');">
</div>
<input type="submit" class="btn btn-success" name="complainSubmit" id="addProfileData" value="Submit"/>
</form>
complain.php:
require_once("./include/dbconfig.php");
if(isset($_REQUEST['complainSubmit']))
{
// ......data is collecting here....
}
when data are submitted successfully the below part is executing.
<script type="text/javascript">
var phpVar = "<?php echo $_GET['success'];?>";
//console.log('php',phpVar=='');
if(phpVar == 1 && phpVar!=''){
alert('Submitted successfully.');
//var subButton=document.getElementById('addProfileData');
//subButton.disabled=false;
}
else if(phpVar == 0 && phpVar!=''){
alert('Unable to add.\\nTry again.');
}
else{
// nothing
}
</script>
<script>
function checkForm(){
var s=document.billdata;
if(s.u_name.value==''){
alert('Please enter name');
s.u_name.focus();
s.u_name.style.borderColor = "red";
return false;
}
}
</script>
Here i need to button hide when the data is going to submit and it will again display after the submit.Please help me.
A javascript code such as:
document.getElementById("your_div").innerHTML = "";
will erase the content of your div.
So, byt tagging the entire form, then erasing its contents, you can "hide" it.
Why you dont add a hide CSS-Selector or remove it by checking via if-statement?
CSS-Version:
<input type="submit" class="btn btn-success <?php ($isSubmitted ? ' hideme' : '')?>" name="complainSubmit" id="addProfileData" value="Submit">
Except a new CSS-Selector: .hideme { display:none }
Via PHP/Template:
html...
<?php if(!$isSubmitted) : ?>
<input type="submit" class="btn btn-success" name="complainSubmit" id="addProfileData" value="Submit">
<?php endif; ?>
html...
Dont forget: You dont need close input html-tag: <input/> just <input>
And what is wrong to hide the button via JS?
document.getElementById("addProfileData").style.display = "none";
UPDATE:
Prompt hiding after clicking:
<button onclick="javascript:this.style.display='none'">
Submit Button
</button>
in your example:
<input onclick="javascript:this.style.display='none'" type="submit" class="btn btn-success" name="complainSubmit" id="addProfileData" value="Submit"/>
I am new with php, but I have already made a registration script that works fine. But the problem is every time I press the submit button to check my error, I'm going to a new page.
My question is how I make that error comes on the same page?
The code I am useing for the html form.
I want the error display in the error div box that I made Any idea ?
<div id="RegistrationFormLayout">
<h1>Registration Page</h1>
<div id="ErrorMessage"></div>
<form action="script/registration.php" method="post">
<label for="Username">Username</label>
<input type="text" name="Regi_username">
<label for="FirstName">FirstName</label>
<input type="text" name="Regi_Firstname">
<label for="LastName">LastName</label>
<input type="text" name="Regi_Lastname">
<label for="EamilAddress">Regi_EmailAddres</label>
<input type="text" name="Regi_EmailAddres">
<label for="Password">Password</label>
<input type="password" name="Regi_password">
<button type="submit" value="Submit" class="Login_button">Login</button>
</form>
</div>
If I understand correctly, you want form validation errors there. This is a very common pattern, and the simple solution is to always set a form's action attribute to the same page that displays the form. This allows you to do the form processing before trying to display the form (if there are $_POST values). If the validation is successful, send a redirect header to the "next step" page (with header()).
The basic pattern looks like this (in very very simplified PHP)
<?php
if(count($_POST)) {
$errors = array();
$username = trim($_POST['Regi_username']);
if(empty($username)) {
$errors[] = 'username is required';
}
if(count($errors) == 0) {
header('Location: success.php');
die();
}
}
<ul class="errors">
<?php foreach($errors as $error) { ?>
<li><?php echo $error;?></li>
<?php } ?>
</ul>
I have a form which I want to submit, so when I click on submit it goes to the selectorpage.php and finds the selected function type e.g. login in this, which further calls the controller to execute the function. Issue I have is that there is a function called validateForm() in js, as soon as I click the submit button, it goes to the selectorPage.php. I wanted to stop the form submission, perform validation through js and then submit the form from there, I used onsubmit = return false; in form tag but it just blocks the form of doing anything further. And I also don't know how to redirect the form to the selectorPage if it somehow works in js. So anybody would like to give me an idea how to submit form from js and then redirect that page to selectorPage.php. Thanks
<form method="post" action="selector.php?type=login" id="login" id="loginForm">
<div class="row">
<div class="offset1 span1">
<div class="lbel">
<label class="control-label" for "loginName">
Username/Email
</label>
</div>
<div class="lbl_inpuCnt">
<input type="text" class="input-xlarge" id="loginName"
name="loginName" maxlength="50"/>
</div>
<div id="usernameError"> </div>
<div class="lbel">
<label class="control-label" for="loginPassword">
Password
</label>
</div>
<div class="controls">
<input type="password" class="input-xlarge"
id="loginPassword" name="loginPassword"
maxlength="50"/>
</div>
<div id="passwordError"> </div><br/>
</div>
</div>
<div style="margin-left: 55px;">
<input class="btn" style="width: 80px;" type="reset"
name="reset" value="Reset"/>
<input class="btn" style="width: 80px;" type="submit"
name="submit" value="Login" onclick="validateForm();"/>
</div>
</form>
this is the javascript according to the code above
function validateForm(){
form = document.forms['loginForm'];
if(document.getElementById('loginName').value == "")
document.getElementById('usernameError').innerHTML = 'Invalid username or email';
else{
document.getElementById('usernameError').innerHTML = " ";
form.submit();
}
} //suppose it for the email validation only for the time being
you could try
<form ... onsubmit="return validateForm();"
in the validateForm() function use
return true / false
depending if errors are found.
Here is the canonical way using inline event handling - see further down how it could be made unobtrusive. Also only have ONE id on the form tag, also NEVER call anything submit in a form it is a reserved word and will block submitting by script (which is what you tried to do)
<form id="loginform" ... onsubmit="return validate(this)">
<div style="margin-left: 55px;">
<input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/>
<input class="btn" style="width: 80px;" type="submit" value="Login" />
</div>
</form>
this is the javascript
function validateForm(form){ // passing form object
document.getElementById('usernameError').innerHTML = ""; // reset
if (form.loginName.value == "") {
document.getElementById('usernameError').innerHTML = "Invalid username";
return false;
}
return true;// allow submission
}
Alternative
<form id="loginform" ..... No event handler here ...>
Script:
window.onload=function() {
document.getElementById("loginform").onsubmit=function() {
document.getElementById('usernameError').innerHTML = ""; // reset
if (this.loginName.value == "") { // notice the "this"
document.getElementById('usernameError').innerHTML = "Invalid username";
return false;
}
return true;// allow submission
}
}
I've had similar issues to this in the past myself.
When you click the 'Login' button of your form, you are triggering two separate events - Calling of the 'validateForm();' javascript function, and submission of the form itself. The problem here, is that submitting the form involves the browser sending an outbound request back to the form target, and to my knowledge, there is no way, using javascript, to kill a request event once it has been triggered.
Using 'onsubmit=return false;', likely, is doing exactly what it is supposed to do - Exiting the current javascript scope (and therefore preventing further javascript associated to that particular event from executing). However, unfortunately, the submission of the form itself, while possible to trigger and control via javascript, is not actually handled by javascript and is not a javascript function itself.
What I've found, in my experiences, to be the best solution, is to use the 'button' type input instead of the 'submit' type input - Both 'submit' and 'button' appear as buttons, but 'button' doesn't actually have any default inherent associated event action (therefore, doesn't actually do anything when you click on it) - What this means, is that, via event handlers (such as 'onclick', as you've done), you are able to entirely control what happens when a user clicks on a 'button'.
You haven't included your 'validateForm();' javascript function here, so I don't know what it contains, but, if it doesn't already do so, I'd include code to submit the form via that javascript function, submitting the form once validation has been successful (or returning some sort of human readable error if validation fails) - That combined with using 'button' instead of 'submit' should solve your problem.
Hope this helps. :)
Edit: Thought of this shortly after making my initial reply. Some browsers will process events handlers such as 'onclick' prior to submitting forms via the submit input type; However, I've found that certain older browsers do not do this currently (thus context of my above post). For newer browsers that honour the results of event handlers processed prior to form submission, it should be possible to prevent the second event (form submission) from occurring at all if validation fails; However, not all browsers honour these results, and I've found that some will continue to submit the form regardless of those results.
well thanks u all, so finally I found the solution by your ideas here is what I have done
rather putting return formvalidate(); function I put it in submit onclick event and it run like charm... thanks
<div style="margin-left: 55px;">
<input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/>
<input class="btn" style="width: 80px;" type="submit" name="submit" value="Login" onclick="return validateForm();"/>
</div>
this is the javascript
function validateForm(){
var form = document.forms['loginForm'];
if(document.getElementById('loginName').value == "")
document.getElementById('usernameError').innerHTML = 'Invalid username or email';
else{
form.submit();
}
return false;
}