Could not show the modal after if condition - javascript

I have a problem regarding bootstrap modal: I have an input box and a button, in the input box, the user should type their code, then click the check button:
<form class="form-inline" action="" method="post">
<div class="form-group">
<input type="text" class="form-control input-sm input-inverse" name="appcode" required="" data-form-field="appcode" placeholder="Insert Your Code"></div>
<div class="buttons-wrap">
<button name="Xcheck" class="btn btn-secondary display-4 " type="submit" role="button" data-toggle="modal" data-target="#modalID">Check</button>
</div>
</form>
When the button is clicked, it will run a PHP code in the same page, also check either the inserted code exists in the database or not.
Here is the php code:
<?php
$con= mysqli_connect("localhost", "root", "");
mysqli_select_db($con, "cobathesis");
if (isset($_POST['Xcheck'])){
$appcode= $_POST['appcode'];
$check=mysqli_query($con,"select * from applicantdata where appcode='$appcode'");
$checkrows=mysqli_num_rows($check);
if($checkrows>0) {
// the modal should be loaded here
}else{
echo "<script>alert('You Inserted either the wrong Code or the Code is unregistered'); location.href='';</script>";
}
}
?>
Is it possible to use the same button (check button) to post the value and load the modal at the same time?
Thank you for your response.

You could use something like
$('#myForm').on('submit', function(e){
$('#myModal').modal('show');
e.preventDefault();
});
CodePen by Hana Piers

Related

prevent result, show through AJAX, after reload browser

I have a insert query through ajax. It is working correctly. But when I reload browser then result disappears from div section and if I insert form through ajax again then result is showing.
I have a file first.php (in which, form is present), a AJAX code and a firstcall.php where query will be execute.
My first.php (html form) is:
<form class="reservation-form mb-0" action="" method="post" autocomplete="off">
<input name="name1" id="name1" class="form-control" type="text" placeholder="Enter Name" required aria-required="true">
<input name="age" id="age" class="form-control" required type="number" placeholder="Enter Age" aria-required="true">
<input type="checkbox" id="checkbox" class="checkbox1" name="namec[]" value="<?php echo $value['id']; ?>" >
<input type="button" class="pull-right btn btn-warning" value="Submit" id="submit">
</form>
Here data should be display:
<div class="col-md-5">
<div class="panel panel-primary" id="showdata">
<!-- Here is the results, but when reload browser then result disapper-->
</div>
</div>
AJAX is:
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var name1 = $("#name1").val();
var age = $("#age").val();
var chkArray=[];
$('.checkbox1:checked').each( function() {
chkArray.push($(this).val());
} );
var selected;
selected = chkArray.join(',') ;
if(selected.length > 1){
$.ajax( {
url:'firstcall.php',
type:'POST',
data:{name1: name1,age: age,namec: chkArray},
}).done(function(data){
$("#showdata").html(data);
});
}
else{
alert("Please at least one of the checkbox");
}
});
});
</script>
firstcall.php is:
<div class="panel panel-primary" id="showdata">
<?php
foreach($_POST['namec'] as $selected){
echo $selected;
$_SESSION['name1']=$_POST["name1"];
$_SESSION['age']=$_POST["age"];
echo $name1=$_SESSION['name1'];
echo $age=$_SESSION['age'];
$query=mysql_query("insert into patient_details (p_name,p_age,g_number) values ('$name1','$age','$selected')") or die(mysql_error());
}
?>
First of all fix your query to use MySQLi, instead of MySQL, check this or the PHP manual
Also don't ever add direct $_POST or $_GET variables into your mysql query, filter them first using mysqli_real_escape.
$name1 = mysqli_real_escape($link, $_POST["name1"]);
$age = mysqli_real_escape($link, $_POST["age"]);
After that, to show the data when the page reloads, you need to load the data with the page, easiest way to do that is just add in your HTML PHP tags with an echo command inside, adding your variables.
If I understand your question correctly, you want the Ajax result to also show on page load?
Right now you only execute the JS after a click (so on page load/relaod you will just see the html), you might want to execute it after page load aswell (so execute the script without the .click)
You could create a function once, and call it when the page is ready and on click.

php form submission only once per session

