Search the Community
Showing results for tags 'modal'.
-
Hi guys, Not sure where this one should be posted but will post here. Please move to appropriate if needed. I am trying to open a new modal by clicking a link inside another one. It doesn't seem to want to play ball and the open modal just closes. Can anyone give me a punch bag or maybe just point me in the right direction? The button: <button type="button" id="viewcharterBtn" data-bs-toggle="modal" data-bs-target="#viewcharterModal<?php echo $row['id']; ?>" data-bs-dismiss="modal" class="btn btn-primary">View</button> The modal I want to open: <div tabindex="-1" class="modal" id="viewcharterModal<?php echo $row['id']; ?>" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><h4><i class="fa fa-map-marker fa-fw"></i><?php echo $row['charter_name']; ?></h4></div> <div class="modal-body"> <h3><?php echo $row['charter_name']; ?></h3> <p>Leaving at <?php echo $row['dep_date']; ?></p> <p>Customer's name is <?php echo $row['customer_name']; ?> and their contact number is <?php echo $row['customer_number']; ?>.</p> <p>The vehicle for this trip is <?php echo $row['fleet_number']; ?></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="fa fa-ban"></i> <?php echo lang('CLOSE'); ?></button> </div> </div> </div> </div> Any help would be appreciated.
-
Hello Coders, wanted to know if anybody could help to validate modal form based on the query below please? Appreciate your help if possible. Thank you so much! MODAL FORM FORM <div class="modal fade" id="exampleModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true"> > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Add user</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <i aria-hidden="true" class="ki ki-close"></i> </button> </div> <div class="modal-body"> <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" class="needs-validation" novalidate id="adduser"> <div class="form-row"> <div class="form-group col-md-6 mb-3"> <label for="inputState">Select a name</label><br> <select class="form-control select2 <?php echo (!empty($fullname_err)) ? 'is-invalid' : ''; ?>" id="kt_select2_1" name="fullname" required> <option value="" selected>Select a name</option> <?php require_once('./conn/inc.php'); $sql = mysqli_query($link,"SELECT * FROM members ORDER BY fullname ASC"); while($row=mysqli_fetch_array($sql)) { $mid = $row['mid']; $fullname = $row['fullname']; echo '<option value="'.$mid.'">'.$fullname.'</option>'; } ?> </select> <span class="invalid-feedback"><?php echo $fullname_err; ?></span> </div> <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3"> <label for="username">Username</label> <input type="text" class="form-control <?php echo (!empty($uname_err)) ? 'is-invalid' : ''; ?>" placeholder="username" name="uname" required> <span class="invalid-feedback"><?php echo $uname_err; ?></span> </div> <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3"> <label for="showpass">Password</label> <input type="password" class="form-control <?php echo (!empty($password_err)) ? 'is-invalid' : ''; ?>" id="showpass" placeholder="Password" name="password" required> <span class="invalid-feedback"><?php echo $password_err; ?></span> </div> <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 mb-3"> <label for="showpass2">Confirm Password</label> <input type="password" name="confirm_password" class="form-control <?php echo (!empty($confirm_password_err)) ? 'is-invalid' : ''; ?>" id="showpass2" placeholder="Confirm password" required> <span class="invalid-feedback"><?php echo $confirm_password_err; ?></span> </div> </div> </div> <div class="modal-footer"> <div class="checkbox-inline mr-2"> <label class="checkbox"> <input type="checkbox" onclick="myFunction()" class="form-check-input" id="exampleCheck1"> <span></span> Show password </label> </div> <button type="reset" class="btn btn-secondary">Clear</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </div> </div> </div> VALIDATION QUERY <?php // Define variables and initialize with empty values $fullname = $uname = $password = $confirm_password = ""; $fullname_err = $uname_err = $password_err = $confirm_password_err = ""; // Processing form data when form is submitted if($_SERVER["REQUEST_METHOD"] == "POST"){ // Validate username if(empty(trim($_POST["uname"]))){ $uname_err = "Please enter a username."; } elseif(!preg_match('/^[a-zA-Z0-9_]+$/', trim($_POST["uname"]))){ $uname_err = "Username can only contain letters, numbers, and underscores."; } else{ // Prepare a select statement $sql = "SELECT id FROM users WHERE uname = ?"; 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 = trim($_POST["uname"]); // Attempt to execute the prepared statement if(mysqli_stmt_execute($stmt)){ /* store result */ mysqli_stmt_store_result($stmt); if(mysqli_stmt_num_rows($stmt) == 1){ $uname_err = "This username is already taken."; } else{ $uname = trim($_POST["uname"]); } } else{ echo "Oops! Something went wrong. Please try again later."; } // Close statement mysqli_stmt_close($stmt); } } // Validate username if(empty(trim($_POST["fullname"]))){ $fullname_err = "Please enter a fullname."; } else{ // Prepare a select statement $sql = "SELECT id FROM users WHERE fullname = ?"; if($stmt = mysqli_prepare($link, $sql)){ // Bind variables to the prepared statement as parameters mysqli_stmt_bind_param($stmt, "s", $param_fullname); // Set parameters $param_fullname = trim($_POST["fullname"]); // Attempt to execute the prepared statement if(mysqli_stmt_execute($stmt)){ /* store result */ mysqli_stmt_store_result($stmt); if(mysqli_stmt_num_rows($stmt) == 1){ $fullname_err = "This names is already taken."; } else{ $fullname = trim($_POST["fullname"]); } } else{ echo "Oops! Something went wrong. Please try again later."; } // Close statement mysqli_stmt_close($stmt); } } // Validate password if(empty(trim($_POST["password"]))){ $password_err = "Please enter a password."; } elseif(strlen(trim($_POST["password"])) < 6){ $password_err = "Password must have atleast 6 characters."; } else{ $password = trim($_POST["password"]); } // Validate confirm password if(empty(trim($_POST["confirm_password"]))){ $confirm_password_err = "Please confirm password."; } else{ $confirm_password = trim($_POST["confirm_password"]); if(empty($password_err) && ($password != $confirm_password)){ $confirm_password_err = "Password did not match."; } } // Check input errors before inserting in database if(empty($fullname_err) && empty($uname_err) && empty($password_err) && empty($confirm_password_err)){ $fullname = mysqli_real_escape_string($link, $_REQUEST['fullname']); $uname = mysqli_real_escape_string($link, $_REQUEST['uname']); // Prepare an insert statement $sql = "INSERT INTO users (fullname, uname, password) VALUES (?, ?, ?)"; if($stmt = mysqli_prepare($link, $sql)){ // Bind variables to the prepared statement as parameters mysqli_stmt_bind_param($stmt, "sss", $param_fullname, $param_username, $param_password); // Set parameters $param_fullname = $fullname; $param_username = $uname; $param_password = password_hash($password, PASSWORD_DEFAULT); // Creates a password hash // Attempt to execute the prepared statement if(mysqli_stmt_execute($stmt)){ // Redirect to login page header("location: users.php"); $_SESSION['status'] = "Record Successfuly Saved!"; } else{ echo "Oops! Something went wrong. Please try again later."; } // Close statement mysqli_stmt_close($stmt); } } // Close connection // mysqli_close($link); } ?> I have put javascript to validate form before submitting and this only works on client side ; It won't fetch data from database to compare. <script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { 'use strict'; window.addEventListener('load', function() { // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.getElementsByClassName('needs-validation'); // Loop over them and prevent submission var validation = Array.prototype.filter.call(forms, function(form) { form.addEventListener('submit', function(event) { if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false); }); }, false); })(); </script>
-
Hi guys, I have a video into a bootstrap modal form that is opened on click. Now when i close the modal i want that video to stop playing. I've manage to do some javascript to do that but instead of stopping the the video i want it stops all the video from that page. How can i target in the script below only the ID of the modal that i want to be stoped from playing? <script> $('body').on('hidden.bs.modal', '.modal', function () { $('video').trigger('pause'); }); </script>
-
- javascript
- boostrap
-
(and 3 more)
Tagged with:
-
Hi all, I have 3 files, namely, [custom.js / allitem.php / fetch_pages.php]. where i have been compiling, studying and at the same time create a website of my own. I am a total newbie, so i gather examples from the entire web and try to put it together. But right now, I am stuck for 3 long days going 4 days tomorrow in a single problem whereas my head is banging on how to do it. Also been searching in internet of the same problem this has. but unfortunately, i find similar but still cant get it to work. The codes below are currently working as I want it to be. Except from starting at this location, at [fetch_pages.php] --> <span class="page_name"><a class="show-popup" href="#?id='.$row['id'].'">'.$row['name'].'</a></span> Where I dont know how to retrieve the value of id='.$row['id'].' and passed it to below location and use it to query the products where id=$id. <div class="overlay-bg" id="overlay-bg"> <div class="overlay-content"> $result = mysql_query("SELECT * FROM products WHERE id=$id", $mysqli); </div> </div> Can anyone help me code it out from this. Please.... ---------------------------------------------------------------------------------------- custom.js $(document).ready(function(){ // show popup when you click on the link $('.show-popup').click(function(event){ event.preventDefault(); var docHeight = $(document).height(); var scrollTop = $(window).scrollTop(); $('.overlay-bg').show().css({'height' : docHeight}); $('.overlay-content').css({'top': scrollTop+20+'px'}); }); $('.close-btn').click(function(){ $('.overlay-bg').hide(); // hide the overlay }); $('.overlay-bg').click(function(){ $('.overlay-bg').hide(); }) $('.overlay-content').click(function(){ return false; }); document.getElementById('data-id').innerHTML = 'data-id'; return id = 'data-id' }); allitem.php <?php session_register(); session_start(); include("connect.php"); $catphp=$_GET["catphp"]; $_SESSION['catphp']=$catphp; //PAGINATION---------------------------------- $results = mysqli_query($mysqli,"SELECT COUNT(*) FROM products WHERE itemcon='$catphp'"); $get_total_rows = mysqli_fetch_array($results); //total records //break total records into pages $pages = ceil(($get_total_rows[0]/$item_per_page) + 1); //create pagination if($pages > 1) { $pagination = ''; $pagination .= '<ul class="paginate">'; for($i = 1; $i<$pages; $i++) { $pagination .= '<li><a href="#" class="paginate_click" id="'.$i.'-page">'.$i.'</a></li>'; } $pagination .= '</ul>'; } //PAGINATION---------------------------------- ?> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="overlay/custom.js"></script> <link href='overlay/overlaypopup.css' rel='stylesheet' type='text/css'> <script type="text/javascript"> $(document).ready(function() { $("#results").load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');}); //initial page number to load $(".paginate_click").click(function (e) { $("#results").prepend('<div class="loading-indication"><img src="ajax-loader.gif" /> Loading...</div>'); var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number. var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need $('.paginate_click').removeClass('active'); //remove any active class //post page number and load returned data into result element //notice (page_num-1), subtract 1 to get actual starting point $("#results").load("fetch_pages.php", {'page':(page_num-1)}, function(){ }); $(this).addClass('active'); //add active class to currently clicked element (style purpose) return false; //prevent going to herf link }); }); </script> </head> <body> <div id="results"></div> <?php echo $pagination; ?> </body> fetch_pages.php <?php session_start(); $catphp = $_SESSION['catphp']; include("connect.php"); //include config file ?><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="overlay/custom.js"></script> <link href='overlay/overlaypopup.css' rel='stylesheet' type='text/css'> </head> <?php //sanitize post value $page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); //validate page number is really numaric if(!is_numeric($page_number)) { die('Invalid page number!'); } //get current starting point of records $position = ($page_number * $item_per_page); //Limit our results within a specified range. $results = mysqli_query($mysqli,"SELECT * FROM products WHERE itemcon='$catphp' ORDER BY id ASC LIMIT $position, $item_per_page"); //output results from database to a paginated window echo '<ul class="page_result">'; while($row = mysqli_fetch_array($results)) { echo '<li id="item_'.$row["id"].'">'.$row["id"].'. <span class="product-thumb"><img src="uploads/thumbs/'.$row['pic'].'"></span> <span class="page_name"><a class="show-popup" href="#?id='.$row['id'].'">'.$row['name'].'</a> </span> <br /><br /> <span class="page_description">'.$row["description"].' </span><br /><br /> <span class="page_itemcondesc">Condition : <span class="page_itemcon">'.$row["itemcon"].'</span> </span> <span class="page_warrantydesc">Warranty : <span class="page_warranty">'.$row["warranty"].'</span> </span> <br /><br /> <span class="page_price">Price:'.$row["price"].'</span> </li>'; } echo '</ul>'; ?> <div class="overlay-bg" id="overlay-bg"> <div class="overlay-content"> <font style="font-weight:bold">Product Details </font> <br /> <?php include "xx.isd"; $mysqli = mysql_connect($mysql_hostname,$mysql_user,$mysql_password); if (!$mysqli) { die("Database connection failed: " . mysql_error()); } //Select a database to use $db_select = mysql_select_db($mysql_database,$mysqli); //Perform database query to read the table entry $result = mysql_query("SELECT * FROM products WHERE id=$id", $mysqli); if (!$result) { die("Database query failed: " . mysql_error()); } //Use returned data while($row = mysql_fetch_array($result)) { $id=$row['id']; $product_code=$row['product_code']; $name=$row['name']; $description=$row['description']; $specs=$row['specs']; $accessory=$row['accessory']; $notes=$row['notes']; $itemcon=$row['itemcon']; $warranty=$row['warranty']; $price=$row['price']; $stocks=$row['stocks']; $category=$row['category']; $pic=$row['pic']; echo '<li id="item_'.$row["product_code"].'">'.$row["product_code"].' <span class="page_name">'.$row["name"].'</a> </span> <br /><br /> <span class="page_description">'.$row["description"].' </span><br /><br /> <span class="page_specs"><font style="font-weight:bold">Specification:</font> '.$row["specs"].' </span><br /><br /> <span class="page_accessory"><font style="font-weight:bold">Accessories:</font> '.$row["accessory"].' </span><br /><br /> <span class="page_notes"><font style="font-weight:bold">Notes:</font> '.$row["notes"].' </span><br /><br /> <span class="page_itemcon"><font style="font-weight:bold">Condition:</font> '.$row["itemcon"].' </span> <span class="page_itemcon"><font style="font-weight:bold">Warranty:</font> '.$row["warranty"].' </span><br /><br /> <span class="page_price"><font style="font-weight:bold">Price:</font> '.$row["price"].'</span> <span class="page_price"><font style="font-weight:bold">Stocks:</font> '.$row["stocks"].'</span> <br /><br /> </li>'; echo '<li id="item_">'.' <span class="product-thumb"><img src="uploads/thumbs/'.$row['pic'].'"></span> </li>'; } //Get images from upload_data $sql2="select file_name from upload_data where prod_name='$name'"; $result2=mysql_query($sql2,$mysqli) or die(mysql_error()); while($row2=mysql_fetch_array($result2)) { $name2=$row2['file_name']; ?> <span class="product-thumb"> <?php echo "<img src='../../uploads/thumbs/".$name2."'>"; ?> </span> <?php } //Close connection mysql_close($mysqli); ?> <br /> <button class="close-btn">Close</button> </div> </div> <?php echo '</ul>'; ?>
-
I'm using pretty photo. I want to refresh the parent page when I close the modal window which is an iframe. This script closes the modal, but does not refresh the parent frame. <a href="#" onclick="window.parent.jQuery.prettyPhoto.close();">Close</a>
- 1 reply
-
- prettyphoto
- javascript
-
(and 1 more)
Tagged with: