We Keep Coding

Goes back to modal after pressing submit

Hey guys I'm currently having problems with my Modal. As I register a member, it doesn't go back to the modal after successfully registering it. I believe it has something to do with scripts. Here's the code:
Add Member
<!-- Add Member Modal -->
<div id="addMemberModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Member</h4>
</div>
<div class="modal-body">
<div class="col-md-6 col-sm-6 no-padng">
<div class="model-l">
<form name="registration" method="post">
<table border="0" width="500" align="center" class="demo-table">
<div class="message"><?php if(isset($message)) echo $message; ?></div>
<tr>
<td><p class="textColor">First Name:</p></td>
<td><input type="text" class="demoInputBox" name="firstName" placeholder="First Name" value="<?php if(isset($_POST['firstName'])) echo $_POST['firstName']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Family Name:</td>
<td><input type="text" class="demoInputBox" name="lastName" placeholder="Family Name" value="<?php if(isset($_POST['lastName'])) echo $_POST['lastName']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Contact</td>
<td><input type="text" class="demoInputBox" name="contact" placeholder="Contact No." value="<?php if(isset($_POST['contact'])) echo $_POST['contact']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Email</td>
<td><input type="text" class="demoInputBox" name="email" placeholder="Email" value="<?php if(isset($_POST['email'])) echo $_POST['email']; ?>"; required></td>
</tr>
<tr>
<td><p class="textColor">Gender</td>
<td><input type="radio" name="gender" value="M" <?php if(isset($_POST['gender']) && $_POST['gender']=="Male") { ?>checked<?php } ?>><p class="textColor"; required>Male</p>
<br><input type="radio" name="gender" value="F" <?php if(isset($_POST['gender']) && $_POST['gender']=="Female") { ?>checked<?php } ?>><p class="textColor"; required>Female
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div>
<input type="submit" name="submit" value="Add Member" class="btnRegister">
</div>
</form>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm open to receiving answers and learning lessons from you guys as well because Boostrap Modal isn't being taught in our school. I'll be very happy if somebody will help me with this. Thank you so much! :)

First thing:
I really don't understand why you have used value="<?php echo $_POST['value']?>" with every input type what it does is, it fills form input with the submitted data. If you remove this value="<?php echo $_POST["firstName"] ?>" from every input type, you will only need to trigger the modal using the following code.
<script type="text/javascript">
$(document).ready(function(){
//check whether user form submitted
var test ="<?php echo $_POST["submit"] ?>";
//check if form is submmited
if(test){
$("#addMemberModal").modal("show");
}
});
</script>
If You still don't want to remove value="<?php echo $_POST['value']?>".Then try the following:
<script type="text/javascript">
$(document).ready(function(){
//check whether user form submitted
var test ="<?php echo $_POST["submit"] ?>";
// function for clearing input
$.clearInput = function (modal) {
$(modal).find('input[type=text], input[type=radio]').val("");
};
//check if form is submmited
if(test){
// //show the modal
$("#addMemberModal").modal("show");
//on modal show clear the inputs
$("#addMemberModal").on("shown.bs.modal",function(){
$.clearInput(this);
});
}
});
</script>
For any of the above case to work you also need to include Jquery in head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
NOTE: Above code should work as per your requirement but this is not a recommended method. If you want to add new member information again and again, you should submit the data via JQuery or Ajax post and on successful submission should reset the form, instead of reloading the entire page.

PINCODE LOGIN PAGE

Im stuck with a project. This is strictly for a company internal employee login page. Not public! For those that might question the security of this form. Although, I am open to hashing the pincode password (SHA-1).
I've setup the code on my jsfiddle PINCODE LOGIN
<body onLoad="emptyCode()" class="hold-transaction login-page">
<!-- Page Content -->
<div class="login-box">
<div class="login-logo">
<b>PINCODE LOGIN</b>
<p class="login-box-msg">Employee Sign-in</p>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<!--<form action="" method="post">-->
<div class="main_panel">
<form action="" method="post">
<div class="input-group">
<input type="text" name="code" maxlength="4" readonly="readonly" class="form-control" placeholder="Enter PIN...">
<span class="input-group-btn">
<button class="btn btn-danger" type="reset" >X</button>
</span>
</div>
<!-- /input-group -->
<table id="keypad" cellpadding="5" cellspacing="3">
<tbody>
<tr>
<td onclick="addCode('1');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>1</span>
</div>
</td>
<td onclick="addCode('2');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>2</span>
</div>
</td>
<td onclick="addCode('3');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>3</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('4');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>4</span>
</div>
</td>
<td onclick="addCode('5');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>5</span>
</div>
</td>
<td onclick="addCode('6');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>6</span>
</div>
</td>
</tr>
<tr>
<td onclick="addCode('7');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>7</span>
</div>
</td>
<td onclick="addCode('8');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>8</span>
</div>
</td>
<td onclick="addCode('9');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>9</span>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td onclick="addCode('0');">
<div class="button raised clickable">
<input type="checkbox" class="toggle" />
<div class="anim"></div><span>0</span>
</div>
</td>
</tr>
</tbody>
</table>
<p id="message">ACCESSIGN...</p>
</form>
</div>
<!--</form>-->
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>
My goal for this is:
Allow employees to login using a 4 digit pincode and verify
against DB credentials
BONUS: Hash password in DB
Not sure if i would need a function such as " if(isset($_POST['code'])) {", as a separate file.

