Toggling Bootstrap modal from PHP trigger - javascript

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.

Related

Event focus on select with Materialize

I want to add a class when a select has event select, this is my code:
$("form").find("input,select").on('focus',function(){
$(this).addClass("focus");
});
$("form").find("input,select").on('blur',function(){
$(this).removeClass("focus");
});
This is my HTML:
<form id="formEdit" method="post" action="<?=current_url();?>" enctype="multipart/form-data">
<div class="form-pad">
<div class="row">
<!--<div class="col s12 m8 push-m4">-->
<div class="col s12">
<div class="input-field">
<input id="nombre" name="nombre" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="20" value="<?=$nombre;?>" required>
<input name="userID" type="hidden" value="<?=$userID;?>">
<input name="status" type="hidden" value="<?=$status;?>">
<label for="nombre" class="active">Nombres</label>
</div>
<div class="input-field">
<input name="apellidos" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="30" value="<?=$apellidos;?>" required>
<label for="apellidos" class="active">Apellidos</label>
</div>
<div class="input-field">
<input name="email" type="email" class="validate" maxlength="49" value="<?=$correo;?>" required>
<label for="email" class="active">Correo Electrónico</label>
</div>
<div class="input-field">
<select id="select_privilegios" name="FK_id_rol" required>
<?=($id_rol=='') ? '<option value="" disabled selected>Seleccionar</option>': ''?>
<?php
foreach ($roles as $role) {
echo '<option value="'.$role->roleId.'" '.(($id_rol == (int)$role->roleId) ? 'selected': '').'>'.$role->role.'</option>';
}
?>
</select>
<label>Privilegios</label>
</div>
<div id="div_empresas" class="input-field">
<select name="id_empresa[]" id="select_empresas" multiple required>
<?php
$ids = array_map(function($e) {
return is_object($e) ? $e->id_empresa : $e['id_empresa'];
}, $id_empresa);
foreach ($empresas as $empresa) {
echo '<option value="'.$empresa->id_empresa.'" '.(in_array($empresa->id_empresa, $ids) ? 'selected': '').'>'.$empresa->nombre .'</option>';
}
?>
</select>
<label>Empresas</label>
</div>
</div>
</div>
<!-- Save Cancelar -->
<div class="row">
<div class="col s12 m12 l12 buttons" style="padding: 0">
<div id="botones">
<button class="waves-effect waves-light btn" type="submit" name="action1"><i class="material-icons right">done</i>Guardar</button>
<?php if($userID>0): ?>
<span href="#warningModal" class="modal-trigger waves-effect waves-light btn <?=($status)? "red lighten-1" : "blue darken-4";?>"><i class="material-icons right"><?=($status)? "delete" : "lock_open";?></i><?=($status)? "Eliminar" : "Habilitar";?></span>
<button type="submit" name="action2" class="hide"></button>
<?php endif; ?>
<i class="material-icons right">clear</i>Cancelar
</div>
</div>
</div>
</div>
</form>
This code work very well in input text or other types of input but, in select elements don´t detect the focus event. If someone could help me,
I would appreciate it very much.

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>

How to run jQueryValidation plugin without using a form tag?

