I have a situation i am generating dynamic html using jQuery like
var list_of_addressbook_entries = {};
var filter = []
function save(){
var user = $("#addressbook_user").val();
var desg = $("#desg").val();
var ahtml='<div id ="user_'+user+'" class="addr_list" style=" font-size: 30px;display:block; background: none repeat scroll 0% 0% peachpuff;margin:1px 1px 1px 1px ;">'
ahtml = ahtml + '<span style="display: block; float: left; font-size: 30px; margin: 2px 24px 2px 21px;" >'+user+'</span>'
if(desg == 'M'){
ahtml = ahtml + '<span style="display: block; float: left; font-size: 30px; margin: 2px 24px 2px 21px;">Moderator</span>'
}
else{
ahtml = ahtml + '<span style="display: block; float: left; font-size: 30px; margin: 2px 24px 2px 21px;">Attendee</span>'
}
ahtml = ahtml + '<div onclick="remove_video(\''+user+'\')"><span ><img src="/UI/user/img/delet.jpeg" alt="Smiley face" height="42" width="42" /> </span></div></div>'
var ua = "'"+user+"'";
filter.push(ua);
$.ajax({
type: "GET",
url: "<?php echo SITE_URL;?>/UI/user/filterbox.php",
data: "list="+ filter+"&Where=addressbook" ,
success: function(json){
$('#addorguser').html(json);
// if(!json.error) location.reload(true);
},
error: function (xhr, textStatus, errorThrown) {
alert(json);
}
});
$("#organization").append(ahtml);
}
function remove_video(user){
alert(user);
$("#user_"+user).hide();
}
After calling the save() i am appending dynamically generated html to a div there is a remove_video function i also defined in the dynamic html .
But when i am clicking on dynamic div to remove the div the remove_video function is not getting called .
I am also not getting any error .
Help me plz .
*Updated Html *
<div id="organization" name="organization">
</div>
<div>Address Book</div><br>
<div id="box1">
<?php
if (isset($_SESSION["user_name"])){
$get_user_name = $_SESSION["user_name"];
?>
<div id="addorguser" style="display: block; float: left;">
<select id ="addressbook_user" name="addressboook_user">
<?php
$asql = "SELECT * from demo_addressbook WHERE user_created_id IN(SELECT id FROM demo_user WHERE user_name = '$get_user_name') AND type = 1 ";
// $result = mysql_query($query);
// mysql_real_escape_string($asql);
$aresult = mysql_query($asql) or die (mysql_error());
while($arow_list=mysql_fetch_assoc($aresult)){
?>
<option value="<?php echo $arow_list['guest_name']; ?>"><?php echo $arow_list['guest_name']; ?></option>
<?php
}
?>
</select>
</div>
<select name="desg" id="desg">
<option value="A">Attendee</option>
<option value="M">Moderator</option>
</select>
<input type="button" id ="aadd" onclick="save()" name="button" value="Add"/>
</div>
<?php
}
?>
Try this exemple:
$('#aadd').on('click', function(e){
alert('Click');
});
or this one
$('#aadd').click(function(e){
alert('Click');
});
Related
I am using the following code to show search results. It has two options, one is a text field and another is a dropdown select option. I would like to convert the dropdown field into a checkbox option and allow users to select more than 1 option at a time. How can I do that?
<script>
$(document).ready(function(){
load_data(1);
function load_data(page,query,city)
{
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{page:page, query:query, city:city},
success:function(data)
{
$('#dynamic_content').html(data);
}
});
}
$(document).on('click', '.page-link', function(){
var page = $(this).data('page_number');
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(page, query, city);
});
$('#search_box').keyup(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
$('#city_box').change(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
});
</script>
Current dropdown example:
<form action="" class="row login_form">
<select name="city_box" id="city_box">
<option value="newyork">New York</option>
<option value="london">London</option>
<option value="tokyo">Tokyo</option>
<option value="paris">Paris</option>
</select>
</form>
As per your query there are lot of stuff available. I have used Select2.js. This having so many features. I tried some way to achieve you scenario. Try below code snippet will work for you.
$(function() {
$("#multiple").select2({
closeOnSelect : false,
placeholder : "Placeholder",
allowHtml: true,
allowClear: true,
tags: true
});
});
function iformat(icon, badge,) {
var originalOption = icon.element;
var originalOptionBadge = $(originalOption).data('badge');
return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '<span class="badge">' + originalOptionBadge + '</span></span>');
}
.select2-container {
min-width: 400px;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
border-radius: 4px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
font-family:fontAwesome;
content: "\f00c";
color: #fff;
background-color: #f77750;
border: 0;
display: inline-block;
padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #eaeaeb;
color: #272727;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #f77750;
border-width: 2px;
}
.select2-container--default .select2-selection--multiple {
border-width: 2px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>Multiple Select with Checkboxes</h3>
<select id="multiple" class="js-select2" multiple>
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
hey guys after working on the script, im facing a problem where im fetching the data from another php page through ajax.
here is my div where the data is to be shown..
<div id="show_msg">
</div>
Here is my css :
#show_msg {
width: 100%;
border: 1px solid #D8D4D4;
border-right: none;
border-left: none;
min-height: calc(96% - 4%);
height: calc(96% - 4%);
max-height: calc(96% - 4%);
}
Here is my JS :
$('#send_btn').click(function(){
var msgContent = $('#message_input').val();
if(msgContent == '')
{
alert('message to likh bhai');
}
else
{
$.ajax({
url: 'lib/function.php',
method: 'POST',
data:{func: 'send_msg', msgContent:msgContent},
success: function(data)
{
if(data == 'sent')
{
$('#message_input').val('');
}
}
})
}
});
Here is my php page from where data is getting fetched :
<?php
include 'connect.php';
global $con;
$get_data = mysqli_query($con, "SELECT * FROM messages");
while($row = mysqli_fetch_array($get_data))
{
?>
<div id="chat_box">
<img src="images/user.jpg" id="onio_user_2" style="border: 2px solid lightblue">
<div class="content-2">
<p style="font-weight: bold;font-size:13px;">BaTuTa</p>
<p class="comment"><span><?php echo $row['message_body'] ?> </span></p>
</div>
</div>
<?php
}
?>
Try to add the following line to your #show_msg style :
overflow:both;
So your final style looks like:
#show_msg {
width: 100%;
border: 1px solid #D8D4D4;
border-right: none;
border-left: none;
min-height: calc(96% - 4%);
height: calc(96% - 4%);
max-height: calc(96% - 4%);
overflow:both;
}
I have an editable input box on my form, my question is how do I make it a required field.
Here's the form and what I did:
<td contenteditable="true" class="empname" required></td>
I'm not using <form> I'm using a table and JavaScript to insert to database. Here's the whole code:
<?php
// Initialize the session
session_start();
// Check if the user is already logged in, if yes then redirect him to welcome page
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
header("location: messages.php");
exit;
}
// Include config file
require_once "database_connection.php";
// Define variables and initialize with empty values
$username = $password = "";
$username_err = $password_err = "";
// Processing form data when form is submitted
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Check if username is empty
if(empty(trim($_POST["username"]))){
$username_err = "Please enter username.";
} else{
$username = trim($_POST["username"]);
}
// Check if password is empty
if(empty(trim($_POST["password"]))){
$password_err = "Please enter your password.";
} else{
$password = trim($_POST["password"]);
}
// Validate credentials
if(empty($username_err) && empty($password_err)){
// Prepare a select statement
$sql = "SELECT id, username, password FROM users WHERE username = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_username);
// Set parameters
$param_username = $username;
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
// Store result
mysqli_stmt_store_result($stmt);
// Check if username exists, if yes then verify password
if(mysqli_stmt_num_rows($stmt) == 1){
// Bind result variables
mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
if(mysqli_stmt_fetch($stmt)){
if(password_verify($password, $hashed_password)){
// Password is correct, so start a new session
session_start();
// Store data in session variables
$_SESSION["loggedin"] = true;
$_SESSION["id"] = $id;
$_SESSION["username"] = $username;
// Redirect user to welcome page
header("location: messages.php");
} else{
// Display an error message if password is not valid
$password_err = "The password you entered was not valid.";
}
}
} else{
// Display an error message if username doesn't exist
$username_err = "No account found with that username.";
}
} else{
echo "Oops! Something went wrong. Please try again later.";
}
}
// Close statement
mysqli_stmt_close($stmt);
}
// Close connection
mysqli_close($link);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>PC Request Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Questrial" rel="stylesheet">
<style type="text/css">
body {
font-family: 'Questrial', sans-serif;
background-image: url("img/hero2.jpg");
background-size: cover;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
border-radius: 3px;
}
nav li {
float: left;
}
nav #login {
border-right: 1px solid #ddd;
box-shadow: 1px 0 0 #fff;
background: #FF8C00;
opacity: 0.9;
}
nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: ;
padding: 0 20px;
text-decoration: none;
color: #444;
}
nav #signup a {
border-radius: 0 3px 3px 0;
}
nav #login-trigger {
border-radius: 3px 0 0 3px;
}
nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
background: #fff;
}
nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #fff;
opacity: 0.9;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
border-radius: 3px 0 3px 3px;
border-bottom: 6px solid #FF8C00;
}
nav li #login-content {
right: 0;
width: 250px;
}
/*--------------------*/
#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 225px;
border: 1px solid #ccc;
border-radius: 3px;
}
#inputs input:focus {
background-color: #fff;
border-color: ;
outline: none;
box-shadow:;
}
/*--------------------*/
#login #actions {
margin: 10px 0 0 0;
}
#login #submit {
background-color: #FF8C00;
background-image: linear-gradient(top, #e97171, #d14545);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 15px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #FFF;
}
#login #submit:hover,
#login #submit:focus {
background-color: #E88300;
background-image: linear-gradient(top, #d14545, #e97171);
}
#login #submit:active {
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#login #submit::-moz-focus-inner {
border: none;
}
#login label {
float: right;
line-height: 30px;
}
#login label input {
position: relative;
top: 2px;
right: 2px;
}
.ctn {
display: flex;
justify-content: center;
height: 100%;
min-height: 100%;
}
#check {
display: none;
}
.btn-label {
display: flex;
justify-content: center;
align-items: center;
background-color: #ff6347;
border: none;
font-family: 'Raleway', serif;
font-size: 30px;
color: #fffeee;
margin-top: 20%;
height: 50px;
width: 200px;
}
.btn-text {
font-family: 'Raleway', serif;
font-size: 30px;
color: #fffeee;
}
.load {
display: none;
width: 20px;
height: 20px;
border: 5px solid #fff;
border-radius: 100%;
}
.open {
border-top: 5px solid transparent;
-webkit-animation: load-animate infinite linear 1s;
animation: load-animate infinite linear 1s;
}
#check:checked ~ .btn-label > .btn-text {
display: none;
}
#check:checked ~ .btn-label > .load {
display: inline-block;
}
#-webkit-keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load-animate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
opacity: 0.35;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.twoToneCenter {
text-align: center;
margin: 1em 0;
}
.twoToneButton {
display: inline-block;
outline: none;
padding: 10px 20px;
line-height: 1.4;
background: #0c064e;
border-radius: 4px;
border: 1px solid #000000;
color: #dadada;
text-shadow: #000000 -1px -1px 0px;
position: relative;
transition: padding-right 0.3s ease;
font-weight: 700;
box-shadow: 0 1px 0 #6e6e6e inset, 0px 1px 0 #3b3b3b;
}
.twoToneButton:hover {
box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
color: #f3f3f3;
}
.twoToneButton:active {
box-shadow: 0 0 10px #080808 inset, 0px 1px 0 #3b3b3b;
color: #ffffff;
background: #080808;
background: linear-gradient(to bottom, #3b3b3b 0%, #2e2e2e 50%, #141414 51%, #080808 100%);
}
.twoToneButton.spinning {
background-color: #0c064e;
padding-right: 40px;
}
.twoToneButton.spinning:after {
content: '';
right: 6px;
top: 50%;
width: 0;
height: 0;
box-shadow: 0px 0px 0 1px #080808;
position: absolute;
border-radius: 50%;
-webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
.twoToneButton.spinning:before {
content: "";
width: 0px;
height: 0px;
border-radius: 50%;
right: 6px;
top: 50%;
position: absolute;
border: 2px solid #fff;
border-right: 3px solid #27ae60;
-webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease;
}
#-webkit-keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
#keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
select {
margin-bottom: 1em;
background: transparent;
padding: ;
border: 0;
border-bottom: 1px solid black;
font-weight: ;
letter-spacing:;
border-radius: 0;
&:focus, &:active {
outline: 0;
border-bottom-color: red;
}
}
</style>
</head>
<body>
<div id="login-content" style="margin-left: 40px; font-family: Questrial; position: relative;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#" style="color: black;">
View Requests <span>▼</span>
</a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="hidden" name="username" placeholder="Username" value="admin" required>
<input id="password" type="password" name="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="hidden" name="submitted" id="submitted" value="yes">
<input type="submit" id="submit" name="submit" value="Log in">
</fieldset>
</form>
</div>
</li>
</ul>
</nav>
</form>
</div>
<br /><br />
<div class="container" style="margin-left: 1%; margin-top: -5%">
<img src="img/corelogo.png" width="250px" style="margin-top: 2%;"></img>
<h4>PC Request Form <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button></h4>
<div class="table-responsive" style="width: 114%;">
<table class="table table-bordered" style="border-radius: 10px;" id="crud_table">
<tr>
<th width="10%" style="display: none;">Tracking Code</th>
<th width="10%" style="display: none;">Date Requested</th>
<th width="30%">Requested By</th>
<th width="10%">Start Date</th>
<th width="10%">Employee Name</th>
<th width="10%">Position</th>
<th width="10%">Account</th>
<th width="10%">Platform</th>
<th width="45%">Processor</th>
<th width="10%">RAM</th>
<th width="10%">Monitor</th>
<th width="10%">Phone</th>
<th width="10%">Phone Type</th>
<th width="10%">Headset</th>
<th width="10%">Table</th>
<th width="10%">Chair</th>
<th width="10%" style="display: none;">Approval</th>
<th width="10%" style="display: none;">Status</th>
</tr>
<tr>
<td class="req_date" style="display: none;"><?php echo date('Y-m-d');?></td>
<td contenteditable="true" class="reqname"></td>
<td class="date"><input type="date"></td>
<td contenteditable="true" class="empname"></td>
<td class="trackingcode" style="display: none;"></td>
<td class="position">
<select size="1">
<option>SpecOps</option>
<option>Account Specialist</option>
<option>Operations Manager</option>
<option>Supervisor</option>
<option>Admin</option>
<option>I.T.</option>
</select>
</td>
<td class="account">
<select size="1">
<option>Cintas - Hospitality</option>
<option>Cintas - Rentals</option>
<option>Cintas - Fire</option>
<option>Cintas - GSC</option>
<option>Metro Service</option>
<option>Cintas - DeepClean</option>
<option>Rogers</option>
<option>Olibra</option>
<option>American Towns</option>
</select>
</td>
<td class="platform">
<select size="1">
<option>Desktop</option>
<option>Laptop</option>
</select>
</td>
<td class="processor">
<select size="1">
<option>i3</option>
<option>i5</option>
<option>i7</option>
</select>
</td>
<td class="ram">
<select size="1">
<option>4GB</option>
<option>8GB</option>
</select>
</td>
<td class="monitor">
<select size="1">
<option>1</option>
<option>2</option>
</select>
</td>
<td class="phone">
<select size="1">
<option>Hard Phone</option>
<option>Soft Phone</option>
</select>
</td>
<td class="phonetype">
<select size="1">
<option>Direct Number</option>
<option>Extension</option>
</select>
</td>
<td class="headset">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="req_table">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="req_chair">
<select size="1">
<option>Yes</option><option>No</option>
</select>
</td>
<td class="approval" style="display: none;">Pending</td>
<td class="status" style="display: none;">Ongoing</td>
</tr>
</table>
<div align="right">
</div>
<div align="center" class="twoToneCenter">
<button class="twoToneButton" name="save" id="save">Send</button>
</div>
<br />
<div id="inserted_item_data"></div>
</div>
</div>
</body>
</html>
<script>
$(function(){
var twoToneButton = document.querySelector('.twoToneButton');
twoToneButton.addEventListener("click", function() {
twoToneButton.innerHTML = "Processing Request";
twoToneButton.classList.add('spinning');
setTimeout(
function (){
twoToneButton.classList.remove('spinning');
twoToneButton.innerHTML = "Send";
}, 1000000000);
}, false);
});
</script>
<script>
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<script>
$(document).ready(function(){
var count = 1;
$('#add').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td class='trackingcode' style='display: none;'></td>";
html_code += "<td class='req_date' style='display: none;''><?php echo date('Y-m-d');?></td>";
html_code += "<td contenteditable='true' class='reqname'></td>";
html_code += "<td class='date'><input type='date'></td>";
html_code += "<td contenteditable='true' class='empname'></td>";
html_code += "<td class='position'><select><option>SpecOps</option><option>Account Specialist</option><option>Operations Manager</option><option>Supervisor</option><option>Admin</option><option>I.T.</option></select></td>";
html_code += "<td class='account'><select><option>Cintas - Hospitality</option><option>Cintas - Rentals</option><option>Cintas - Fire</option><option>Cintas - GSC</option><option>Metro Service</option><option>Cintas - DeepClean</option><option>Rogers</option><option>Olibra</option><option>American Towns</option></select></td>";
html_code += "<td class='platform'><select><option>Desktop</option><option>Laptop</option></select></td>";
html_code += "<td class='processor'><select><option>i3</option><option>i5</option><option>i7</option></select></td>";
html_code += "<td class='ram'><select><option>4GB</option><option>8GB</option></select></td>";
html_code += "<td class='monitor'><select><option>1</option><option>2</option></select></td>";
html_code += "<td class='phone'><select><option>Hard Phone</option><option>Soft Phone</option></select></td>";
html_code += "<td class='phonetype'><select><option>Direct Number</option><option>Extension</option></select></td>";
html_code += "<td class='headset'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='req_table'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='req_chair'><select><option>Yes</option><option>No</option></select></td>";
html_code += "<td class='approval' style='display: none;'>Pending</td>";
html_code += "<td class='status' style='display: none;'>Ongoing</td>";
html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";
html_code += "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
$('#save').click(function(){
var trackingcode = [];
var req_date = [];
var reqname = [];
var date = [];
var empname = [];
var position = [];
var account = [];
var platform = [];
var processor = [];
var ram = [];
var monitor = [];
var phone = [];
var phonetype = [];
var headset = [];
var req_table = [];
var req_chair = [];
var approval = [];
var status = [];
$('.trackingcode').each(function(){
trackingcode.push($(this).text());
});
$('.req_date').each(function(){
req_date.push($(this).text());
});
$('.reqname').each(function(){
reqname.push($(this).text());
});
$('.date').each(function(){
date.push($(this).find('input').val());
});
$('.empname').each(function(){
empname.push($(this).text());
});
$('.position').each(function(){
position.push($(this).find('select').val());
});
$('.account').each(function(){
account.push($(this).find('select').val());
});
$('.platform').each(function(){
platform.push($(this).find('select').val());
});
$('.processor').each(function(){
processor.push($(this).find('select').val());
});
$('.ram').each(function(){
ram.push($(this).find('select').val());
});
$('.monitor').each(function(){
monitor.push($(this).find('select').val());
});
$('.phone').each(function(){
phone.push($(this).find('select').val());
});
$('.phonetype').each(function(){
phonetype.push($(this).find('select').val());
});
$('.headset').each(function(){
headset.push($(this).find('select').val());
});
$('.req_table').each(function(){
req_table.push($(this).find('select').val());
});
$('.req_chair').each(function(){
req_chair.push($(this).find('select').val());
});
$('.approval').each(function(){
approval.push($(this).text());
});
$('.status').each(function(){
status.push($(this).text());
});
$.ajax({
url:"insert-message.php",
method:"POST",
data:{trackingcode:trackingcode, req_date:req_date, reqname:reqname, date:date, empname:empname, position:position, account:account, platform:platform, processor:processor, ram:ram, monitor:monitor, phone:phone, phonetype:phonetype, headset:headset, req_table:req_table, req_chair:req_chair, approval:approval, status:status},
success:function(data){
alert(data);
window.location.reload()
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++)
{
$('tr#'+i+'').remove();
}
fetch_item_data();
}
});
});
});
</script>
tag if for a cell
You must use a into tag this way
<td><input type="text" name="input_name" class="input_class" required></td>
You would have to use javascript or jQuery.
$('#save').click(function(){
var valid = true;
// Check for validation here, then proceed
$.each($('[required]'), function(v){
if ($.trim(v.html()) == '') {
isValid = false;
return;
}
});
if (!isValid) {
// highlight fields in red or whatever to show user error(s) here
return false;
}
// continue with the rest of your code here
});
Hi this is late but hope if someone need this answer
use if statement.
if(trackingcode !='' && req_date !='' && reqname !=''){
$.ajax({
url:"insert-message.php",
method:"POST",
data:{trackingcode:trackingcode, req_date:req_date, reqname:reqname, date:date, empname:empname, position:position, account:account, platform:platform, processor:processor, ram:ram, monitor:monitor, phone:phone, phonetype:phonetype, headset:headset, req_table:req_table, req_chair:req_chair, approval:approval, status:status},
success:function(data){
alert(data);
window.location.reload()
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++)
{
$('tr#'+i+'').remove();
}
fetch_item_data();
}
});
}else{
alert('Required');
}
my webpage displayed always the same name
i need to display the name inside the modal that i clicked
this my code :
display the content(which is stored in mysql) if it's click the picture .
<?php
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$_SESSION['petname'] = $row['petname'];
$_SESSION['petdesc'] = $row['petdesc'];
$_SESSION['petimg'] = $row['petimg'];
$_SESSION['petid'] = $row['petid'];
echo '<li style="
padding-right: 20px;
padding-left: 20px;">';
echo '<a style= "cursor: pointer;"onclick= "document.getElementById(\'dogmod'.$row['petid'].'\').style.display=\'block\'">';
echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" />';
echo '<h4>';
echo $_SESSION['petname'] ;
echo '</h4>';
include 'desca.php';
echo '</a>';
echo '</li>';
}
?>
the code of my modal
(desca.php)
<div id="dogmod<?=$_SESSION['petid']?>" class="modal">
<center>
<form class="modal-content animate" style="margin: 0; padding-left:50px; padding-right:50px; padding-bottom:50px;">
<div class="imgcontainer">
<span onclick="document.getElementById('dogmod<?= $_SESSION['petid'] ?>').style.display='none'" class="close" title="Close">×</span>
<h1 align=center>Description</h1>
<?php echo '<img src="data:image/jpeg;base64,'.base64_encode($_SESSION['petimg'] ).'" style="margin-top:50px;float:left; margin-right:50px;"/>'; ?>
<h1 style="margin-top:50px;margin-bottom:50px">
<?php echo $_SESSION['petname'] ;?>
</h1>
<p style="margin-bottom:50px;">
<?php echo $_SESSION['petdesc'] ;?>
</p>
<input type="button" value="Back" onclick=location.href='doga.php' class="button_1" style=" width: auto;padding: 10px 18px; background-color: #f44336; border:0px; color:white;">
<input type="button" value="Adopt" onclick=location.href='form.php' class="button2"style= " width: auto;padding: 10px 18px; background-color: #4CAF50; border:0px; color:white; ">
</form>
</center>
<script>
// Get the modal
var modal = document.getElementById('dogmod');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
and this is the form that i want to display the name.
<div style="
height: 70px;
">
<label>Name:</label>
<input type="text" style=" width: 100%;
padding: 0px 10px;
width:323px;
text-align:center;
box-sizing: border-box;
border: none;
border-bottom: 1px solid;" placeholder="Name" value="<?=$_SESSION['fullname']?>" name="fname">
<label>Age:</label>
<input type="text"style=" width: 100%;
padding: 0px 20px;
width:100px;
text-align:center;
box-sizing: border-box;
border: none;
border-bottom: 1px solid;" placeholder="Age" name= "age">
<label>Email:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
text-align:center;
width:298px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid ;" value = "<?=$_SESSION['email']?>" placeholder="Email Address" name="email">
</div>
<div style="
height: 70px;
">
<label>Address:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
width:795px;
text-align:center;
box-sizing: border-box;
border: none;
border-bottom: 1px solid;" placeholder="Address" name="adrs">
</div >
<div style="
height: 70px;
">
<label>Mobile Number:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
text-align:center;
width:300px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid ;" value = "<?=$_SESSION['contactnum']?>" placeholder="Contact Number" name="mnum"><br>
</div>
<div style="
height: 70px;
">
<label>Name/Description of animal:</label>
<input type="text" style=" width: 100%;
padding: 0px 20px;
text-align:center;
width:220px;
box-sizing: border-box;
border: none;
border-bottom: 1px solid ;" value = "<?=$_SESSION['petname']?>" placeholder="petname" name="petname">
</div>
() i used this code to display name that the same name in the modal but unfortunately this will display always the same wrong name.
The problem is that in your loop you overwrite $_SESSION["petname"] (as well, as some other values), so it always will store only the last petname. If I understand clearly you want next: user clicks the adopt-button after what he is redirected to the page with a form. In that form you want to see correct petname. Here is one possible solution:
Modify your adopt-button, set:
onclick=location.href='form.php?petname=<?=$_SESSION['petname']; ?>'
And in your modal modify input with petname, set:
value = "<?=$_GET['petname']?>"
I hope this will work. But you should think about improving you algorithm. You don't really need $_SESSION to store pet-information here. Also, maybe you would like to leave those modal on the same page and fill it with js.
like #Alex Yokisama Said
"The problem is that in your loop you overwrite $_SESSION["petname"]
(as well, as some other values)"
i suggest you should use AJAX, just like this !!
<?php
$query = "SELECT * FROM pet where pet_cat = 'D' ORDER BY petid ";
$result = mysqli_query($con, $query);
while($row = mysqli_fetch_assoc($result))
{
$petname = $row['petname'];
$petdesc = $row['petdesc'];
$petimg = $row['petimg'];
$petid = $row['petid'];
//echo '<li style="
//padding-right: 20px;
//padding-left: 20px;">';
// echo "<a data-toggle="modal" data-target="#modalForm" data-id=" $petid;" id="formPet"></a> ";
echo '<img src="data:image/jpeg;base64,'.base64_encode($petimg).'" />';
// echo '<h4>';
// echo $_SESSION['petname'] ;
// echo '</h4>';
//include 'desca.php';
//echo '</a>';
//echo '</li>';
?>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalForm" data-id="<?php echo $petid; ?>" id="formPet">FormOpen</button>
<?php
}
?>
//button click ajax script
<script>
$(document).ready(function() {
$(document).on('click', '#formPet', function(e) {
e.preventDefault();
var uid = $(this).data('id'); // it will get id of clicked row
$('#form-content').html(''); // leave it blank before ajax call
$('#formmodal-loader').show(); // load ajax loader
$.ajax({
url: 'form.php',
type: 'POST',
data: 'id=' + uid,
dataType: 'html'
})
.done(function(data) {
console.log(data);
$('#form-content').html('');
$('#form-content').html(data); // load response
$('#formmodal-loader').hide(); // hide ajax loader
})
.fail(function() {
$('#form-content').html('<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...');
$('#formmodal-loader').hide();
});
});
});
</script>
//This modal will execute once you click at-least 1 button in the while loop
<div class="modal fade" id="modalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h5 class="modal-title w-100 font-bold">PET MODAL</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div id="formmodal-loader" style="display: none; text-align: center;">
<img src="img/ajax-loader.gif">
</div>
<!-- content will be load here -->
<div id="form-content"></div>
</div>
</div>
</div>
</div>
//create a file name form.php and get the requested id from your ajax post
<?php
require_once('dbconfig.php');
if (isset($_REQUEST['id']) ){
$pet_id = $_REQUEST['id'];
//create a form or view content here base on the id of pet you want to add/edit/delete/view
}
I'm trying to get the autocomplete to be linked to another page on the server. here as follows:
<?php
if($_POST)
{
$q=$_POST['searchword'];
$q=addslashes($q);
if(strlen($q) >0) {
$sql_res=mysql_query("select `id`, `firstName`, `lastName`, `email`, `photo`, `phone` from contacts where user_id = '$_SESSION[user_id]' AND lower(concat_ws(' ', firstname, lastname)) like '%$q%' order by id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$id = $row['id'];
$firstName=$row['firstName'];
$lastName=$row['lastName'];
$photo=$row['photo'];
$phone=$row['phone'];
$email = $row['email'];
$b_firstName='<b>'.$q.'</b>';
$b_lastName='<b>'.$q.'</b>';
$final_firstName = str_ireplace($q, $b_firstName, $firstName);
$final_lastName = str_ireplace($q, $b_lastName, $lastName);
$img_src = base64_decode($photo);
$imgbinary = fread(fopen($img_src, "r"), filesize($img_src));
$img_str = base64_encode($imgbinary);
?>
<div class="display_box" align="left">
<img src=<?php echo "'data:image/jpg;base64,$img_str'";?> style="width:58px; height:48px; float:left; margin-right:6px;" />
<span class="name"><?php echo $final_firstName; ?></span> <?php echo $final_lastName; ?>
<br/>
<span style="font-size:9px; color:#999999"><?php echo $phone; ?></span>
<span style="font-size:9px; color:#999999"><br/><?php echo $email; ?></span>
</div>
<?php
}
}
}
?>
that's the search.php.
Now on the main page I have this in the header:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search-text").keyup(function()
{
var inputSearch = $(this).val();
var dataString = 'searchword='+ inputSearch;
if(inputSearch!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#divResult").html(html).show();
}
});
}return false;
});
jQuery("#divResult").click(function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("put tag close div tag here").html($name).text();
$('#inputSearch').val(decoded);
});
jQuery(document).click( function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#divResult").fadeOut();
}
});
});
</script>
<style type="text/css">
.contentArea{
width:600px;
margin:0 auto;
}
#inputSearch
{
width:250px;
border:solid 1px #000;
padding:3px;
}
#divResult
{
position:absolute;
width:255px;
display:none;
margin-top:-1px;
border:solid 2px #dedede;
border-top:0px;
overflow:hidden;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
-moz-border-bottom-right-radius: 6px;
-moz-border-bottom-left-radius: 6px;
box-shadow: 0px 0px 5px #999;
border-style: solid;
border-color: #333 #000000 #000000;
background-color: white;
}
.display_box
{
padding:4px; border-top:solid 1px #dedede;
font-size:12px; height:50px; line-height: 1.5;
}
.display_box:hover
{
background:#3399ff;
color:#FFFFFF;
cursor:pointer;
}
</style>
and this is the search bar:
<input class="search-text" id="inputSearch" name="search" type="text" placeholder="Search " value="" /><div id="divResult">
</div>
So basically what i'm trying to do is when a user searches and the auto complete comes up, they can click on the image/suggestion and it takes them to the page associated with that image.
Also if they click enter, the search will pick the first autocoplete and direct them to that page.
I'm new to javascript/jquery
First of all, you need to return unique data belongs to specific user in your ajax response.
For example, you can use user id. Your autocomplete item will be like;
<div class="display_box" align="left" id="<?php echo $id; ?>">
<img src=<?php echo "'data:image/jpg;base64,$img_str'";?> style="width:58px; height:48px; float:left; margin-right:6px;" />
<span class="name"><?php echo $final_firstName; ?></span> <?php echo $final_lastName; ?><br/>
<span style="font-size:9px; color:#999999"><?php echo $phone; ?></span>
<span style="font-size:9px; color:#999999"><br/><?php echo $email; ?></span>
</div>
When you clicked specific item, it will redirect related page. In your JS;
$(".display_box").on("click", function() {
var userId = $(this).attr("id");
window.location = "/user/" + userId;
});