We Keep Coding

Javascript event.preventDefault() not working on Safari, but working on Chrome and Firefox

Hi, guys:
For some resaon the event.preventDefault() function not working on safari browser, but working fine on Google Chrome and Firefox. What I want to do is prevent the user to submit the form, unless they finish the google reCAPTCHA(Version 2). Please let me know how can I fix this issue. Appreciate you help.
Here is the code:
<div class="row">
<h4>
<center></center>
</h4>
<form action="http://g/r59jr" method="POST" id="form">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="firstname">First Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="First" placeholder="First Name" value="<?php echo set_value('First'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label for="firstname"> Last Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="Last" placeholder="Last Name" value="<?php echo set_value('Last'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="email">Email<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" autocomplete="email" value="<?php echo set_value('email'); ?>" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" placeholder="Phone Number" name="Phone" autocomplete="cellphone" value="<?php echo set_value('Phone'); ?>">
<span><small></small></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row top30 ">
<div class="col-sm-12">
<label for="agreeTOS">
<input type="checkbox" id="agreeTOS" name="agreeTOS" value='1' <?php echo set_checkbox('agreeTOS','1'); ?> required> I agree to the Privacy Policy<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small>
</label>
</div>
</div>
<div class="row top30 ">
<div class="col-sm-12">
<!--change-->
<div class="g-recaptcha" data-sitekey="6example.........."></div><br>
<button type="submit" value="<?php echo set_value('Submit'); ?>" class="btn btn-success btn-primary btn-lg signup submit_information_request btn-block" name="submitBtn" id="submitBtn">Sign-Up</button>
</form>
<!--change-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('#form').submit(function(event) {
var verified = grecaptcha.getResponse();
if (verified.length === 0) {
event.preventDefault();
}
});
});
</script>
</div>
</div>
</div>
</div>

open modal after form submit, i dont know ajax :(

I am trying to send data from a form to a modal to verify the data and after proced to send, but this part of the data needs the post from thr form, and this one is not working when it call the modal, I do not know how to use ajax can someone give me a way to go with this thank you
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<?php
if ($_POST) {
$amount = $_POST['precio']*100;
echo $amount;
$miObj->setParameter("DS_MERCHANT_AMOUNT",$amount);
}
?>
<form data-toggle="modal" data-target="#myModal" method="POST" action="" >
<input name="precio" id="precio" />
<input class="btn btn-info" type="submit" >
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirma tu compra</h4>
</div>
<div class="modal-body">
<div id="imagen">IMAGEN COMPRA</div>
<img src="" alt="mando">
<div class="details-area" id="detailsArea">
<h1 style="color:#007acc">Opciones Seleccionadas</h1>
</div>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="name" class="form-control" id="nombre">
</div>
<div class="form-group">
<label for="apellido">Apellido</label>
<input type="name" class="form-control" id="Apellido">
</div>
<div class="form-group">
<label for="direccion">Dirección</label>
<input type="address" class="form-control" id="direccion">
</div>
<div class="form-group">
<label for="telefono">Telefono</label>
<input type="phone" class="form-control" id="telefono">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div align="right"> <h3>Total Compra <span id="AddToCartPriceID2">&nbsp $00.00</span></h3></div>
</div>
<div class="modal-footer">
<form name="frm" action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" target="_blank" style="margin-top:10px">
<input name="DS_MERCHANT_AMOUNT" value="<?php echo $amount; ?>"/></br>
<input type="hidden" name="Ds_SignatureVersion" value="<?php echo $version; ?>"/></br>
<input type="hidden" name="Ds_MerchantParameters" value="<?php echo $params; ?>"/></br>
<input type="hidden" name="Ds_Signature" value="<?php echo $signature; ?>"/></br>
<button type="submit" class="btn btn-default" >Confirmar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="frm" method="POST">
<input name="precio" id="precio" />
<input class="btn btn-info" type="submit" value="Submit" name="submit">
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirma tu compra</h4>
</div>
<div class="modal-body">
<div id="imagen">IMAGEN COMPRA</div>
<img src="" alt="mando">
<div class="details-area" id="detailsArea">
<h1 style="color:#007acc">Opciones Seleccionadas</h1>
</div>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="name" class="form-control" id="nombre">
</div>
<div class="form-group">
<label for="apellido">Apellido</label>
<input type="name" class="form-control" id="Apellido">
</div>
<div class="form-group">
<label for="direccion">Dirección</label>
<input type="address" class="form-control" id="direccion">
</div>
<div class="form-group">
<label for="telefono">Telefono</label>
<input type="phone" class="form-control" id="telefono">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div align="right"> <h3>Total Compra <span id="AddToCartPriceID2">&nbsp $00.00</span></h3></div>
</div>
<div class="modal-footer">
<form name="frm" action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" target="_blank" style="margin-top:10px">
<input name="DS_MERCHANT_AMOUNT" value="<?php echo $amount; ?>"/></br>
<input type="hidden" name="Ds_SignatureVersion" value="<?php echo $version; ?>"/></br>
<input type="hidden" name="Ds_MerchantParameters" value="<?php echo $params; ?>"/></br>
<input type="hidden" name="Ds_Signature" value="<?php echo $signature; ?>"/></br>
<button type="submit" class="btn btn-default" >Confirmar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#frm").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $("#frm").serialize(),
url : 'url',
success : function(data){
$("#myModal").modal("show");
}
});
return false;
});
</script>

validated_form.html
<html>
<head>
<script type="text/javascript">
function validate()
{
var error="";
var name = document.getElementById( "name_of_user" );
if( name.value != "" )
{
name = name.value;
document.getElementById( "name" ).innerHTML = name;
return false;
}
}
</script>
</head>
<body>
<form method="POST" action="getdata.php" onsubmit="return validate();">
<input type="text" name="username" id="name_of_user">
<input type="submit" name="submit_form" value="Submit">
</form>
// use id=name in your model form field
<input type="text" id="name" >
</body>
</html>
=====================================
getdata.php
<?php
if( isset( $_POST['submit_form'] ) )
{
validate_data($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = strip_tags($data);
$data = htmlspecialchars($data);
$data = mysqli_real_escape_string($data);
return $data;
}
}
?>

Bootstrap form modal, post values to PHP file

I have a form on a page that allows users to update their information. When they click submit it presents a modal that asks them to enter their password to ensure it's them. However, once they submit the modal it doesn't POST the values to the .php to update their record.
Form and Modal
<div class="container">
<form id="updateInfo" action="update_user.php" method="POST">
<div class="form-group">
<label for "uid">User ID </label>
<input name="uid" id="uid" type="text" class="form-control" value="<?= $_SESSION['uid'] ?>" disabled>
</br>
<label for "firstname">First name </label>
<input name="firstname" id="firstname" type="text" class="form-control" value="<?= $_SESSION['firstname'] ?>">
</br>
<label for "lastname">Surname</label>
<input name="lastname" id="lastname" type="text" class="form-control" value="<?= $_SESSION['lastname'] ?>" >
</br>
<label for "email">Email </label>
<input name="email" id="email" type="email" class="form-control" value="<?= $_SESSION['email'] ?>" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" title="Email must be in a valid format.">
</br>
<label for "username">Username</label>
<input name="username" id="username" type="text" class="form-control" value="<?= $_SESSION['user'] ?>" >
<span id="msg_username"></span>
</br>
</div>
<button class="btn btn-default" id="submit" type="button" data-toggle="modal" data-target="#myModal" >Submit</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter Password</h4>
</div>
<div class="modal-body">
<label for "password">Password</label>
<input name="password" id="password" type="password" class="form-control">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" action="update_user.php" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
PHP file
<?php
require_once 'config.php';
$query = $conn->prepare("UPDATE users SET firstname = :firstname,lastname = :lastname,username = :username ,email = :email WHERE uid = :uid");
$query->bindParam(':firstname', $_POST['firstname']);
$query->bindParam(':lastname', $_POST['lastname']);
$query->bindParam(':username', $_POST['username']);
$query->bindParam(':email', $_POST['email']);
$query->bindParam(':uid', $_POST['uid']);
$result = $query->execute();
if($result)
{
echo "<p>Thank you. Your account has been registered.</p>";
echo $_POST['firstname'];
} else {
echo "<p>Sorry but there was a problem registering your account. Please try again.</p>";
}
?>

You should either wrap the update user button in a form or replace the action attribute by the attribute formaction.
<div class="modal-footer">
<button type="submit" class="btn btn-default" formaction="update_user.php" data-dismiss="modal">Submit</button>
</div>
See documentation of the formaction attribute here or here

Toggling Bootstrap modal from PHP trigger

