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?
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'm trying to create a more friendly input form where I ask for a user's name in a text box, and based on the information typed in, I would like to echo this to a display a little lower on the page, to personalize the page a little farther.
I'm trying to use AJAX, but am open to any better options out there...
<script>
function myFunction()
{
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("GET",document.getElementById("fname");,true);
xmlhttp.send();
}
</script>
<p>Contact's first name <input type="text" id="fname" onkeyup="myFunction()">
<div id="myDiv">Contact's</div> phone number <input type="text" id="phn"></p>
use this simple code
<script>
function myFunction(val){
document.getElementById("myDiv").innerHTML = val;
}</script>
<p>Contact's first name <input type="text" id="fname" onkeyup="myFunction(this.value)">
<div id="myDiv">Contact's</div> phone number <input type="text" id="phn"></p>
Okay let me get this properly.
1) User types his name
2) User has to submit the name (Add a button)
3) Using AJAX (Only if you have to store the name to DB dynamically, that's a good choice)
4) Update the user name if AJAX was success, or show a error
5) If you just want update name on page, no need for AJAX. (Well I don't see the use of it unless you are just trying to learn things)
HTML
<form id="user-form">
<div>
<span>Contact's first name</span>
<input type="text" id="fname" name="fname">
</div>
<div>
<span>Contact's phone number</span>
<input type="text" id="phn" name="phn">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
<p id="user-name">User name</p>
JS
var userForm = document.getElementById("user-form");
userForm.onSubmit = function(e){
e.preventDefault();
var name = document.getElementById("fname").value;
var phone = document.getElementById("phone").value;
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("user-id").innerHTML = name;
}
}
xmlhttp.open("POST","file.ext",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=" + name + "&phone=" + phone);
}
I would recommend you to start using jQuery library. It would simplify things a lot
I would use jQuery for your ajax as it has some cross browser compatible functions such as $.get.
Apart from that I don't really see any other recommendation I could provide apart from a small syntax error:
xmlhttp.open("GET",document.getElementById("fname");,true);
You should remove the semi-colon:
xmlhttp.open("GET",document.getElementById("fname"),true);
As #Hitham commented, sending a request on every keyup is probably not wise. You should add a button and use the click event to send the information, or use a form and use the submit event. However, if this is a test exercise then it shouldn't be a problem.
Hi I am really new to web development. I would like to know how I can access a ajax returned value in php.
When i select an option from my drop down i get another dropdown using ajax. But I would like to use the value on the page using php.
Practice Name :
<select name="practiceName" id="practiceName" onchange="showAssociate(this.value)">
<option value="">Select an option</option>
<option value="abc">abc</option>
<option value="xyz">xyz</option>
</select>
<p>
<div id="associate">
</div>
The ajax code is:
function showAssociate(str)
{
if (str=="")
{
document.getElementById("associate").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("associate").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getAssociate.php?q="+str,true);
xmlhttp.send();
}
The ajax is returning the desired drop box and values in the div 'associate' but how can i use those values in php while submitting the form? I just need to access and echo it somewhere on the screen. please do help.
Thanks in advance.
If you want the data that was retrieved via ajax to be sent along with the form, you can populate a hidden input, so that the data will be transported in the form submission.
<input type="hidden" id="data" name="data" value="" />
In the Javascript, populate its value:
document.getElementById("associate").innerHTML=xmlhttp.responseText;
document.getElementById("data").value = xmlhttp.responseText;
On the PHP side when you handle the form submission, it will be present in $_POST['data'] (assuming the form's method is POST).
Im new to this ajax and javascript thing. What I want is first to popup a confirm box, if true then perform xmlhttprequest. Afterwards I want to redirect the user to a new page. Here is what I've got.
<script type="text/javascript">
function showUser(str)
{
var r=confirm("Delete this customer?");
if (r==true) {
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","sletkunde.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<form onclick="showUser(id.value); return false;" >
<input type="hidden" value="<?echo $id;?>" name="id">
<input type="button" value="tryk" name="knap">
</form>
<br>
<div id="txtHint"><b>something here</b></div>
And here is the sletkunde.php
<?
$q=$_GET["q"];
$slet = mysql_query("DELETE FROM Kunder WHERE KundeID = '".$q."'");
echo "hey"; // Just to see if it works
?>
The confirm box works, the mysql_query works, the echo "hey"; works. But how can I get it to redirect to kunder.php right after all of this (automatically).
Use location.href = "http://www.mysite.com/kunder.php" in your onreadystatechange function.
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.