I have build an instant search with AJAX using this tutorial, I am getting instant result but the problem is the div in which result comes stays open there.
I want to modify it like after getting instant result, then
when clicked anywhere on page the result(div) should disappear.
and when mouse-over again on input field result(div) should reappear.
AJAX Code
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("search-result").innerHTML="";
document.getElementById("search-result").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("search-result").innerHTML=xmlhttp.responseText;
document.getElementById("search-result").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
</script>
HTML Code
<div id="search">
<form action="" method="get" id="search-form" >
<input name="" type="" size="" id="search-input" onkeydown="showResult(this.value)"/>
<select name="" id="search-select">
<option value="all" >All</option>
<input type="hidden" name="" value="" />
</select>
<input type="submit" value="Search" id="search-btn" />
</form>
</div>
<div id="search-result"></div>
PHP Codes are simple MySQL Full Text Search query.
I tried like adding this but nothing happens
<input name="keyword" type="text" size="50" id="search-input" onkeydown="showResult(this.value)" onclick="(this.value==this.defaultValue) this.value='';" onmouseout="showResult(this.value='';)"/>
Please suggest any way of doing this.
Thanks.
A nasty way
<body>
<div id="main" onclick="fx(0)">
<div id="search">
<form action="" method="get" id="search-form" >
<input name="" type="" size="" id="search-input" onkeydown="showResult(this.value)"/>
<select name="" id="search-select">
<option value="all" >All</option>
<input type="hidden" name="" value="" />
</select>
<input type="submit" value="Search" id="search-btn" />
</form>
</div>
<div id="search-result" onclick="fx(1)"></div>
</div>
</body>
<script>
function fx(var flag)
{
// document.getElementById(theIdYouWantToShowHide).style.display="none" or inline or block ...
}
</script>
Got it finally, hope this helps others too.
<script type="text/javascript">
function showResult(str)
{
if (str.length==0)
{
document.getElementById("search-result").innerHTML="";
document.getElementById("search-result").style.border="0px";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("search-result").innerHTML=xmlhttp.responseText;
document.getElementById("search-result").style.border="1px solid #A5ACB2";
document.getElementById("search-result").style.display="block";
document.getElementById("search-input").onmouseover = function(){show_box()};
}
}
xmlhttp.open("GET","instant-search.php?keyword="+str,true);
xmlhttp.send();
}
function close_box(){
document.getElementById("search-result").style.display="none";
}
function show_box(){
document.getElementById("search-result").style.display="block";
}
document.onclick = function(){close_box()};
</script>
Related
I am having trouble with my php code. I have tried everything and nothing works.
I want that the form will save the search query into the database but but i canot use action="search.php" since the result is displayed on the index.php page so it need's to stay on the index page and execut the save.
The form:
<form class="form-domain" role="form" action="search.php" method=post>
<!-- Search input -->
<div class="search-input">
<span class="www">www.</span>
<input type="text" class="form-control input-domain" placeholder="vasa-nova-domena" name="ime_domene">
<div class="domain-extension">
<select class="form-control" name="koncnica">
<option value=".com" selected="">.com</option>
<option value=".si">.si</option>
</select>
</div>
</div><!-- /.search-input -->
<button class="btn btn-success btn-block" id="poslji" name="preglej" type="submit"><strong>PREVERI</strong></button>
</form>
Right after this form comes the php result so i need to stay on the index.php to have the result of the search visible but the same time i want the input/search that was given saved into the database.
I hope this wasen't to complicated. :)
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","<?php include 'search.php';?>",true);
xmlhttp.send();
}
}
</script>
I am trying to make an html select box which dynamically disables and enables based on what the user inputs in a different select box... This was working fine when I used just html, but I would like to use the jQuery plugin Chosen for this, and it is not working... The main thing I need to do is update chosen to be disabled or enabled based on the onchange for the other select box. Is this possible with chosen? And how? Thanks so much.
Below is my javascript:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PROCapture Marketing | My Dashboard</title>
<link rel="stylesheet" type="text/css" href="../Style Sheets/PCMBackOffice-Styles.css">
<link href="../Style Sheets/headermenuhome.css" rel="stylesheet"><script type="text/javascript" src="../Scripts/jQuery1.7.1.js"></script>
<script src="../Scripts/instantiatemenu.js"></script>
<script>
function displayleads(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("fromleadstransfer").innerHTML="<option value=''>Select Leads To Transfer...</option>";
document.getElementById("fromleadstransfer").disabled=true;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("fromleadstransfer").innerHTML=xmlhttp.responseText;
if (document.getElementById("fromleadstransfer").value != "noleads") {
document.getElementById("fromleadstransfer").disabled=false;
} else {
document.getElementById("fromleadstransfer").disabled=true;
}
}
}
xmlhttp.open("GET","../Scripts/transferfromselect.php?system="+str,true);
xmlhttp.send();
}
</script>
<script>
function displayfolders(str2)
{
var xmlhttp;
if (str2=="")
{
document.getElementById("tofoldertransfer").innerHTML="<option value=''>Select Folder To Send Leads...</option>";
document.getElementById("tofoldertransfer").disabled=true;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("tofoldertransfer").innerHTML=xmlhttp.responseText;
document.getElementById("tofoldertransfer").disabled=false;
}
}
xmlhttp.open("GET","../Scripts/transfertoselect.php?system="+str2,true);
xmlhttp.send();
}
</script>
<link rel="stylesheet" type="text/css" href="../chosen/chosen2.css">
<script src="../chosen/jquery.js"></script>
<script src="../chosen/chosen.jquery.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(".fromleadstransfer").chosen();
jQuery(".fromsystemtransfer").chosen();
jQuery(".tofoldertransfer").chosen();
jQuery(".tosystemtransfer").chosen();
jQuery(".operationselect").chosen({disable_search_threshold: 3});
});
And here is the form:
<form method="post" name="transferleadsform">
<div class="transferleftside">
<div class="primarytransfercontainer">
<span class="primarytransferspan">From:</span>
<br>
<div class="transferinnercontainer1"><label>Operation: </label>
<select id="operationselect" name="operationselect" class="operationselect">
<option value="Copy" selected="selected">Copy</option>
<option value="Move">Move</option>
</select></div>
<br>
<div class="transferinnercontainer2"><label>System: </label>
<select name="fromsystemtransfer" class="fromsystemtransfer" id="fromsystemtransfer" onChange="displayleads(this.value)">
<option value="">Select A System...</option>
<?php
foreach($systems as $systemid) {
?>
<option value="<?php echo $systemid?>"><?php echo $systemid?></option>
<?php
}
?>
</select></div>
<br>
<div class="transferinnercontainer2"><label>Leads: </label>
<select name="fromleadstransfer" multiple disabled="disabled" class="fromleadstransfer" id="fromleadstransfer">
<option value="">Select Leads To Transfer...</option>
</select></div>
</div>
</div>
<div class="transferrightside">
<div class="primarytransfercontainer">
<span class="primarytransferspan">To:</span>
<br>
<div class="transferinnercontainer1"><label>System: </label>
<select id="tosystemtransfer" name="tosystemtransfer" class="tosystemtransfer" onChange="displayfolders(this.value)">
<option value="">Select A System To Send Leads...</option>
<?php
foreach($systems as $systemid) {
?>
<option value="<?php echo $systemid?>"><?php echo $systemid?></option>
<?php
}
?>
</select></div>
<br>
<div class="transferinnercontainer3"><label>Folder: </label>
<select id="tofoldertransfer" name="tofoldertransfer" disabled="disabled" class="tofoldertransfer">
<option value="">Select Folder To Send Leads...</option>
</select></div>
<br>
<input type="submit" class="transferbutton TransferSprites" value="<< Transfer Leads >>">
</div>
</div>
<div class="longdivider TransferSprites">
</div>
</form>
after you disable the element, you need to trigger it's update function
$(element).prop('disabled', true).trigger("liszt:updated");
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.
jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");
I have a profile create page like this.
<html>
<head>
<script>
function validateMe(){
var xmlhttp;
var userEmail = document.getElementById("email").value;
var userPwd = document.getElementById("pwd").value;
//alert(userEmail);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//alert(xmlhttp.responseText);
}
document.getElementById("responds").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("POST","api.php?email="+userEmail+"&pwd="+userPwd,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="login" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table>
<tr><td colspan="2">Login</td></tr>
<tr><td>Username:</td><td><input type="text" name="email" id="email"/></td></tr>
<tr><td>Password:</td><td><input type="text" name="pwd" id="pwd"/></td></tr>
<tr><td><input type="button" value="Submit" name="submit" onclick="validateMe();"/><td></td></tr>
</table>
<div id="responds"></div>
</form>
</body>
</html>
I need to use the RESTful web service with php and ajax to insert these data into my MySql database.
How can I implement this. Can anyone help me out to do this.
First, I suggest you to use the jQuery Javascript framework. With it, it made dead simple to make AJAX requests and getting the input values (without worrying of the web browser, etc).
Second, I don't see any RESTful web service here. It's a simple POST form.
So please, details your question :)
I want to post the field values entered in this code to the page ajaxpost.php using Ajax and then do some operations there. What would be code required to be written in ajaxpost.php. Also woithout using any js file/jquery
Here is the code of page in which fields are entered, I would like to know what would be the code to be written in ajaxpost.php
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
var zz=document.f1.dd.value; //alert(zz);
var qq= document.f1.cc.value;
xmlhttp.open("POST","ajaxpost.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("dd=zz&cc=qq");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<form name="f1">
<input type="text" name="dd">
<input type="text" name="cc">
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</form>
</body>
</html>
I think you are looking for bare bones php and ajax for which there are tons of tutorials such as this one, which is quite close to what you are looking for.
I am trying to call a function with Javascript, HTML, AJAX, and PHP.
I am still new to Javascript, AJAX, and PHP.
Background info: I am trying to add a new customer to my database but I am now trying to get a confirmation message on the same page without the page refreshing.
This is what I have:
<script type="text/javascript">
function addCustomer(ln,fn,pn,dob)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","addCustomer.php?add_LN="+ln+"?add_FN="+fn+"?add_PN="+pn+"?add_DOB="+dob,true);
xmlhttp.send();
}
</script>
<p>Suggestions: <span id="txtHint"></span></p>
<form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">
<input type="text" name="add_LN" id="add_LN" />
<br />
<br />
<input type="text" name="add_FN" id="add_FN" />
<br />
<br />
<input type="text" name="add_PN" id="add_PN" />
<br />
<br />
<input type="text" name="add_DOB" id="add_DOB" />
<br />
<br />
<input type="submit" name="add_Customer" id="add_Customer" value="Add Customer" />
</form>
<span id="txtHint"></span>
</p> </td>
</tr>
</table>
</div>
I get a "This link appears broken"
With:
http://127.0.0.1/cpsc471/return%20addCustomer(this.add_LN,%20this.add_FN,%20this.add_PN,%20this.add_DOB);?add_LN=ee&add_FN=123&add_PN=eee&add_DOB=eee&add_Customer=Add+Customer
in the url bar.
What am I doing wrong? :) I do not want the page to refresh. I am trying to just get the confirmation or non-confirmation to display.
Thanks again for all the help!
Your problem is here:
<form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">
You don't want the form action to be a javascript call, you need to do this onclick or something.
The arguments above by #thiefmaster and #martin are correct: using jquery is much simpler. You are right about the framework thing, but in this case you need to go and code for a lot of troubles (responses, when is there a successfull AJAX call, different browsers etc)
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// put your codes here like
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
// document.getElementById("show_label").innerHTML='text as you wish like updated enjoy';
}
}
And add a label with the id of show_label