I m sending some checkbox which are selected,their value to next php page with ajax call.but in the above code i m not able to send it to ajax call
code is as below
<html>
<head>
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function get_check_value() {
var c_value = [];
$('input[name="services"]:checked').each(function () {
c_value.push(this.value);
});
return c_value.join(',');
}
$(document).ready(function(){
$('#btnSubmit').on('click', function () {
alert("hi");
//var os = $('#originState').val();
\ //var c = $('#commodity').val();
//var ds = $('#destState').val();
var ser = get_check_value();
//var queryString = "os=" + os;
var queryString = "&ser=" + ser;
alert("hi");
$.ajax({
//alert("ajax");
type: "POST",
url: "sortingajax.php",
data: "query=" + queryString,
success: function (b) {
// alert(a+' ok. '+b)
$('#results').html(b);
console.log(b);
}
});
});
});
</script>
<form name="searchForm">
<input type="checkbox" name="services" value="twic" />TWIC
<br/>
<input type="checkbox" name="services" value="enclosedTrucking" />Enclosed Trucking
<br/>
<input type="checkbox" name="services" value="flatBedTrucking" />Flat Bed Trucking
<br/>
<input type="submit" id="btnSubmit" value="Submit" />
</form>
<div id="results">
</div>
</body>
</html>
In above code.When i select checkboxes from page,and on click of submit.i want to pass them to next php page with ajax call.but its not going to next page and no response is coming back....
Please help guysss
ajaxphp page
<?php
include('connection.php');
$query=$_GET['query'];
echo $query;
$countsql='SELECT * FROM XML';
$countsql1=mysql_query($countsql);
$numrows = mysql_num_rows($countsql1);
$countArray2=array();
print($countsql);
while($row = mysql_fetch_array($countsql1)) {
// Append to the array
$countArray2[] = $row;
//echo $row['PID']."<BR />";
}
?>
<?php
foreach($countArray2 as $array)
{
?>
<div class="search">
hi
</div>
<?php $i++; } ?>
data: "query=" + queryString, is wrong because the "query=" + is a syntax error. It should be:
var queryString = "os="+os+"&ser="+ser;
and then
data : queryString,
Or you can format it like:
data : {
'ser' : ser,
'os' : os
}
Then there is the fact that your Ajax is using POST but you're trying to read the request with $_GET rather than $_POST or $_REQUEST in your PHP.
You can try with these two amends:
var data : "?ser=" + ser; // put '?' instead of '&'
Or more jQuery way:
data : { ser : ser },
And you are missing the dataType in your ajax:
dataType : 'html',
On the php side, as this is a post request, so you have to put this:
$query=$_POST['ser'];
Maybe you're forgetting to prevent the Submit button default behavior:
<script type="text/javascript">
function get_check_value() {
var c_value = [];
$('input[name="services"]:checked').each(function () {
c_value.push(this.value);
});
return c_value.join(',');
}
$(document).ready(function(){
$('#btnSubmit').on('click', function (evt) {
evt.preventDefault();
alert("hi");
//var os = $('#originState').val();
\ //var c = $('#commodity').val();
//var ds = $('#destState').val();
var ser = get_check_value();
//var queryString = "os=" + os;
var queryString = "&ser=" + ser;
alert("hi");
$.ajax({
//alert("ajax");
type: "POST",
url: "sortingajax.php",
data: "query=" + queryString,
success: function (b) {
// alert(a+' ok. '+b)
$('#results').html(b);
console.log(b);
}
});
});
});
</script>
Related
Okay so I'm having that JS :
<script>
$('#building').change(function () {
var selectedValue = $(this).val();
$.ajax({
url: 'getunits.php',
type: "POST",
async:false,
contentType: "application/x-www-form-urlencoded;charset=utf-8",
data:{
building: selectedValue,
},
success: function (result) {
var e = document.getElementById('div1');
e.innerHTML = result;
eval(document.getElementById('runscript').innerHTML);
}
});
});
</script>
<div id="div1">
</div>
And that in the PHP :
$selectunits = mysqli_query($con,"SELECT * FROM `units` WHERE `building`='".$building."'");
echo '<script type="text/javascript" id="runscript">';
while($rowunits = mysqli_fetch_assoc($selectunits))
{
//echo '<option value="'.$rowunits["ID"].'">'.$rowunits["unit_number"].'</option>';
echo '$("#unit").append("<option value="'.$rowunits["ID"].'">'.$rowunits["unit_number"].'</option>");';
}
echo'</\script>';
All I'm trying to do is after I select from the first select, an Ajax goes to that URL and fills up the 2nd select with different data. So what I was able to do is do a loop in the PHP to create the required JS to fill up.
i have form that need the previous value inserted....i'm using ajax,but the success: function(data) wont let me moved to the next page...
here is my code
HTML
<form>
<input type="text" name="id_1" id="id_1>
<input type="text" name="id_2" id="id_2>
<input type="text" name="id_3" id="id_3>
<button type="button" onclick="next();">
</form>
<div id="tabelna"></div>
JQuery
var id_1 = $('#id_1').val();
var id_2= $('#id_2').val();
var id_3= $('#id_3').val();
var datana = 'id_1='+id_1+'&id_2='+id_2+'&id_3='+id_3;
var urlna="<?=base_url()?>something/something/something";
$.ajax({
type: 'POST',
url: urlna,
data: datana,
beforeSend:function(data){
},
message:"<center>><h3>Loading Data. . .</h3></center>"
});
},
error: function(data) {
jAlert('Failed');
},
success: function(data) {
load();
}
})
return false;
}
function load()
{
$('#tabelna').load('<?=base_url()?>something/something/something') (This is my mistake)
}
CONTROLLER
function set_value()
{
extract($_POST);
$d['id1'] = $this-db->query('SELECT * FROM TBL1 where id='.$id_1);
$d['id2'] = $this-db->query('SELECT * FROM TBL2 where id='.$id_2);
$d['id3'] = $this-db->query('SELECT * FROM TBL3 where id='.$id_3);
$this->load->view('something/v_add',$d); (this is my mistake)
}
How can i pass the submitted value to the controller and shows new form ?
we can call controller function using window.location
function load()
{
window.location.href = "<?php echo site_url('controller_d/login/admin_link_delete_user');?>";
}
I'm designing an admin panel full Ajax and i have a problem...
In a Page i select information db with ajax like this :
html
<body>
<div id="loadbox"></div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
js
$(document).ready(function() {
show_all();
});
function show_all() {
work = "select";
$.ajax({
type: "POST",
url: "server.php",
data: "work=" + work,
success: function(data) {
$("#loadbox").html(data);
}
});
}
and server.php file :
$pdo = new PDO('mysql:host=localhost;dbname=test','root','');
if(isset($_POST['work'])){
$work = $_POST['work'];
if ($work == 'select') {
$query = $pdo->query("SELECT * FROM t1");
while ($s = $query->fetch()) {
$name = $s['name'];
$family = $s['family'];
echo '<div id="xRight">'.$name.'</div>';
echo '<div id="xLeft">'.$family.'</div><br>';
}
}
}
Now I need to use the id xRight for this cod :
$("#xRight").click(function(){
$(this).addClass("vv");
});
But because div and id made in server.php file . id to be not found for use
How can I fix this problem ?!
i think it's working for you
$(document).on("click","#xRight",function(event) {
// $(this).addClass("vv");
$(event.target).addClass("vv");
});
Try This
$("#parent_container_of_xRight").on('click','#xRight',function(){
//my cod js
});
Write the code :-
$("#xRight").click(function(){
//my cod js
});
inside document.ready function . For example :-
$( document ).ready(function() {
$("#xRight").on("click",function(){
//my cod js
});
});
This is actually the first time I'm using ajax so honestly I don't know a single thing. Tried to read articles about ajax but no luck. What I'm trying to do here is quite simple really I just want to try to figure out how ajax works and what I should do to make it work. I wanted it so that when I try to click the login button and go to my php and display "login success" it works when the textboxes are empty it displays fields are empty but the ajax doesn't seem to work
Here is what I've done so far this is my index.php A.K.A login page
<!DOCTYPE html>
<html>
<head>
<title>O-Chat</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script101.js"></script>
</head>
<body>
<div class="content">
<div class="features">
<div><br><br><br><br><br><br><br><br><br><br>FEATURES HERE</div>
</div>
<div class="loginpart">
<div class="banner"><br><br><br>BANNER HERE</div>
<div class="login" id="divlogin">
<div class="login-header">Login</div>
<form name="loginform" class="login">
<input class="login" type="text" name="pUname" id="jUname" maxlength="35" placeholder="Username"/><br>
<input class="login" type="Password" name="pPass" id="jPass" maxlength="40" placeholder="Password"/><br>
<span class="error" id="jloginerror"></span>
<div class="button" id="login"" onclick="validate();">
</div>
</form>
<div class="login-footer" onclick="location.href='register.php'">Not yet a member?<br>Register Now! Click Here!</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-container">
Home |
About O-Chat |
Contact Us
<div style="float: right;">Copyright © 2000 - 2017 O-Chat Unlimited (071813-S) All Rights Reserved</div>
</div>
</div>
</body>
</html>
Here is my javascript file script101.js
function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
document.getElementById("divlogin").style.height = '275px';
document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
document.getElementById("jloginerror").innerHTML = "";
document.getElementById("divlogin").style.height = '250px';
$.ajax({
type: "post",
url: "login.php",
data: data,
sucess:function(data){
$("#jloginerror").text(data);
}
});
}
}
<?php
echo "very successful";
?>
Remove $ from the function declaration $function validate(). You can not use $ here.
You can use it like either
$(function(){
....
});
OR
if you wants to keep name of your function then just remove $ before the function, simply use it as:
function validate(){
....
}
and on ajax , you can use
$.ajax({
method: "post",
url: "login.php",
data: data;
sucess:function(data){
$("#jloginerror").text(data);
}
});
So your full code should be like as follows:
function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
document.getElementById("divlogin").style.height = '275px';
document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
document.getElementById("jloginerror").innerHTML = "";
$.ajax({
type: "post",
url: "login.php",
data: data,
sucess:function(data){
$("#jloginerror").text(data);
}
});
}
}
Remove $ from the function keyword and Jquery works with element id or name var uname = $("#jUname").val(); var pass = $("#jPass").val(); and do not use ; for separating and you should use , $.ajax({}), use $.ajax({}) instead of ajax({}) because its Jquery function not javascript function.
function validate() {
var uname = $("#jUname").val();
var pass = $("#jPass").val();
var data = "&uname=" + uname + "&pass=" + pass;
if(!uname.match(/\S/) || !pass.match(/\S/)) {
document.getElementById("divlogin").style.height = '275px';
document.getElementById("jloginerror").innerHTML = "Some fields are empty!";
}
else
{
document.getElementById("jloginerror").innerHTML = "";
$.ajax({
type: "post",
url: "login.php",
data: data,
sucess:function(data){
$("#jloginerror").text(data);
}
});
}
}
I have four files like this. The user click on a submit button in file interactive-map.php. The data then pass to statesearch.php with a javascript file overview.js and overview-statistic.js. Then I want to be able to click on the checkbox, which will invoke a construtor that will make an ajax call. The problem starts at file overview.js saying that I got an error after the call status 0. I know that means the page refreshes after ajax call. I look at other solution How to stop refreshing page after ajax call? but the problem does not go away after doing event.preventDefault(). I don't understand why.
interactive-map.php
<form action="statesearch.php" class="post" id="post" method="get">
<input class="stateAttr" name="stateAttr" type="hidden" value=data[stateAttr]>
<input class="counties" name="counties"type="hidden" value=data[county]>
<input class="river" name="rivers" type="hidden" value=data[river]>
<input class="city" name="cities" type="hidden" value=data[city]>
<input id="submit" type="submit">
</form>
statesearch.php
<script src="overview.js"></script>
<script src='overview-statistic.js'></script>
...
<?php
if (isset($_GET["data"])) {
$stateAttr = str_replace("\"", "" ,$_GET["data"]["stateAttr"]);
$cities = str_replace("\"", "" , $_GET["data"]["cities"]);
$counties = str_replace("\"", "" , $_GET["data"]["counties"]);
$rivers = str_replace("\"", "", $_GET["data"]["rivers"]);
}
....
<div class='cities-display'>
<p><label><input class='city-checkbox0' type='checkbox'</label>city1</p>
<p><label><input class='city-checkbox1' type='checkbox'</label>city2</p>
<p><label><input class='city-checkbox2' type='checkbox'</label>city3</p>
...
</div>
?>
overview.js
$(document).ready(function () {
$(".cities-display input[type=checkbox]").on("change", function (event) {
if (this.checked) {
city = $(this).closest("p").text();
address = city + ', USA';
var graphDemo = new GetStat(city); //<-- Problem here. Call from overview-statistic.js
...
}
else {
deleteMark($(this).closest("div").index()); // Call from map-animate.js
}
});
}
overview-statistic.js
function GetStat(input) {
...
this.input = input;
this.getEntity();
}
GetStat.prototype = {
getEntity: function () {
var self = this;
// Look up entity
$.ajax({
url: "https://api.opendatanetwork.com/entity/v1?entity_name="+this.input+", CA&entity_type=region.place&app_token="+this.apiKey,
type: "GET",
success: function (data) {
var entity_id = data["entities"][0]["id"].toString();
self.entity = entity_id;
self.getDemo(entity_id);
self.getEdu(entity_id);
self.getJob(entity_id);
},
error: function(xhr) {
var response = xhr.responseText;
console.log(response);
var statusMessage = xhr.status + ' ' + xhr.statusText;
var message = 'Query failed, php script returned this status: ';
var message = message + statusMessage + ' response: ' + response;
alert(message);
}
})
}
....
}