I am looking to enable only one submission of form per session. I have tried to disable submit button but this on click function is nothing for bots so extra layer of single submission per session is what i think can save somewhat from bots
OR
Create token for each submission to make submission more secure and unique
Which one is better and how to implement so any user (bots) can not submit same form twice
Code I have is
<form role="form" method='post' action='index.php' id='cme'>
<input type="hidden" name="val" value="<?php echo $val ?>" />
<fieldset>
<div class="form-group">
<center><div class="g-recaptcha" data-sitekey="sitekey"></di</center>
</div>
<div class="row">
<center>
<input type="submit" name="claim" class="btn btn-lg btn-success btn-block" value="Claim Now" id="claim" onclick="setTimeout(disableFunction, 1);">
</center>
</div>
</fieldset>
</form>
Submit section
if(isset($_POST['claim'])) {
$recaptcha = $_POST['g-recaptcha-response'];
if(!empty($recaptcha)) {
# Use the recaptcha function here
$resp = getGoogleRecaptcha();
if($resp['success']) {
header('Location: index.php');
# Capture value from the form submit
$bonval = $_POST['bonval'];
# Insert normally
$db->fetchVal("insert into log (`user_id`,`amount`) values (?,?)", array($id, $bonval));
}
}
else { ?>
<div class="overlay"><div class="popup" style="background:red;">
<h2>Opps</h2>
<a class="close" href="#">×</a><br/>
<div><center><span class="blink_me">You missed it</span></center></div>
</div></div>
<?php }
}
Now issue is form opens on popup and user keeps clicking and score keeps adding as with each click session view is +1
Can you please guide me about this issue solving so one click and only one submission
I think it can be better to do form submission through javascript so on submit function can be controlled more wisely to kill popup on more than one submit click....am i right, if yes plz guide this way
Below is one way of doing this using sessions.
Basically I am generating a token and storing it in session if its not already in session. I am also including the same in the form, which can be cross checked (in index.php) to see if it matches with the session variable or not.
<?php
if(! isset($_SESSION['cme-token']) ){
$cme_token = rand(11111, 99999);
$_SESSION['cme-token'] = $cme_token;
} ?>
<?php if (!isset($_SESSION['cme'])){ ?>
<form role="form" method='post' action='index.php' id='cme'>
<input type="hidden" name="token" value="<?php echo $cme_token ?>" />
<fieldset>
<div class="form-group">
<center><div class="g-recaptcha" data-sitekey="sitekey"></di</center>
</div>
<div class="row">
<center>
<input type="submit" name="claim" class="btn btn-lg btn-success btn-block" value="Claim Now" id="claim">
</center>
</div>
</fieldset>
</form>
<? } else {
<div>ALREADY CLAIMED!</div>
}?>
In index.php you can do additional check just to be sure that the token was not modified in between by user like below.
// INDEX.PHP
<?php
if($_POST['token'] == $_SESSION['cme-token']) {
//PROCESS THE FORM
} else {
// IGNORE THE FORM SUBMIT AS IT DOESN'T CARRY PROPER TOKEN
}
?>

Input field with two buttons

