I have a div hidden initially, a text box which performs a live search in the database and returns an array of the matched results. I want to make the div visible only if a value from the array is selected and hide it otherwise. How can i do this?
<html>
<head>
<link rel="stylesheet" type="text/css" href="b.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script src="jquery.autocomplete.js"></script>
<script>
function showDiv() {
$("#panel").slideDown("slow");
}
</script>
</head>
<body>
<h2>ESAMP</h2>
<h3 class="sup">SUPPORT</h3>
<h3 class="fed">FEEDBACK</h3>
<div class="container">
<div class="tag"><p>SEARCH</p></div>
<input class="box" type="text" name="serch" id="serch" placeholder="Enter Your Software Name" onEnter="showDiv()"/>
<input class="mybutton" type = "submit" value="Search" onclick="showDiv()">
</form>
<img class =resize src="texture_graphite_blue.jpg" alt="" />
<div id="panel" style="display:none;" class="panel" >
HELLO
</div>
</div>
</body>
</html>
currently i am showing the div on a button click. I want to show the div when the input value is selected from an array.
Related
<!DOCTYPE html>
<html>
<head>
<title>Library Project</title>
<link rel="stylesheet" href="styles.css">
<script src="practice.js" defer></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Library</h1>
</div>
<div class="bottomContainer">
<div class="button">
<button id="newBook" onclick="displayCard();">New Book</button>
</div>
<div class="cardsContainer">
<div class="window">
<form action="">
<div class="close-btn">
<p>Add A New Book</p>
<button class="x">×</button>
</div>
<input type="text" placeholder="Title" id="title" value="">
<input type="text" placeholder="Author" id="author" value="">
<input type="text" placeholder="Pages" id="pages" value="">
<button class="submit" onclick="createDiv();">Submit</button>
</form>
</div>
</div>
<div class="cards"></div>
</div>
</div>
// Button Stuff //
let newBook = document.getElementById("newBook");
let cardsContainer = document.querySelector(".cardsContainer");
let x = document.querySelector(".x");
// Brings up & closes form window //
function displayCard() {
cardsContainer.style.display = "flex";
}
// Creates Div //
function createDiv() {
alert("working");
let cards = document.querySelector(".cards");
let strong = document.createElement("strong");
strong.textContent = "strong";
cards.append(strong);
};
I have two buttons. The first button brings up a modal that has a "Submit" button on it. When I press "Submit" I want to add the word "Strong" to the div ".cards". The button alerts "working" and then strong appears on the screen but when I click off the alert, the word "strong" disappears. I tried changing the code around so that when I press the "New Book" button the word strong appears and stays, however, if I try to also have the modal come up after, the word "strong" disappears again. I have no idea what I'm doing wrong and I just need to be able to append stuff after hitting the "Submit" button.
I'm trying to allow a pop up to display always when a user is basically unregistered and wishes to view the certain page. I saw an example of how to do it but I am completely stuck it's not appearing on my page. Any ideas?
Thanks!
Image: http://puu.sh/cr1Zz/1b5da28635.png
My code on that page(CSS is listed in the image above)
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Honda | </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--start lightbox -->
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.lightbox.js"></script>
<script>
// Initiate Lightbox
$(function() {
$('.gallery1 a').lightbox();
});
</script>
</head>
<body>
<div class='modalDialog'>You cannot view this page! Please register</div>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li><span>About</span></li>
<li class="active" class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$user=$_POST['user'];
$pass=$_POST['pass'];
$pass = strip_tags($pass);
$pass = md5($pass); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$user."' AND password='".$pass."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($user == $dbusername && $pass == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$user;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password!</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" name="user" required />
<label>Password:</label>
<input type="password" name="pass" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer2">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Although you include jQuery, the modal dialog is part of the jQueryUI. But that on its own won't solve your problem. You have declared a div with the class modalDialog, so I suppose this is the line to be shown in the dialog. I would suggest you to use id's instead of classes because a class covers multiple document objects, and you really want to show one dialog here. From the jQueryUI docs:
<div id="dialog" title="Please register">
<p>You cannot view this page! Please register</p>
</div>
Add the jQuery call:
$(function() {
$( "#dialog" ).dialog();
});
And that should work just fine
If you decide to go with the lightbox modal dialog your code should look like:
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>lease register</h1>
<p>You cannot view this page! Please register</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
To call the code use:
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
How to search records in table . i want to search data using id. if that id is available in database then open edit.jsp if not exist then display any error message. i want to use jsp technology.
Search.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Page</title>
<link rel="stylesheet" type="text/css" href="hicourt.css"/>
<script language="javascript" type="text/javascript">
</script>
<body onLoad="randomString()">
<form name="f1" method="post" action="edit.jsp">
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation" align="center">
Search Registration Number
</div>
<div id="content_area">
<p class="contact"><label for="name"><span style="font-weight:bold">EDIT</span></label>
<input id="id" name="id" placeholder="Advocate Reg Number" required="" type="text">
</p>
<div style="text-align:center">
<input name="submit" id="submit" tabindex="10" value="EDIT" align="middle"type="submit">
</div> </div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>
i have created and added data into database through jsp.Now my problem is with edit/update the database which should be done through html form.In one for i select student rollno and form should display all other fields and then i can edit it and update the database.
editcourse.jsp
<!DOCTYPE html>
<html>
<head>
<link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
<link href="css/default.css" media="screen" rel="stylesheet"/>
<link href="sidebarmenu.css" rel="stylesheet" type="text/css">
<script src="sidebarmenu.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-ui-1.10.2.custom.min.js"></script>
</head>
<body>
<!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->
<form name="f1" method="post" class="anu" action="Edit_coursedetails.jsp">
<%#include file="adminheader.jsp"%>
<%#include file="sidemenus.jsp" %>
<div id="container">
<div style="float:right;width:10%;border:0;font-color:#163362">Log Out</div><br>
<div class="content"><center>Edit Course</center><br>
<div class="formElements,rightcol" align="center">
<label>Course code:
<span><input type="text" id="txtCoursecode" name="txtCoursecode" ></span></label>
</div><br>
<div class="buttons">
<button type="submit" class="primaryAction">Edit</button>
<button type="reset" class="primaryAction">Clear</button>
</div>
</div>
</div>
</form>
</body>
</html>
edit_coursedetails.jsp
<!DOCTYPE html>
<html>
<head>
<link href="css/redmond/jquery-ui-1.10.2.custom.min.css" media="screen" rel="stylesheet"/>
<link href="css/default.css" media="screen" rel="stylesheet"/>
<link href="sidebarmenu.css" rel="stylesheet" type="text/css">
<script src="sidebarmenu.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery-ui-1.10.2.custom.min.js"></script>
</head>
<body>
<!--<form id="frmExamRegistration" method="post" enctype="multipart/form-data" class="anu">-->
<%
ccode=request.getParameter("txtCoursecode");
try {
Statement st = null;
st=conn.createStatement();
ResultSet rs = st.executeQuery("select * from courses where course='"+txtCoursecode+"'");
if(rs.next())
{
cname=rs.getString("cname");
Description=rs.getString("Description");
}
%>
Edit courses
<form name="f1" method="post" class="anu" action="Add_coursedetails.jsp">
<%#include file="adminheader.jsp"%>
<%#include file="sidemenus.jsp" %>
<div id="container">
<div style="float:right;width:10%;border:0;font-color:#163362">Log Out</div><br>
<div class="content"><center>Add Course</center><br>
<div class="formElements,rightcol" align="center">
<label>Course code:
<span><input type="text" id="txtCoursecode" name="txtCoursecode" value="<%=rs.ccode%>"></span></label>
</div><br>
<div class="formElements,rightcol" align="center">
<label>Course Name:
<span><input type="text" id="txtCoursename" name="txtCoursename" value="<%=rs.cname%>"></span></label>
</div><br>
<div class="formElements,rightcol" align="center">
<label>Duration:
<span>        <input type="text" id="txtDuration" name="txtDuration" value="<%=rs.getString("3")%>"></span></label>
</div>
<div class="buttons">
<button type="submit" class="primaryAction">Update</button>
<button type="reset" class="primaryAction">Clear</button>
</div>
</div>
</div>
<%
}
}
catch(Exception e){}
%>
</form>
</body>
</html>
in editcourse form by giving ccode it should display all other field from database with thier value and then i can modify it
You can use either ajax or give url of jsp in form action attribute.
then in that jsp get txtRollno from request, retrieve fields from database for this rollno, populate data into appropriate field and then you can edit it and then update into database.
As other friends said you need to use ajax call and you said that you don't know ajax.
So I think these tutorials help you:
1) What is AJAX?
2) AJAX Example
3) jQuery Ajax call tutorial
Good Luck ;)
When this code runs you can see it doesn't render the programmatically added input field as a mobile styled element. I could force it to by adding all the classes that get put in when a page is rendered (commented out). Is there an easier way?
http://jsfiddle.net/mckennatim/KKTr4/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<h3>Add List</h3>
<form>
<div data-role="controlgroup" id="addwhat">
<input type="text" name="inp0" class="inp" />
</div>
<div data-role="controlgroup" data-type="horizontal" class="aisubmit">
<input type="submit" data-theme="b" id="addinput" value="Add Input"/>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script>
var ct =0;
$('body').on('click', "#addinput", function (e) {
ct++;
e.stopImmediatePropagation();
e.preventDefault();
//to add form elemnt you have to add all the class css stuff
//$('#addwhat').append('<input type="text" name="list' + ct + '" class="inp ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />');
$('#addwhat').append('<input type="text" name="list' + ct + '"/>');
});
</script>
</body>
</html>
$('#thelists').trigger('create');
should do the trick.