I am using jQueryValidation plugin and I read some of the documentation but I don't know if you can run jqueryvalidator without a form. What I need is run the jqueryvalidator using the event in the button.
Here's some of my code:
<div class="row" id="form-validate">
<div class="col-md-3">
<div class="form-group">
<label for="usernamedata">Username</label>
<select name="username" class="usernamedata form-control" style="width: 100%;">
<?php if(isset($filter_username)) { ?>
<option value="<?php echo $filter_username; ?>"><?php echo $get_username; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email_address" placeholder="sample#email.com" value="<?php echo $filter_email; ?>" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Date Added</label>
<div class='input-group date' id='date-added'>
<input type="text" class="form-control datepicker" name="date_added" placeholder="YYYY-MM-DD" value="<?php echo $filter_date_added; ?>" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Status</label>
<select class="form-control" name="status">
<option value=""></option>
<option value="1" <?php ($filter_status == 1) ? 'selected="selected"' : ''; ?>>Enabled</option>
<option value="0" <?php ($filter_status == 0) ? 'selected="selected"' : ''; ?>>Disabled</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group text-right">
<button type="button" class="btn btn-primary" id="filter-data"><i class="fa fa-search"></i></button>
</div>
<div class="clearfix"></div>
</div>
</div>
I wrap all my needed textfields in the ID #form-validate
And I want this onclick event to process the validation
$("#filter-data").on('click', function(){
//do the validation here
if(!myValidation) {
//success
} else {
//display error
}
});

Bootstrap model showing me first row data every time

Bootstrap model showing me same data in while loop. When I click any model it shows me first row data, how to fix this please help me.
Here is code
$sql="SELECT * FROM tbl_store order by store_id DESC";
$result=mysqli_query($con, $sql);
while($row=mysqli_fetch_array($result, MYSQLI_ASSOC)) {
#code here
}
HTML code
<td style="vertical-align:middle;">
<a href="#myModal1">
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal1">Edit</button>
</a>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel1">Edit Store</h4>
</div>
<div class="modal-body">
<form role="form" action="editStore.php" method="POST" enctype="multipart/form-data">
<!-- text input -->
<div class="row">
<div class="col-md-3 col-xs-3" style="text-align:right; color:#000000;">
<h6>Store Name :</h6>
<br>
<h6 style="margin-bottom:40px; margin-top:-10px;">Description:</h6>
<br>
<h6>Phone:</h6>
<br>
<h6 style="margin-top:0px;">Address:</h6>
<br>
<h6 style="margin-top:0px;">Latitude:</h6>
<br>
<h6 style="margin-top:0px;">Longitude:</h6>
<br>
<h6 style="margin-top:0px;">City:</h6>
<br>
<h6 style="margin-top:0px;">Country:</h6>
<br>
<h6 style="margin-top:0px;">Upload photo:</h6>
<p style="color:red;">*If you want to replace</p>
</div>
<div class="col-md-9 col-xs-9" style="text-align:left; color:#000000;">
<input type="text" class="input form-control" style="width:100%; margin-bottom:10px;" name="title" value="<?php echo $row['store_title']; ?>" required/>
<br>
<textarea class="input input-group" rows="3" style="width:100%; margin-bottom:10px; padding-left:10px;" name="description" required><?php echo $row['store_description']; ?></textarea>
<br>
<input type="tel" class="form-control" style="width:100%; margin-bottom:10px;" name="phone" value="<?php echo $row['store_phone']; ?>"/>
<br>
<input type="text" class="form-control" style="width:100%; margin-bottom:10px;" name="address" value="<?php echo $row['store_address']; ?>" required/>
<br>
<div class="row">
<div class="col-md-6 col-sm-12 pull-left">
<input type="text" class="form-control" style="width:100%; margin-bottom:10px;" max="180" min="0" step="0.00001" name="lat" value="<?php echo $row['store_lat']; ?>" required/>
<input type="text" class="form-control" style="width:100%; margin-bottom:10px;" max="180" min="0" step="0.00001" name="long" value="<?php echo $row['store_long']; ?>" required/>
<input type="text" class="form-control" style="width:100%; margin-bottom:10px;" name="city" value="<?php echo $row['store_city']; ?>" required/>
<input type="text" class="form-control" style="width:100%; margin-bottom:10px;" name="country" value="<?php echo $row['store_country']; ?>" required/>
</div>
<div class="col-md-6 col-sm-12 pull-right">
<img src="<?php echo $row['store_image'];?>" style="float:right;max-height:200px;max-width:200px;">
</div>
<input type="file" style="margin-left:15px; width:93%;" name="photo"/>
<input type="hidden" name="store_id" value="<?php echo $row['store_id'];?>">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="submit">Save changes</button>
</div>
</form>
</div>
</div>
</div>
while Looping your Target has to be unique set of id which equals to id="myModal1". eg.
//inside while loop
target="<?php echo $row['id']; ?>" and id=<?php echo $row['id'];?>

How to use jquery to populate a form from database record on the same page

I have some contact records in a database, I have queried the database and added the contacts in the database to the sidebar of the page. Now I want to see the full details of the contact on the main page in a form when I click on the profile button. I'm finding difficulty using jQuery to get the values from this contact list to the form on the main page.
What I have done is to create some hidden fields to store the values for each records, then use jQuery to add those values to the main form.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<?php
mysql_select_db('****webdb', mysql_connect('*******','****_is***','****'))or die(mysql_error());
$query=mysql_query("SELECT * FROM `w******`");
while( $row=mysql_fetch_array($query))
{
$id=$row['id'];
$name= $row['first_name'].' '.$row['last_name'];
?>
<input type="hidden" name="uname1" id="uname1" value="<?php echo $row['username']; ?>" />
<input type="hidden" name="password1" id="password1" value="<?php echo $row['password']; ?>" />
<input type="hidden" name="fname1" id="fname1" value="<?php echo $row['first_name']; ?>" />
<input type="hidden" name="lname1" id="lname1" value="<?php echo $row['last_name']; ?>" />
<input type="hidden" name="str1" id="str1" value="<?php echo $row['street']; ?>" />
<input type="hidden" name="city1" id="city1" value="<?php echo $row['city']; ?>" />
<input type="hidden" name="pcode1" id="pcode1" value="<?php echo $row['post_code']; ?>" />
<input type="hidden" name="country1" id="country1" value="<?php echo $row['country']; ?>" />
<input type="hidden" name="tel1" id="tel1" value="<?php echo $row['telephone']; ?>" />
<input type="hidden" name="email1" id="email1" value="<?php echo $row['email']; ?>" />
<input type="hidden" name="gsm1" id="gsm1" value="<?php echo $row['gsm']; ?>" />
<input type="hidden" name="jtitle1" id="jtitle1" value="<?php echo $row['job_title']; ?>" />
<input type="hidden" name="company1" id="company1" value="<?php echo $row['company']; ?>" />
<input type="hidden" name="url1" id="url1" value="<?php echo $row['url']; ?>" />
<input type="hidden" name="msn1" id="msn1" value="<?php echo $row['msn']; ?>" />
<input type="hidden" name="skype1" id="skype1" value="<?php echo $row['skype']; ?>" /
<li class="user<?php echo $id ?>">
<a><i class="fa fa-user fa-fw"></i><?php echo $name; ?> <button class="btn btn-info" id="checkClick" onclick="myFunction()">Profile</button></a>
</li>
<?php } ?>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<form id="signUp" class="form-horizontal cmxform" name="signUp" action="">
<div class="form-group"><label class="col-sm-2 control-label" for="username">Username<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="username" class="form-control" name="uname" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="password">Password<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="password" class="form-control" name="password" type="password" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="firstname">First Name<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="fname" class="form-control" name="fname" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="lastname">Last Name<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="lname" class="form-control" name="lname" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="street">Street</label>
<div class="col-sm-10"><input id="str" class="form-control" name="str" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="city">City</label>
<div class="col-sm-10"><input id="city" class="form-control" name="city" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="postcode">Post Code</label>
<div class="col-sm-10"><input id="postcode" class="form-control" name="pcode" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="country">Country<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><select class="form-control" name="country">
<option selected="selected" id="country" ></option>
</select></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="telephone">Telephone<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="tel" class="form-control" name="tel" type="tel" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="email">Email<b style="color:red;font-family: serif;">*</b></label>
<div class="col-sm-10"><input id="email" class="form-control" name="email" type="email" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="gsm">GSM</label>
<div class="col-sm-10"><input id="gsm" class="form-control" name="gsm" type="tel" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="jobtitle">Job Title</label>
<div class="col-sm-10"><input id="jobtitle" class="form-control" name="jtitle" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="company">Company</label>
<div class="col-sm-10"><input id="company" class="form-control" name="company" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="url">URL</label>
<div class="col-sm-10"><input id="url" class="form-control" name="url" type="url" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="msnmessenger">MSN Messenger</label>
<div class="col-sm-10"><input id="msnmessenger" class="form-control" name="msn" type="text" /></div>
</div>
<div class="form-group"><label class="col-sm-2 control-label" for="skype">Skype</label>
<div class="col-sm-10"><input id="skype" class="form-control" name="skype" type="text" /></div>
</div>
</form>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script>
function myFunction() {
var username = ("#uname1").val();
$("#uname").val(username);
var lname = ("#lname1").val();
$("#lname").val(lname);
var str = ("#str1").val();
$("#str").val(str);
var city = ("#city1").val();
$("#city").val(city);
var pcode = ("#pcode1").val();
$("#pcode").val(pcode);
var country = ("#country1").val();
$("#country").val(country);
var tel = ("#tel1").val();
$("#tel").val(tel);
var email = ("#email1").val();
$("#email").val(email);
var gsm = ("#gsm1").val();
$("#gsm").val(gsm);
var jtitle = ("#jtitle1").val();
$("#jtitle").val(jtitle);
var company = ("#company1").val();
$("#company").val(company);
var url = ("#url").val();
$("#url").val(url);
var msn = ("#msn1").val();
$("#msn").val(msn);
var skype = ("#skype1").val();
$("#skype").val(skype);
}
</script>
There's a couple possible solutions you can do here.
First, you need to switch over to mysqli or PDO instead of mysql.
Since you are already using mysql, mysqli is VERY similar and won't take much effort to make the change.
Second, without knowing the full scope of this project it's hard to determine your best needs.
But, some solutions are as follows.
You could use a $_SESSION variable and hold your results in array
with PHP. Then you could loop over the array's index to produce the
desired "detailed" info on the main page.
You could query the database again when a name is clicked to gather
the more detailed information.
You could use ajax to query the database again and pull the data
asynchronously. Similar to the previous suggestion.
First point of concern is that you have hidden inputs containing sensitive information which is never good. I would populate your sidebar with the information from your initial call like you are doing. After that once the user clicks on that contact on the sidebar do an ajax call to your database to pull all of the contact information.

Categories