I have 2 dropdowns, just like the title.. The selected option must shown after the function of onchange meaning when it automatically refreshes the selected option must stay and show the selected options . The problem is when I select an option from the 2nd dropdown which has onchange function it refreshes and it gets back to the default option.
Here's the code
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-10">
<h1 class="page-header">
BRANCHES
</h1>
</div>
<div class="col-lg-2">
<a class="btn btn-default bad-marg" href="index.php?act=abr" role="button">Add Branch</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="form">
<form action="func_vbrs.php" method="POST" class="form-horizontal">
<fieldset>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label for="bl" class="control-label col-xs-3"><p class="left">Branch</p></label>
<div class="col-xs-8">
<div class="req">
<select name="bid" class='form-control'>
<option value='' default style='color:gray;'>Branch</option>
<?php
include_once "config.php";
$sql="select branchID, b, bl from branch where b!='HOK'";
$stmt=$con->prepare($sql);
$stmt->execute();
$stmt->bind_result($bid, $b, $bl);
$stmt->store_result();
while($stmt->fetch()){
echo '<option value="'.$bid.'">'.$b.'-'.$bl.'</option>';
}
?>
</select>
</div>
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="cat" class="control-label col-xs-3"><p class="left">Category</p></label>
<div class="col-xs-8">
<div class="req">
<select name="brcat" class="form-control" onchange='this.form.submit()'>
<option value="" default style="color:gray;">Category</option>
<option value="Stock">Stock</option>
<option value="Sales">Sales</option>
<option value="Stock Transfer">Stock Transfer</option>
</select>
</div>
</div>
<div class="col-xs-1">
</div>
</div>
</div>
<div class="col-lg-4">
</div>
</div>
<noscript><input type="submit" value="Submit"></noscript>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
As you can see the 2nd drop down is category, If a user already selects an option after the automatic refresh or onchange function, it gets back to default option.
You need to cross check against post on page load, and add a selected tag appropriately. There are more elegant solutions with less bulky code if you use a loop to create your options, but that's another question.
<?PHP
if (!empty($_POST['brcat'])){
$selected_item = $_POST['brcat'];
} else { $selected_item = Null; }
function selcheck($item1, $item2){
if ($item1 == $item2){
$ret = " selected=\"selected\" ";
} else {
$ret = "";
}
return($ret);
}
?>
<select name="brcat" class="form-control" onchange='this.form.submit()'>
<option value="" default style="color:gray;">Category</option>
<?PHP
$sel = selcheck("Stock",$selected_item);
?>
<option value="Stock"<?=$sel?>>Stock</option>
<?PHP
$sel = selcheck("Sales",$selected_item);
?>
<option value="Sales"<?=$sel?>>Sales</option>
<?PHP
$sel = selcheck("Stock Transfer",$selected_item);
?>
<option value="Stock Transfer"<?=$sel?>>Stock Transfer</option>
Related
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
<div style="margin-top:2%;display:none; " id="filt_box" id="reset">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown" id="filter_seller_user" name="filter_seller_user[]"
multiple="multiple">
#foreach($seller_user as $key=>$value)
<option value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown" id="filter_generated_by_user"
name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="btn_filter_submit" onclick="show_reset_data();">Clear</button>
</div>
</div>
using multiple try javascript code but not apply any changes
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script>
function show_reset_data() {
$("reset").each(function() { this.selectedIndex = 0 });
}
function show_reset_data() {
document.getElementById("reset").reset();
}
function show_reset_data() {
document.getElementById("reset").value="";
}
</script>
I inserted class="reset" in each selected field means input field and button clear Id="reset" create and simple write javascript code.
<div style="margin-top:2%;display:none; " id="filt_box">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown reset" id="filter_seller_user" name="filter_seller_user[]" multiple="multiple">
#foreach($seller_user as $key=>$value)
<option style = "font-size:13px;" value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown reset" id="filter_generated_by_user" name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option style = "font-size:13px;" value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option style = "font-size:13px;" value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control reset">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="reset" style="background-color: #ae3029; color:white;">Clear</button>
</div>
javascript code
$("#reset").on('click', function () {
$('.reset').val('');
});
I have 2 modal at same page using select2. I need to remove title on hover select2 in modal select form. I have tried
$('.select2-selection__rendered').hover(function () {
$(this).removeAttr('title');
});
to remove the hover, but it only works in 1 modal. In the other modal at the same page, it still show hover title.
Here's the script modal 1
<div class="form-group" id="form-class-1" style="margin-top: -10px">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<label for="class">Class *</label>
<div class="row">
<div class="col">
<select id="class" class="form-control" name="class" style="width: 100%">
<option value="" selected disabled>-- Choose Class --</option>
<?php
foreach ($class $c)
{
echo '<option value="'.$c->id.'">'.$c->class_name.' </option>';
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the script modal 2
<div class="form-group" id="form-class-2" style="margin-top: -10px">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<label for="class">Class*</label>
<div class="row">
<div class="col">
<select id="clas" class="form-control" name="clas" style="width: 100%">
<option value="" selected disabled>-- Choose Class --</option>
<?php
foreach ($class $c)
{
echo '<option value="'.$c->id.'">'.$c->class_name.' </option>';
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Every help is appreciated.
With your JS condition it only select the modal where it's hover because of $(this)
$('.select2-selection__rendered').hover(function () {
$(this).removeAttr('title');
});
you should change it to $( class of modal1 and modal2 ).removeAttr('title');
also why the two modal have the same id in the same page id="form-kelas1"?
id should be unique per page.
Am not very expert in jquery and stepformwizard. Am working on code written by someone else. The issue is the multistepformwizard fieldset is used and the next step should be loaded only when Next button is clicked. But currently both of the steps are visible on the screen with extra horizontal scrollbar. I dont want the step 2 form to be visible. Here is the html and jquery code.
<div class="ztab-sec ztab-desbrd bksrvsec bksecrv2">
<div class="row">
<div class="col-md-12">
<form action="<?php echo base_url()?>service/service_request" method="POST" id="wizard_example_6" autocomplete="off">
<input type="hidden" value="<?php echo $ownerArr[0]['email_id']; ?>" name="email_id">
<input type="hidden" value="<?php echo $ownerArr[0]['phone']; ?>" name="mobile">
<fieldset>
<legend>Basic information about your car</legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Vehicle Brand</label>
<select id="u_car_id" class="form-control" name="car_id" required>
<option selected disabled value="">Select a Car</option>
<?php foreach ($cars as $car_details) : ?>
<option value="<?php echo $car_details['user_car_id']; ?>"><?php echo $car_details['makesTitle']; ?> (<?php echo $car_details['modelsTitle']; ?>) <?php echo $car_details['car_reg_no']; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Variants</label>
<input type="text" class="form-control" name="variant" placeholder="Variants" required data-parsley-group="block0" id="variant" readonly pattern="^[a-zA-Z\s]*$">
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Transmission</label>
<input type="text" class="form-control" placeholder="Transmission" name="transmission" readonly required data-parsley-group="block0" id="transmission" pattern="^[a-zA-Z\s]*$">
</div>
</div>
</div>
<legend class="clearfix">Select service for your car? <a href="#" class="car-link pull-right" data-toggle="modal" data-target="#myModal3" >Add New Car</a></legend>
<div class="row bkmargin">
<div class="col-md-4 col-sm-4">
<div class="form-group besrvx">
<input id="option-one" name="service_type" value="1" class="styled-radio " type="radio" data-parsley-group="block0" required data-required-message="Please check one service">
<label class="srvlabel" id="1" for="option-one"><strong>Basic Service: </strong>
<span class="srvspa">3 months or 5000 kms (whichever is earlier)</span>
</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Vehicle picked up address </legend>
<div class="row bkmargin">
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Select Address</label>
<select class="form-control" id="user_add_id" name="pick_id">
<option selected disabled>Select Address</option>
<?php $i=1; foreach ($address as $user_details) : ?>
<option value="<?php echo $user_details['add_id'] ?>"> Address <?php echo $i; ?></option>
<?php $i++; endforeach; ?>
<option id="neww" class="neww" value="neww">Select new Address</option>
</select>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="form-group">
<label>Address Type</label>
<select class="form-control" id="add_type" name="add_type" disabled>
<option value="" selected disabled>Select Address Type</option>
<option value="Home">Home Address</option>
<option value="Office">Office Address</option>
<option value="Other">Other Address</option>
</select>
</div>
<div class="row bkmargin">
<noscript>
<input class="nocsript-finish-btn sf-right nocsript-sf-btn" type="submit" value="submit"/>
</noscript>
</div>
</fieldset>
</form>
I have skipped some part as its a long form. I want the second fieldset should only be visible when user clicks on next button
here is the jquery
w6 = $("#wizard_example_6").stepFormWizard({
onNext: function(b, a) {
return $("#wizard_example_6").parsley().validate("block" + b)
},
onFinish: function(b) {
return $("#wizard_example_6").parsley().validate()
}
});
var d = window.location.hash.match(/^#step-(\d+)/),
c = 0;
null !== d && (c = d[1] - 1);
w7 = $("#wizard_example_7").stepFormWizard({
startStep: c,
onNext: function(b, a) {
window.location.hash = "#step-" + (b + 2)
},
onPrev: function(b, a) {
window.location.hash = "#step-" + b
},
onFinish: function(b) {
window.location.hash = "#form-sended"
}
})
};
$(document).ready(function() {
prepare_example();
$("pre code").each(function(c, b) {
hljs.highlightBlock(b)
});
var d = $(location).attr("search").match(/t=([a-z]+)/);
"undefined" != typeof d && null != d ? ($(".sf-wizard").parent().removeClass("sf-sea").addClass("sf-" + d[1]), $(".bt-" + d[1]).removeClass("btn-default").addClass("btn-info")) : $(".bt-sea").removeClass("btn-default").addClass("btn-info")
});
Please help me with this. I have tried using but no luck also changed css display:none inplace of block but couldnt resolve the issue.
I am creating a flight search page. There's a form on the first page, when the submit button is clicked, the search results appear in the second page.
This is the first page: http://www.projectmeteor.dx.am/flights.php
Please do the following:
Select Origin: Guwahati
Select Destination: Kolkata
Click Search Fights
Something like this should appear on the second page.
Now I want to sort the results when I click on the headers(Operator, Departs,...).
I know I have to use AJAX. I've seen a few examples where they sort tables using AJAX but since my one's not implemented using tables, I'm not able to figure out how to get started.
Please ask for any code, in case you need it.
This is the first page(flights.php):
<div class="col-sm-12">
<div class="search">
<div class="content">
<form action="flightSearch.php" method="POST">
<div class="radioContainer">
<div class="col-sm-6 text-left">
<input type="radio" name="flightType" value="One Way" id="oneWay">
<label for="oneWay"><span class="radioLeft">One Way</span></label>
<input type="radio" name="flightType" value="Return Trip" id="returnTrip" checked>
<label for="returnTrip"><span class="radioLeft">Return Trip</span></label>
</div>
<div class="col-sm-6 text-right">
<input type="radio" name="flightClass" value="Business Class" id="businessClass">
<label for="businessClass"><span class="radioRight">Business Class</span></label>
<input type="radio" name="flightClass" value="Economy Class" id="economyClass" checked>
<label for="economyClass"><span class="radioRight">Economy Class</span></label>
</div>
</div> <!-- radioContainer -->
<div class="col-sm-6">
<div class="form-group">
<label for="origin">Origin:<p> </p></label>
<select id= "origin" data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Origin" name="origin">
<option value="New Delhi" data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option>
<option value="Mumbai" data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option>
<option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option>
<option value="Bangalore" data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option>
<option value="Chennai" data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option>
<option value="Pune" data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option>
<option value="Goa" data-subtext="GOI" data-tokens="GOI Goa">Goa</option>
<option value="Guwahati" data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option>
<option value="Gandhinagar" data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option>
<option value="Jammu" data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option>
<option value="Bhopal" data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option>
<option value="Agartala" data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="destination">Destination:<p> </p></label>
<select id= "destination" data-live-search="true" class="selectpicker form-control" data-size="5" title="Select Destination" name="destination">
<option value="New Delhi" data-subtext="DEL" data-tokens="DEL New Delhi">New Delhi</option>
<option value="Mumbai" data-subtext="BOM" data-tokens="BOM Mumbai">Mumbai</option>
<option value="Kolkata" data-subtext="CCU" data-tokens="CCU Kolkata">Kolkata</option>
<option value="Bangalore" data-subtext="BLR" data-tokens="BLR Bangalore">Bangalore</option>
<option value="Chennai" data-subtext="MAA" data-tokens="MAA Chennai">Chennai</option>
<option value="Pune" data-subtext="PNQ" data-tokens="PNQ Pune">Pune</option>
<option value="Goa" data-subtext="GOI" data-tokens="GOI Goa">Goa</option>
<option value="Guwahati" data-subtext="GAU" data-tokens="GAU Guwahati">Guwahati</option>
<option value="Gandhinagar" data-subtext="ISK" data-tokens="ISK Gandhinagar">Gandhinagar</option>
<option value="Jammu" data-subtext="IXJ" data-tokens="IXJ Jammu">Jammu</option>
<option value="Bhopal" data-subtext="BHO" data-tokens="BHI Bhopal">Bhopal</option>
<option value="Agartala" data-subtext="IXA" data-tokens="IXA Agartala">Agartala</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="datetime1">Select Departure Date:<p> </p></label>
<div class="input-group date" id="datetimepicker1">
<input id="datetime1" type="text" class="inputDate form-control" placeholder="Select Departure Date" name="depart"/>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label for="datetime2">Select Return Date:<p> </p></label>
<div class="input-group date" id="datetimepicker2">
<input id="datetime2" type="text" class="inputDate form-control" placeholder="Select Return Date" name="return"/>
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="adults">No. of adults:<p> </p></label>
<div class="form-group">
<select id= "adults" class="selectpicker form-control" data-size="5" title="Aged 18 and above" name="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
<div class="col-sm-3">
<label for="children">No. of children:<p> </p></label>
<div class="form-group">
<select id= "children" class="selectpicker form-control" data-size="5" title="Aged upto 17" name="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
<div class="col-sm-12 text-center">
<input type="submit" class="button" name="searchFlights" value="Search Flights">
</div>
</form>
</div> <!-- content -->
</div> <!-- search -->
</div>
This is the second page(flight_search.php):
<?php include("common/header.php"); ?>
<?php
$type=$_POST["flightType"];
$class=$_POST["flightClass"];
$origin=$_POST["origin"];
$destination=$_POST["destination"];
$depart=$_POST["depart"];
if($type=="Return Trip") { //let's store the return value only if the flightType is a Return Trip
$return=$_POST["return"];
}
$adults=$_POST["adults"];
$children=$_POST["children"];
if($class=="Economy Class")
$className="Economy";
else
$className="Business";
?>
<div class="spacer">a</div>
<div class="searchFlights">
<div class="query">
<?php echo $type; ?> <?php echo $className; ?> Flights from <?php echo $origin; ?> to <?php echo $destination; ?>
</div>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "projectmeteor";
// Creating a connection to projectmeteor MySQL database
$conn = new mysqli($servername, $username, $password, $dbname);
// Checking if we've successfully connected to the database
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM flights WHERE origin='$origin' AND destination='$destination'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
?>
<div class="listItemMenuContainer">
<div class="col-sm-2 text-center">
<div class="headings">
Operator
</div>
</div>
<div class="col-sm-2 text-center">
<div class="headings">
Departs
</div>
</div>
<div class="col-sm-2 text-center">
<div class="headings">
Arrives
</div>
</div>
<div class="col-sm-2 text-center">
<div class="headings">
Fare
</div>
</div>
<div class="col-sm-2 text-center">
<div class="headings">
Ticket Type
</div>
</div>
<div class="col-sm-2 text-center">
<div class="headings">
Seats Available
</div>
</div>
</div> <!-- listItemMenuContainer -->
<div class="spacerLarge">.</div> <!-- just a dummy class for creating some space -->
</div> <!-- searchFlights -->
<?php
while($row = $result->fetch_assoc()) {
?>
<div class="searchFlights">
<div class="listItem">
<!-- FLIGHT INFO STARTS -->
<div class="col-sm-2 text-center">
<div class="col-sm-4 text-center">
<div class="operatorLogo text-center">
<img src="images/flights/operatorLogos/indigo.jpg">
</div>
</div>
<div class="col-sm-8 text-center">
<div class="values flightOperator">
IndiGo
</div>
<div class="flightNoSubscript">
<?php echo $row["flight_no"]; ?>
</div>
</div>
</div>
<!-- FLIGHT INFO ENDS -->
<!-- DEPARTS STARTS -->
<div class="col-sm-2 text-center">
<div class="values departs">
13:25
</div>
<div class="departsSubscript">
<?php echo $row["origin"]; ?>
</div>
</div>
<!-- DEPARTS ENDS -->
<!-- DESTINATION STARTS -->
<div class="col-sm-2 text-center">
<div class="values arrives">
15:49
</div>
<div class="arrivesSubscript">
<?php echo $row["destination"]; ?>
</div>
</div>
<!-- DESTINATION ENDS -->
<!-- FARE STARTS -->
<div class="col-sm-2 text-center">
<div class="values fare">
<?php echo $row["fare"]; ?>
</div>
<div class="fareSubscript">
incl. of GST
</div>
</div>
<!-- FARE ENDS -->
<!-- TYPE STARTS -->
<div class="col-sm-2 text-center">
<div class="values type">
Refundable
</div>
<div class="typeSubscript">
<?php echo $row["class"]; ?>
</div>
</div>
<!-- TYPE ENDS -->
<!-- SEATS AVAILABLE STARTS -->
<div class="col-sm-2 text-center">
<div class="values availabilityGreen">
<?php echo $row["seats_available"]; ?>
</div>
<div class="availabilitySubscript">
<input type="submit" class="availabilityBookingButton" value="Book Now">
</div>
</div>
<!-- SEATS AVAILABLE ENDS -->
</div> <!-- listItem 1 -->
</div>
<?php
}
} else {
?>
<div class="searchFlights">
<div class="noFlights">
No flights found. Please consider modifying your search query.
</div>
</div>
<?php
}
?>
<?php $conn->close(); //closing the connection to the database ?>
<div class="spacerLarge">.</div> <!-- just a dummy class for creating some space -->
<?php include("common/footer.php"); ?>
Thanks
First all you need to know that is better to use one of the solutions that don't use ajax, becouse all the request that your are going to use in ajax are going to make new mysql query and server processing to make the html.
But if you want to use AJAX i have an easy idea how to do it.
1- First all you need to add the jquery.js library to your code if you haven't the source, you can download it from https://jquery.com/
2 - Change the code of the headings to
<div class="headings" id="order1" data-id="operator"> Operator</div>
<div class="headings" id="order2" data-id="departs"> Departs</div>
Also i think that you need to put all the results in a general div that should be before your while sentence and to close it after the } this div is the one that should contain all the results divs when you update the page with ajax you are going to replace this div content to the new content that the flightProcesor.php return.
<div id="results"> <!-- NEW TAG -->
<?php
while($row = $result->fetch_assoc())
{
?>
<div class="searchFlights">
<div class="listItem">
.....
</div>
</div><?php
}?>
</div> <!-- NEW TAG -->
3 - Read the div order* event and dispatch the ajax event
<script language="javascript">
$("div[id*=order]").on('click', function ()
{
var column = $(this).attr('data-id');
var oneWay = $('#oneWay').val();
var returnTrip = $('#returnTrip').val();
.....
.....
$.ajax({
type:'POST',
url:"/flightProcesor.php",
data: {orderBy: column, oneWay: oneWay, returnTrip: returnTrip},
success:function(data) {
if(data)
{
$('#results').html(data);
}
}
});
});
</script>
4 - Last step you need to make the flightProcesor.php that should to make the mysql query with the orderBy parameter that you are sending via POST to order and then you need to create a php $html var that contain all the code to return:
<?php
if ($result->num_rows > 0)
{
$string_var = ""; //INIT STRING VAR.
while($row = $result->fetch_assoc())
{
$string_var .= '<div class="searchFlights">
<div class="listItem">
<!-- FLIGHT INFO STARTS -->
<div class="col-sm-2 text-center">
<div class="col-sm-4 text-center">
<div class="operatorLogo text-center"><img src="images/flights/operatorLogos/indigo.jpg"></div>
</div>
<div class="col-sm-8 text-center">
<div class="values flightOperator">IndiGo</div>
<div class="flightNoSubscript">'.$row["flight_no"].'</div>
</div>
</div>
<!-- FLIGHT INFO ENDS -->
<!-- DEPARTS STARTS -->
<div class="col-sm-2 text-center">
<div class="values departs">13:25</div>
<div class="departsSubscript">'.$row["origin"].'</div>
</div>
<!-- DEPARTS ENDS -->
<!-- DESTINATION STARTS -->
<div class="col-sm-2 text-center">
<div class="values arrives">15:49</div>
<div class="arrivesSubscript">'.$row["destination"].'</div>
</div>
<!-- DESTINATION ENDS -->
<!-- FARE STARTS -->
<div class="col-sm-2 text-center">
<div class="values fare">'.$row["fare"].'</div>
<div class="fareSubscript">incl. of GST</div>
</div>
<!-- FARE ENDS -->
<!-- TYPE STARTS -->
<div class="col-sm-2 text-center">
<div class="values type">Refundable</div>
<div class="typeSubscript">'.$row["class"].'</div>
</div>
<!-- TYPE ENDS -->
<!-- SEATS AVAILABLE STARTS -->
<div class="col-sm-2 text-center">
<div class="values availabilityGreen">'.$row["seats_available"].'</div>
<div class="availabilitySubscript"><input type="submit" class="availabilityBookingButton" value="Book Now"></div> <!-- MAYBE YOU NEED AN IDENTIFICATION VALUE FOR EACH ROW IN THIS SUBMIT -->
</div>
<!-- SEATS AVAILABLE ENDS -->
</div> <!-- listItem 1 -->
</div>';
}
}
else
{
$string_var = '<div class="searchFlights">
<div class="noFlights">No flights found. Please consider modifying your search query.</div>
</div>';
}
return $string_var;
?>
EDITED: The } to close the while need to be before the return.
EDITED: ALL FLIGHT PROCESOR PHP CODE ADDED.
I hope that something like that help you.
I've been looking around for an explanation on how to do this for a while but haven't found a decent explanation yet, so apologies if this is a repeat.
I don't have any problem retrieving JSON using GET but I'm confused as to how to use POST to send JSON and have it interpreted at the far end by a PHP script
I'm trying to do this on localhost for now.
Form is as follows:
<div class="row">
<div class="col-sm-2 spacer"> </div>
<div class="col-sm-8 topSpaceNeeded"><h4>Select Currencies to Exchange</h4></div>
<div class="col-sm-2 spacer"> </div>
</div>
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<form id="formSendDataWithAjax" method="POST" action="./postedJsonData">
<div id="formSection1">
<div class="row">
<div class="col-sm-12"> </div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="userId">User ID</label>
<select class="form-control" id="userId" name="userId">
<option value="123456">123456</option>
<option value="654321">654321</option>
<option value="134256">134256</option>
<option value="652431">652431</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="originatingCountry" id="countryLabel">Country of Origin</label>
<select class="form-control" id="originatingCountry" name="originatingCountry">
<option value="IE">IRELAND</option>
<option value="EN">ENGLAND</option>
<option value="FR">FRANCE</option>
<option value="PL">POLAND</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="currencyFrom">Base Currency</label>
<select class="form-control" id="currencyFrom" name="currencyFrom" >
<option value="AUD">AUD</OPTION>
<option value="CAD">CAD</OPTION>
<option value="CHF">CHF</OPTION>
<option value="CZK">CZK</OPTION>
<option value="DKK">DKK</OPTION>
<option value="EUR" SELECTED>EUR</OPTION>
<option value="GBP">GBP</OPTION>
<option value="HKD">HKD</OPTION>
<option value="HUF">HUF</OPTION>
<option value="NOK">NOK</OPTION>
<option value="NZD">NZD</OPTION>
<option value="PLN">PLN</OPTION>
<option value="SEK">SEK</OPTION>
<option value="USD">USD</OPTION>
<option value="ZAR">ZAR</OPTION>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="currencyTo">Buy Currency</label>
<select class="form-control" id="currencyTo" name="currencyTo">
<option value="AUD">AUD</OPTION>
<option value="CAD">CAD</OPTION>
<option value="CHF">CHF</OPTION>
<option value="DKK">DKK</OPTION>
<option value="EUR" SELECTED>EUR</OPTION>
<option value="GBP">GBP</OPTION>
<option value="HKD">HKD</OPTION>
<option value="HUF">HUF</OPTION>
<option value="NOK">NOK</OPTION>
<option value="NZD">NZD</OPTION>
<option value="PLN">PLN</OPTION>
<option value="SEK">SEK</OPTION>
<option value="USD">USD</OPTION>
<option value="ZAR">ZAR</OPTION>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"> </div>
</div>
</div>
<div id="formSection2">
<div class="row">
<div class="col-sm-12"> </div>
</div>
<div class="row">
<div class="col-sm-4"> </div>
<div class="col-sm-4">
<div class="form-group">
<label for="rate" id="rateLabel"> </label>
<input type="hidden" id="rate" name="rate" value="" >
</div>
</div>
<div class="col-sm-4"> </div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="amountSell">You Sell:</label>
<input type="number" class="form-control" step="0.10" id="amountSell" name="amountSell" value="1.00" >
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="amountBuy">You Buy:</label>
<input type="number" class="form-control" step="0.01" id="amountBuy" name="amountBuy" value="1.00" >
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"> </div>
</div>
<div class="row">
<div class="col-sm-4"> </div>
<div class="col-sm-4">
<input type="submit" id="transfer" class="btn btn-primary btn-block" id="transfer" name="transfer" value="TRANSFER NOW">
</div>
<div class="col-sm-4"> </div>
</div>
</div>
</form>
</div>
<div class="col-sm-1"> </div>
</div>
I know it's probably easier to use JQuery, but Javascript is what I know so I'd like to stick with that if possible.
The Javascript is as follows:
document.getElementById('formSendDataWithAjax').onsubmit =submitDataWithAjax;
function submitDataWithAjax(e)
{
// intercept form submission by preventing the script from following the url of the form
e.preventDefault();
var f = e.target,
formData= new FormData(f),
xhr = new XMLHttpRequest();
xhr.open("POST", f.action);
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
xhr.send(formData);
}
What I believe this script should do is prevent the postedJsonData page from loading when the form is submitted. Instead, the data is converted to JSON and should then be sent via AJAX to the postedJsonData PHP script
If this is correct, how do I get postedJsonData script to listen for the data?
Is it enough to do this to extract it to an array?
$dataArr = file_get_contents("php://input");
jQuery is much easier, I'd highly recommend it.
To use jQuery, just include this at the top of your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Then, to do AJAX/JSON/PHP requests, replace what you currently have in your Javascript file with:
$(document).ready(function() {
$("#formSendDataWithAjax").submit(function() { //Whenever form with ID="formSendDataWithAjax" is submitted
$.ajax({ //Make AJAX POST call
type: "POST", //POST, instead of GET
url: "postedJsonData.php", //Location of PHP script
dataType: "JSON", //JSON
data: {
userid: $("#userId").val(), //These values will be JSON-encoded automatically
country: $("#originatingCountry").val(), //Magically JSON-encoded
etc.
}
}).done(function(returnValue) { //returnValue could be any JSON string: "{ "result" : "success" }, { "result" : "error" }, etc.
alert("Your PHP script returned this value: "+returnValue);
});
}
return false;
}
Then in your PHP script, simply calling $_POST['userid'] or $_POST['country'] will give you the value POSTed by the AJAX call. E.g.
<?php
$userid = (int) $_POST['userid'];
$country = $_POST['country'];
//Do stuff
?>