At first, you close the form tag at the end of the form, wich means nearly your whole page is posted back to your server. You can minify this:
<form action="secret.php" method="post">
<input name="code">
</form>
Now it is posted to the "secret.php" specified in the action tag.
This would look like this:
Secret.php:
<?php
if(isset($_POST["code"])){
if($_POST["code"]=="5473")){
echo "successfully logged in...";
$_SESSION["logged"]=true;
}else{
echo " wrong code";
}
}else{
echo "404: this is not accessible for you";
}
?>
This checks if the code is posted and if its 5473. if its correct, it sets a session wich helps you identifying the user.
Simply do:
<?php
if(isset($_SESSION["logged"])){
echo " logged in user...";
}else{
echo "not for you.please log in";
die();
}
?>

I updated my code. This function seems to work great!
function loginEmployee() {
global $connection;
$pincode = $_POST["code"];
if(isset($_POST["code"])){
$result = mysqli_query($connection,"SELECT * FROM users WHERE user_pin = '$pincode'");
if(mysqli_num_rows($result) != 0) {
echo "<p class='alert-successs'>successfully logged in...</p>";
header("Location: ../repairs.php");
die();
$_SESSION["logged"]=true;
}else{
header("Location: ../login_fail.php");
die();
}
}else{
echo "404: this is not accessible for you";
}

Search result on click of button in popup

I want to display search result on click of button, but my code is giving me the search result without click on button.
I think it's giving me the query result not the search result.
This code is working fine when I display the result on the page, but as per my requirement I want to display the search result on a popup.
I have used jquery popup.
<body><form action="#" method="POST"><body><form action="#" method="POST"><div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</div><div class="input-group col-sm-8 " ><table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
</div><?php
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
?><?php $query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
while($results = mysql_fetch_array($raw_results))
{ ?><div class="input-group col-sm-8" style="text-align:center;margin-top:10px;"><tbody>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
</tbody>
</div>
<?php
}
}
else
{ // if there is no matching rows do following
echo "No results";
}
?>
</div>
</form>
</div>

This will give you search results in modal popup. I have changed your code around a bit. You can popup in case of no search results too.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<form method="POST">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search" class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</form>
</div>
<?php
if(isset($_POST['query']) && $_POST['query']!="" ) {
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
$query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
?>
<div class="input-group col-sm-8 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysql_fetch_array($raw_results))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php
}
else
{ // if there is no matching rows do following
echo "No results";
}
}
?>
</div>
</form>
</div>
<script>
$(function() {
$( "#popup" ).dialog();
});
</script>

How to send ID from mysql to div using jquery?