I have a form with one input field, but two buttons. The idea is to check in or out with a code. The process comes to the php file, where it ends with just a blank page. What´s wrong?
EDIT
I changed "btn_in" to "inputAnst_nr" And now it works to reg in. BUT, how to i fetch wich button is pressed?
HTML
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post" action="php/usr_time_reg.php">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in" class="btn btn-lg btn-info primary col-sm-offset-1" type="submit">In</button>
<button id="btn_out" name="btn_out" class="btn btn-lg btn-danger primary col-sm-offset-1" type="submit">Ut</button>
</div>
</form>
JS
$(document).ready( function () {
$("#btn_in").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
$("#btn_out").on('click', function() {
$("#usr_stamp").attr("action", "php/usr_time_reg.php");
});
});
PHP
//Check if POST is empty
if(!empty($_POST)){
//Check if POST is "inputAnst_nr"
if(!empty($_POST['inputAnst_nr'])){
//Put POST_btn_in in variable
$posted_anst_nr = $_POST['inputAnst_nr'];
You could just use the same name attribute value for both buttons, just make sure you designate the appropriate value. Example:
<?php
if(isset($_POST['btn_in_out'])) {
$status = $_POST['btn_in_out']; // In or Out depending on which one you clicked
echo $status;
}
?>
<form class="form-inline well" id="usr_stamp" name="usr_stamp" method="post">
<div class="control-group">
<input id="inputAnst_nr" name="inputAnst_nr" class="form-control input-lg" placeholder="Ange Anst. nr" type="tel">
<button id="btn_in" name="btn_in_out" type="submit" value="In">In</button>
<button id="btn_out" name="btn_in_out" type="submit" value="Out">Ut</button>
</div>
</form>
Sample Output

If errors in form, then dialog box should stay open when form is submit

I have a sign up dialog box, which has a login form in it.
I have done some basic form validation in the same file as the form, if errors exist then appropriate messages are echo'd out underneath the fields when the form is submit.
However when the form is submit, the page is refreshed and the dialog box closes, it has to be opened again for the user to see the errors. This is not very appropriate and I want to somehow keep the dialog box open on refresh, only IF errors exist in the form validation.
There must be a way around this but I don't quite know how to implement this.
Here is my code (index.php):
// PHP validation
$fornameErr = $surnameErr ="";
$forname = $surname="";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["forename"])) {
$fornameErr = "Missing";
}
else {
$forename= $_POST["forename"];
}
if (empty($_POST["surname"])) {
$surnameErr= "Missing";
}
else {
$surname= $_POST["surname"];
}
}
// Link which opens up the dialog box by calling the 'check_domain_input()' function
<div id="clickable" onclick="check_domain_input()">Or sign up</div>
// The form in the dialog box
<div id="dialog" title="Sign up" style="display:none">
<center>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div align="center">
<br/>
<input type="text" class="input" name="forename" size="20" maxlength="40" placeholder="Forename" value="<?php echo htmlspecialchars($forename);?>"/>
<span class="error"><?php echo $fornameErr ;?></span>
<br/>
<input type="text" class="input" name="surname" size="20" maxlength="40" placeholder="Surname" value="<?php echo htmlspecialchars($surname);?>"/>
<span class="error"><?php echo $surnameErr ;?></span>
<br/>
<input type="submit" value ="Sign up" class="submit"/>
<br/>
<br/>
</div>
</form>
</center>
</div>
<!-- Dialog box function -->
<script>
function check_domain_input()
{
$( "#dialog" ).dialog({modal: true});
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0)
{
return true;
}
$( "#dialog" ).dialog({modal: true});
return false;
}
</script>
You could call your check_domain_input method as the page loads if you've got an error to show, like this:
<script>
function check_domain_input()
{
...
}
<?php if (!empty($fornameErr) || !empty($surnameErr)) : ?>
$(function() {
check_domain_input();
});
<?php endif; ?>
</script>
You can use onsubmit="return validateFunction()" as shown at this link.
You can have PHP set a JavaScript variable that your jQuery onload function reads and reacts to.
You can use AJAX instead of form submissions. With AJAX, you can simply use the AJAX call's error function to react to bad validation.

Cannot submit form insider javascript popover with php

I am trying to submit a bootstrap popover form with php, however it is not populating the table. any suggestions?
javascript:
<script type="text/javascript">
$(document).ready(function() {
$("[rel='android']").popover({
html: 'true',
content : '<div id="popOver-input"><p id="coming-soon">Coming March 2014</p><p>Be the first to know when buddyTruk goes live!</p><form class="form-horizontal" action="temp.php" method="post"><input type="text" class="form-control input-lg" name="emailFuture" placeholder="Email"/><button class="btn btn-success btn-lg" name="comingSoon" type="submit" value="comingSoon">Submit</button></form></div>'
});
});
php:
<?php
if (isset($_POST['comingSoon']) && strlen($_POST['email'])>0)
{
$coming_soon=$_POST['emailFuture'];
mysql_connect("*****", "****", "*****") or die(mysql_error());
mysql_select_db("buddyTruk") or die(mysql_error());
mysql_query("ALTER TABLE coming_soon ADD PRIMARY KEY (email)");
mysql_query("REPLACE INTO `coming_soon` VALUES ('$coming_soon')");
}
?>
Because there is no input with name email but you trying : $_POST['email'], So, change the name:
<script type="text/javascript">
$(document).ready(function() {
$("[rel='android']").popover({
html: 'true',
content : '<div id="popOver-input"><p id="coming-soon">Coming March 2014</p><p>Be the first to know when buddyTruk goes live!</p><form class="form-horizontal" action="temp.php" method="post"><input type="text" class="form-control input-lg" name="email" placeholder="Email"/><button class="btn btn-success btn-lg" name="comingSoon" type="submit" value="comingSoon">Submit</button></form></div>'
});
});
The name of your email input in the form is emailFuture. So modify the conditional:
if (isset($_POST['comingSoon']) && strlen($_POST['emailFuture'])>0)
{
// insert
}
I recommend checking that $_POST['emailFuture'] is set also, just in case something goes wrong you don't raise an unnecessary exception. A good substitute for isset() && strlen() > 0 is empty(), so: (isset($_POST['comingSoon']) && !empty($_POST['emailFuture']))

Categories

Resources