Good day! I'm trying to create modal for edit purposes. That means that it must be filled with retrieved data by specific ID. The problem is that it doesn't work.
Link used to call PHP edit function:
<span class="glyphicon glyphicon-edit"></span>
PHP edit function:
if (isset($_GET['edit'])) {
$edit = httpGet(ROOT . "/API.php?getId=" . $_GET['edit']);
?><script type="text/javascript">
$('#editId').modal('show');</script>
<?php
}
"editId" modal:
<div id="editId" class="modal fade" tabindex="1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="text-center">Edit Transaction</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block" action="API.php" method="post">
<div class="form-group">
<input type="text" id="id" name="id" class="form-control input-lg" placeholder="ID" value="<?php echo $edit[0]['id']; ?>">
</div>
<div class="form-group"> <select class="form-control" id="type" name="type" placeholder="Transaction type" value="<?php echo $edit[0]['type']; ?>">
<option value="withdaw">Withdraw</option>
<option value="deposit">Deposit</option>
</select></div>
<div class="form-group">
<input type="text" id="sum" name="sum" class="form-control input-lg" placeholder="Sum" value="<?php echo $edit[0]['sum']; ?>">
</div>
<div class="form-group">
<select class="form-control" id="currency" name="currency" placeholder="Currency" value="<?php echo $edit[0]['currency']; ?>">
<option value="ILS">ILS</option>
<option value="USD">USD</option>
</select></div>
<div class="form-group">
<input type="text" id="transaction" name="transaction" class="form-control input-lg" placeholder="Transaction ID" value="<?php echo $edit[0]['transaction']; ?>">
</div>
<div class="form-group">
<input type="text" id="buyer" name="buyer" class="form-control input-lg" placeholder="Buyer" value="<?php echo $edit[0]['buyer']; ?>">
</div>
<div class="form-group">
<input type="text" id="email" name="email" class="form-control input-lg" placeholder="Email" value="<?php echo $edit[0]['email']; ?>">
</div>
<div class="form-group">
<input type="text" id="invoice" name="invoice" class="form-control input-lg" placeholder="Invoice" value="<?php echo $edit[0]['invoice']; ?>">
</div>
<div class="form-group">
<input type="text" id="date" name="date" class="form-control input-lg" placeholder="Date" value="<?php echo $edit[0]['date']; ?>">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" type="submit" value="updateId" name="updateId">Update Payment</button>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button type="button" class="btn btn-default btn-lg btn-block" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

As suggested by Shukla you have to use $(document).ready(function{}); ie:
<script type="text/javascript">
$(document).ready(function{
$('#editId').modal('show');
});
</script>

Model is not appearing because function is called before html element loaded on the page. Either use ajax or use document.ready function.

Keep me logged in php function using modal dialog login form

I want to do is when I check the checkbox button in my dialog box the email and the password that I've typed on it will be saved and redirect to profile.php.
My problem is it doesn't work and I have an error in the inputbox that says:
Undefined index: unm and Undefined index: pwd
Does anyone here can help me with my problem?
PHP:
<?php
if(isset($_POST['login'])) {
if(isset($_POST['chkbox'])) {
setcookie("unm",$_POST['email'],time()+3600);
setcookie("pwd",$_POST['password'],time()+3600);
}
?>
<script type="text/javascript">
window.location="profile.php";
</script>
<?php
}
?>
HTML:
<a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-user"></span> Login</a>
<div class="container">
<div class="row">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">PLEASE ENTER YOUR EMAIL ADDRESS AND PASSWORD TO LOG IN.</h5>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="text" name="email" value="<?php echo $_COOKIE['unm'] ?>" class="form-control" placeholder="Enter Email Address..." />
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" name="password" value="<?php echo $_COOKIE['pwd'] ?>" class="form-control" placeholder="Enter Password..." />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="checkbox" name="chkbox" value="staylogged" class="checkbox-inline" />
<label> Keep me logged in</label> <b>|</b>
Forgot your password?
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="login" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Login</button>
<button type="button" id="show_signup_md" class="btn btn-info" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-list-alt"></span> Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

First check if $_COOKIE['pwd'] or $_COOKIE['unm'] set at the html before echo them:
if(isset($_COOKIE['pwd']) && !empty($_COOKIE['pwd'])){
$pwd = $_COOKIE['pwd'];
}else{
$pwd = '';
}
//same for unm
if(isset($_COOKIE['unm']) && !empty($_COOKIE['unm'])){
$unm = $_COOKIE['unm'];
}else{
$unm = '';
}
then the input should be :
<input type="text" name="email" value="<?php echo $unm ?>" class="form-control" placeholder="Enter Email Address..." />
//same for pass
<input type="password" name="password" value="<?php echo $pwd ?>" class="form-control" placeholder="Enter Password..." />
Next thing don't store user details at cookies! . if do so use hashed string.