Sava search query and stay on same page - php

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>

Related

PHP Ajax with a form

I have a form that let user to choose where them come from..
I have list out the country list by select box..
and i success to do it onchange and use ajax to read out all the state list..
actually i have two php file.. one is the main one that contain all the code include the form.. another one is generate state list.. my ajax code and form are in the main php
this is the one that generate state list...
$cID = $_GET["country"];
$sql = "SELECT * FROM States WHERE CountryID=$cID";
$result = $db->get_results($sql);
if (isset($result)) {
foreach ( $result as $states ) {
?>
<input type="checkbox" name="chkState[]" value="<?=$states->StateID?>" /> <?=$states->StateName?><br />
<?php
}
}
this is part of my code that read out..
but my problem is...
where i submit the form..
i only get the variable of country.. i cannot take the data of state that use ajax to generate out...
sample of my form
<form action="" name="place">
<select name="cboCountry" class="drop" onchange="showState(this.value)">
//some php code the list out the country
</select>
<div id="txtHint">
</div>
<input type="submit" name="submit" value="submit" />
</form>
and here my ajax code
<script>
function showState(str)
{
alert('xxx');
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","state_list.php?country="+str,true);
xmlhttp.send();
}
</script>
so when i submit the from with a save button... i only get the date of country and state are missing.. any body can help me? or having any way to do what i want?

Attaching CKEditor in ajax page

I was try to attach the ckeditor to a textarea in php page, which is being called by ajax in a html page, but ckeditor is not appearing in textarea. Can any one have any idea, Why it is not happening, it just making me freak.
TRY1.HTML
<script type="text/javascript">
function load()
{
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("div_content").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","try2.php?",true);
xmlhttp.send();
}
</script>
<!--end tinymcs-->
</head>
<body>
<input type="button" onclick="load()">
<div id="div_content">
</div>
</body>
</html>
TRY2.PHP
<textarea id="txt1"> </textarea>
That is because the textarea in which you are binding the editor was not present on the initial load of the page so its not getting binded.
You should bind that on the success call back of ajax call.
On Success you should do bind the textarea with ckeditor and it will work.
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("div_content").innerHTML=xmlhttp.responseText;
document.getElementById("txt1").ckEditor();
//or whatever the exact code you do for ckEditor
}

Modification For AJAX Instant Search

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>

How to integrate RESTful webservice with php and ajax

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 :)

AJAX to post values without using any jquery file

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.

Categories