On my page a couple of messages are retrieved from the database. They are displayed using fetch_array. On the corner of every message a button is shown. This button contains the ID of the message. When it's clicked, a div will slide downwards from the top of the page, asking for a confirmation. If the yes-button is clicked, the message will be deleted. If the no-button is clicked, the div slides upwards, off canvas.
How can I send the ID from the message to the yes-button, so the right message will be deleted instead of all messages? I wrote this piece of code but this doesn't work.
<? while($result=mysqli_fetch_array($sql,MYSQLI_ASSOC)){ ?>
<div class="memo_blok">
<table width="100%">
<tr>
<td>
<font class="memo_blok_name"><? echo $result['name']; ?> |</font>
<font class="memo_blok_date"><? echo $result['date']; ?></font>
</td>
<td width="20">
<img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />
</td>
</tr>
</table>
<p class="memo_blok_TXT">
<? echo $result['msg']; ?>
</p>
</div>
<? } ?>
<div id="confirm" class="confirm">
<table width="100%">
<tr>
<td align="center">Are you sure?</td>
</tr>
<tr>
<td align="center">
<a href="memo_delete.php?id=1" class="noLine">
<img src="images/Yes.png" width="50" id="deleteYes" />
</a>
<img src="images/No.png" width="50" id="deleteNo" />
</td>
</tr>
</table>
</div>
The CSS:
.confirm {
width:100%;
height:100px;
position:fixed;
top:-100px;
left:0px;
background-color:#3c3c3b;
font-family: 'Abel', sans-serif;
font-size:24px;
color:#fefefe;
}
The script:
<script>
$(document).ready(function(){
$("#deleteBTN").click(function(){
$("#confirm").animate({top: '0px'});
});
$("#deleteNee").click(function(){
$("#confirm").animate({top: '-100px'});
});
});

Change the close image:
<img src="images/close.png" width="20" id="deleteBTN_<? echo $result['id']; ?>" />
To this so it will have a data-id attribute (also you can change than the id attribute to class and leave out the id number):
<img src="images/close.png" width="20" class="deleteBTN" data-id="<? echo $result['id']; ?>" />
Remove the value of href from a.noLine like this <a href="" class="noLine">
and in your javascript code then put the data attribute's value on the end of href attribute like this:
$(".deleteBTN").click(function(){
var msgId = $(this).data('id');
$("#confirm").animate({top: '0px'});
var $deleteBtn = $("#confirm").find('.noLine');
$deleteBtn.attr('href','memo_delete.php?id='+msgId);
});

Disable bootstrap input button if checkbox not checked

My check box when unchecked my input with id of delete should be disabled, but for some reason the java script code it not picking up the id of both input and checked input. I use bootstrap 3 and codeigniter.
What's wrong with my code? Unsure why not working. All JS scripts loaded correct.
<script type="text/javascript">
$('#check_delete').click(function(){
if($(this).attr('checked') == false){
$('input #delete').attr("disabled","disabled");
} else {
$('input #delete').removeAttr('disabled');
}
});
</script>
<input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">
View
<?php echo form_open('admin/users_group/delete');?>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
<th class="text-left">User Group ID</th>
<th class="text-left">Name</th>
<th class="text-right">Action</th>
</tr>
</thead>
<?php if ($users_group == TRUE) {?>
<?php foreach ($users_group as $user_group) { ?>
<tr>
<td class="text-center"><?php if (in_array($user_group['user_group_id'], $selected)) { ?>
<input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" checked="checked" />
<?php } else { ?>
<input type="checkbox" id="check_delete" name="selected[]" value="<?php echo $user_group['user_group_id']; ?>" />
<?php } ?>
</td>
<td class="text-left"><?php echo $user_group['user_group_id']; ?></td>
<td class="text-left"><?php echo $user_group['name']; ?></td>
<td class="text-right">
<input type="submit" role="button" class="btn btn-danger" id="delete" value="Delete">
<i class="fa fa-pencil"></i> Edit</td>
</tr>
<?php } ?>
<?php } else { ?>
<tr>
<td class="text-center" colspan="3">No Results</td>
</tr>
<?php } ?>
</table>
</div>
<?php echo form_close();?>
</div>
<div class="panel-footer clearfix">
<div class="pull-left pag-user-group"><?php echo $pagination; ?></div>
<div class="pull-right" style="padding-top: 7.5px;"><?php echo $results; ?></div>
</div>
</div>
</div>
</div>
</div><!-- # Page Inner End -->
</div><!-- # Page End -->
</div><!-- # Wrapper End -->
<script type="text/javascript">
$('#check_delete').click(function(){
if($(this).attr('checked') == false){
$('input #delete').attr("disabled","disabled");
} else {
$('input #delete').removeAttr('disabled');
}
});
</script>

You declare your script before the HTML code.
A HTML page is read sequentially.
alert( $('input#delete').length )
<input id="delete" >
This will alert "0" because jQuery looks for #delete, and then, next line, #delete exists.
Two solutions :
1) Move your script after HTML, at the end, before the </body> tag.
2) Wrap your code in $(function(){ /* Your code here */ } . This will wait for the page to be ready before executing the script.
<input id="delete" >
alert( $('input#delete').length )
This will work, and this also will :
$(function(){
alert( $('input#delete').length )
})
<input id="delete" >