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.
Related
I have a list of persons in a bootstrap table and to delete a single person i am using a form in bootstrap modal. For deleting user needs to select some information for which i have a select box. On select value,different divs are shown. IF user selects married, then div with married_approval class should be show and if user selects Others then div with other class should be shown else both div should be hidden. I have tried this and it works fine for 1st user but for rest of the users show/hide is not working. Please help.
HTML
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="email">Reason</label>
<div class="col-sm-8">
<select name="i_deletereason" id="i_deletereason" class="form-select select" onchange="checkselect(this);">
<option value="Deceased">Deceased</option>
<option value="Married">Married</option>
<option value="Others" >Others</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group other" style="display: none;">
<textarea id="i_deletereason_other" name="i_deletereason_other" class="form-control" placeholder="Please Specify others" ></textarea>
</div>
</div>
</div>
<div class="row">
<div class="married_approval" align="center" style="display: none;">
<div class="col-sm-12">
<label class="control-label"><b>Married in same cast or other cast ?</b></label>
</div>
<div class="col-sm-12" align="center">
<label class="radio-inline"><input type="radio" name="cast" class="cast" value="same_cast">Same Cast</label>
<label class="radio-inline"><input type="radio" name="cast" class="cast" value="other_cast">Other Cast</labe>
</div>
</div>
</div>
JS:
<script type="text/javascript">
function checkselect(delSelect){
var selected_var = $(delSelect).val();
var other_text=document.getElementsByClassName("other");
var is_married = document.getElementsByClassName("married_approval");
console.log('selected_var: '+selected_var);
//return false;
switch(selected_var){
case 'Married':
{
console.log('var: '+selected_var);
other_text[0].style.display='none';
is_married[0].style.display='block';
break;
}
case 'Others':
{
console.log('var: '+selected_var);
other_text[0].style.display='block';
is_married[0].style.display='none';
break;
}
default:
{console.log('var: '+selected_var);
other_text[0].style.display='none';
is_married[0].style.display='none';
}
}
}
</script>
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 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 want to generate Jquery select 2 when clicking a plus button. see below screenshot
the append functionality and removing rows are working perfectly from side.
I am initializing a div with display none for appending HTML.
like below,,,
<div class="newbrndsrs" style="display:none">
<div class="row">
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
<div class="col-lg-8 col-sm-8 prepend-icon">
<select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
<option value=""></option>
<?php
while($row9=mysql_fetch_assoc($brandfetchAjax)){ ?>
<option value="<?php echo $row9['ID'];?>"><?php echo $row9['BrandName'];?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
<div class="col-lg-8 col-sm-8">
<select name="brand[]" class="form-control form-white slctjpmodelname">
</select>
</div>
</div>
</div>
<span class="btn btn-primary addline"><i class="glyphicon glyphicon-minus"></i></span>
</div>
</div>
When Clicking the Button plus I am taking the above HTML and bind it to the bottom of the plus button.
<div class="row apndarea">
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Trade/Brand Name</label>
<div class="col-lg-8 col-sm-8 prepend-icon">
<select name="brandfk[]" class="form-control form-white modlfetch" data-placeholder="Trade/Brand Name">
<option value=""></option>
<?php
while($row2=mysql_fetch_assoc($brandfetch)){ ?>
<option value="<?php echo $row2['ID'];?>"><?php echo $row2['BrandName'];?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="col-md-5" style="margin-bottom: 15px;">
<div class="form-group">
<label for="" class="col-lg-4 col-sm-4" style="text-align: right;">Series Name</label>
<div class="col-lg-8 col-sm-8">
<select name="brand[]" class="form-control form-white slctjpmodelname">
<option value="">Series </option>
<option value="">Series </option>
<option value="">Series </option>
</select>
</div>
</div>
</div>
<span class="btn btn-primary addline"><i class="glyphicon glyphicon-plus"></i></span>
</div>
Jquery....
$(".addline").click(function(){
var eqtype = $("select[name=EquipmentTypeID]").val();
if(eqtype == ""){
$("select[name=EquipmentTypeID]").next().show();
return false;
}else{
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
But New Dynamic Select2 Not working....
I cant make click on it...
What is the Issue ?
$(document).on('click',".addline", function(){
var eqtype = $("select[name=EquipmentTypeID]").val();
if(eqtype == ""){
$("select[name=EquipmentTypeID]").next().show();
return false;
}else{
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
Click is not binded to dynamically created object, use on
Use Event deligation
$(document).on('click', ".addline", function () {
var eqtype = $("select[name=EquipmentTypeID]").val();
if (eqtype == "") {
$("select[name=EquipmentTypeID]").next().show();
return false;
} else {
$(".form-error").hide();
$(".apndarea").after($(".newbrndsrs").html());
}
});
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>