jQuery: Save a select element option that has been selected - javascript

Hey guys I am trying to save the option that a user has selected on my form however I am unsure how I can do this.
I will briefly explain my setup...
I have this form on my home page:
<form class="form-home form-search">
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
</select>
<button href="used-cars.php">Search</button>
</form>
As you can see it is using PHP/MySQL to show the options available.
Okay so I then have this form on another page however the CSS styling is slightly different and it includes a few different select elements.
So when a user has selected an element on the home page all the button does is href to the used-cars.php which lists all of the results.
How can I make it so that jQuery saves the option the user selected on the home page and loads the used-cars.php with those options selected?
Any examples would be great.
EDITED
Example of my second form:
<div class="container con-col-listing">
<div class="row">
<div class="col-md-4 col-sm-4">
<form class="car-finder-container dflt-container">
<h2 class="h2-finder">Car finder</h2>
<ul class="toggle-view">
<li class="li-toggle">
<h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<select name="make" class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
$selected = $make['make'] == $_GET['make']?'selected="selected"':'';
echo '
<option value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<?php while($model = $modelFilter->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="'.$model["Model"].'">'.$model["Model"].'</option>
';
} ?>
</select>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
<label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
<input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
<label for="convertible-checkbox" class="label-checkbox">Convertible</label>
<input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
<label for="coupe-checkbox" class="label-checkbox">Coupe</label>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
<label for="automatic-checkbox" class="label-checkbox">Automatic</label>
<input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
<label for="manual-checkbox" class="label-checkbox">Manual</label>
<input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
<label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
</div>
</li>
</ul>
<button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars
</button>
<h4 class="h4-finder">Try our Smart Search <span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
</form>
</div>

Easiest way is with a get request:
<form class="form-home form-search" method="GET" action="used-cars.php">
<select name="make" class="form-control select-box">
.....
<button type="submit">Search</button>
</form>
and on used-cars.php:
var_dump($_GET['make']);
EDIT
lets suppose on the form on the first page you have:
<option value="ford">ford</option>
<option value="pontiac">pontiac</option>
<option value="fiat">fiat</option>
when you hit the submit button $_GET['make'] on used-cars.php will be whatever was selected lets say fiat.
so now on used-cars.php you can do this:
<?php while($make = $makeFilter->fetch(PDO::FETCH_ASSOC)){
$selected = $make['Make'] == $_GET['make']?'selected="selected"':'';
echo '
<option '.$selected.' value="'.$make["Make"].'">'.$make["Make"].'</option>
';
} ?>

Related

Pop up new text box after click on "Others" from dropdown and database captured that new data

I found a way how to pop up a new text box after click on "Others" from the dropdown. But the problem here is database capture "Other" instead of the new data that I key in. For example I key in "Policeman" but it captured "Other" in my database.
<head>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text"
name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
</head>
<form action="https://apps3.xendsys.com/emv3/index.php/lists/xl080bdvq5cc8/subscribe" method="post">
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">Website Subscribers</h3>
</div>
<select name="OCCUPATION" id="OCCUPATION"
onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Student">Student</option>
<option value="Educator">Educator</option>
<option value="Designer">Designer</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div class="box-footer">
<div class="pull-right"><input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe"/></div>
<div class="clearfix"> </div>
</div>
</div>
</form>
What should I change ya?

How to use form selection value in another page

I have very simple page in HTML/PHP in which I am displaying form like below
<div class="modal-content">
<div class="modal-header" style="background: #095077; color: #fff" >
<h3 class="modal-title" id="formModalLabel" style="margin-left: 20px; margin-top: 20px;margin-bottom: 20px;">Compare Numbers
</h3>
</div>
<div class="modal-body">
<form id="demo-form" class="mb-4" novalidate="novalidate">
<div class="form-group row align-items-center" style = "margin-bottom:20px">
<label class="col-sm-3 text-left text-sm-right mb-0">Number 1
</label>
<div class="col-sm-9">
<select name="number1" id="number1" class="form-control" required>
<option value="">--Select 1st Number--
</option>
<?phpwhile($number_row=mysqli_fetch_array($number_result)){?>
<option value="<?php echo $number_row['number'];?>">
<?php echo $number_row['number'];?>
</option>
<?php}?>
</select>
</div>
</div>
<div class="form-group row align-items-center">
<label class="col-sm-3 text-left text-sm-right mb-0">Number 1
</label>
<div class="col-sm-9">
<select name="number2" id="number2" class="form-control" required>
<option value="">--Select 2nd Number--
</option>
<?phpwhile($number2_row=mysqli_fetch_array($number2_result)){?>
<option value="<?php echo $number2_row['number'];?>">
<?php echo $number2_row['number'];?>
</option>
<?php}?>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close
</button>
<button type="button" onclick="location.href='details.php?id='" class="btn btn-primary">Compare
</button>
</div>
</div>
</div>
I want pass number1 and number2 value with details.php when user press compare button. I do not know how I can use selection value from form. Let me know if someone can help me for do it.
Thanks
There are multiple ways to do this. Simplest way is, You can use the action attribute in the form and use submit button to submit the values to details.php
<form id="demo-form" class="mb-4" novalidate="novalidate" action='details.php' method='GET'>
<button type="submit" class="btn btn-primary">Compare</button>
in details.php you will get the submitted values. Now by Capturing the submitted Form Data in details.php, compare the values and respond back with resultant html.
You can do it with Javascript;
But I think it's better to do with form-submit:
At first, change
<form id="demo-form" class="mb-4" novalidate="novalidate">
to
<form id="demo-form" class="mb-4" novalidate="novalidate" action="details.php" method="get">
Then you can change the button to a submit button instead of normal button:
<input type="submit">
So you are able to get the params of your form to details.php. It will call details.php?number1=2&number2=3
In your details.php you can get the values with PHP using $_GET['number1'] and so on..

Formstone Classic Selecter - jQuery Clone and Modify GUID

Is it possible when using jQuery Clone to increment the current GUID of an object?
At present, when the selecter is initialised all selects, including hidden ones, are assigned a GUID.
The cloning process simply duplicates the template div. The problem being that it also clones the GUID of the hidden select, which means any dynamically added selects are rendered unusable as more than one select share the same guid.
To implement all selects on a form I am using the code below:
$(document).ready(function () {
$("select").selecter();
});
The code to create a clone of a row, which includes a select is as follows:
$('.addButton').on('click', function () {
var $template = $('#Template'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.attr('title', 'DynamicRow')
.insertBefore($template);
$("#Form").validate();
$clone.find('[name="Type[]"]').rules("add", { required: true });
});
I have also included the HTML below to demonstrate what is being cloned:
<div class="fieldset">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
<div class="fieldset hide" id="Template">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
The Formstone Classic Selecter library can be found at:
https://github.com/FormstoneClassic/Selecter/blob/master/jquery.fs.selecter.js
The only workaround I could find, was to initialise each form select individually, therefore $("select").selecter(); could not be used as this initialises all selects, including hidden ones.
HTML
<div class="fieldset" id="Types">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
<div class="fieldset hide" id="Template">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
To initialise the first select I used $('#Types').find('[name="Type[]"]').selecter(); and to initialise the hidden clone select I used $clone.find('[name="Type[]"]').selecter();
I hope this proves useful to others.

Jquery get value of select in div above

I have the following HTML form. I'm trying to get the value of the .plotNumber select and also the value of the sub_category field.
Note: The user is able to add new rows to the form, so there may be multiple blocks of <div class="standard-row add-admin-row input-row">.
My code so far (which works) apart from the plot and category is:
$('.wrapper').on('input', '.inp-calculate', function(e)
{
var input = $(this);
//var plot = input.val(); // get plot id
//var category = input.val(); // get category id
var units = input.val(); // get units
$.post('checkUnits.php', {
plot_id: plot,
category_id: category,
units: units
}, function(data) {
var data = $.parseJSON(data);
if(data[0] !== true) {
alert(data);
input.focus();
input.val('');
}
});
});
I have tried the following solutions which do not work:
$(this).parent().siblings().find('.plotNumber').val();
HTML Code:
<form class="commentForm add-project-form clearfix" id="addWorksheet">
<div class="box box3 clearfix">
<div id="messages"></div>
<div class="sectionbox">
<fieldset class="clonable">
<legend><span>Worksheet</span></legend>
<p class="error-summary error-message"></p>
<div class="standard-row add-admin-row input-row">
<label class="ib">
<span class="label-stacked">Employee</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][employee]" name="employee">
<option value="">Select one...</option>
<option value="1">Test 1</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Week ending</span>
<span class="plain-select">
<select class="inp" data-myname="worksheet[*][week_ending]" name="week_ending">
<option value="">Select one...</option>
<option value="Sunday 22 Nov 2015">Sunday 22 Nov 2015</option>
</select>
</span>
</label>
<label class="ib">
<span class="label-stacked">Project</span>
<span class="plain-select">
<select class="inp project" data-myname="worksheet[*][project]" name="project">
<option value="">Select one...</option>
<option value="2">TEST</option>
</select>
</span>
</label>
</div>
<div class="standard-row wsheet-row input-row">
<label class="ib plothead ">
<span class="label-stacked">Plot Number</span>
<span class="plain-select">
<select class="inp plotNumber plotheadclone" data-myname="worksheet[*][plots][!][plot_number]" name="plot_number">
<option value="">Select one...</option>
<option value="6672">444</option>
<option value="6673">555</option>
<option value="6674">666</option>
</select>
</span>
</label>
<div class="plot-offset clearfix">
<div class="standard-row wsheet-row input-row" id="5438">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5438">NON LABOUR</option>
</select>
</label>
<label class="ib"><span class="label-stacked">Total</span>
<input class="inp inp110 data-addup-total inp-calculate" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="0.00" type="text">
<input data-myname="worksheet[*][plots][!][price][]" name="price" value="" type="hidden">
<input data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="hidden">
</label>
</div>
<div class="standard-row wsheet-row input-row" id="5240">
<label class="ib">
<span class="label-stacked">Category</span>
<select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
<option value="5240">1ST FIX CYLINDER</option>
</select>
</label>
<label class="ib">
<span class="label-stacked">Price</span>
<input class="inp inp110 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][price][]" name="price" value="£40.00" type="text"></label>
<label class="ib"> <span class="label-stacked">Number</span>
<input class="inp inp55 inp-calculate" data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="text"></label><label class="ib"><span class="label-stacked">Total</span><input class="inp inp110 inp-disabled data-addup-total" readonly="" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="£0.00" type="text"></label>
</div>
<div class="wsheet-labour-total">LABOUR: £80.00</div>
<div class="wsheet-nonlabour-total">NON LABOUR: £0.00</div>
<div class="wsheet-final-total">TOTAL CLAIM: £80.00</div>
</div>
</div>
</fieldset>
<div class="reveal-plot showingPlot"> Choose another plot</div>
</div>
<!-- end section box -->
<hr class="divider">
<div class="clonable">
<div class="clone empty"></div>
<div class="cb">
<div>
<p class="add remove-data"><i class="sprite minus2"></i> <span>Remove last row</span></p>
</div>
<div>
<p class="add add-data add-another-worksheet-employee"><i class="sprite plus2"></i> <span>Add another worksheet</span></p>
</div>
</div>
</div>
<div class="save-submit">
<button class="button" type="submit" data-url="addWorksheet.php" data-id="#addWorksheet">Submit</button>
</div>
</div>
<!-- end box -->
</form>
Can someone help find the solution?
You're not traversing far enough up the DOM with .parent() since the select is contained in a <div> three levels above .inp-calculate. How about:
$(this).closest('fieldset').find('.plotNumber').val();
Try like following. Hope this will help you.
var container=$(this).closest('.standard-row.add-admin-row.input-row');
var plot=container.find('.plotNumber').val();
var category=container.find('.inp220').val();

jQuery display element that contains certain class strings

Hey guys I am currently developing a site that lists vehicle data using PDO and a MySQL database.
Here is an example of what I currently have: http://www.drivencarsales.co.uk/
So basically each row in the MySQL table contains all of the data for each vehicle and I am printing them into a list using the following code:
<?php include('db-affinity/filter.php'); ?>
<div class="col-md-8 col-sm-8 col-lg-8">
<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="listing-container ' . $row["Make"] . '">
<h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
<h3 class="price-listing">£'.number_format($row['Price']).'</h3>
</div>
<div class="listing-container-spec">
<img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
<div class="ul-listing-container">
<ul class="overwrite-btstrp-ul">
<li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
<li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
<li class="gear-svg list-svg">'.$row["Transmission"].'</li>
<li class="color-svg list-svg">'.$row["Colour"].'</li>
</ul>
</div>
<ul class="overwrite-btstrp-ul other-specs-ul h4-style">
<li>Mileage: '.number_format($row["Mileage"]).'</li>
<li>Engine size: '.$row["EngineSize"].'cc</li>
</ul>
<button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked
</button>
<button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details
</button>
<button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive
</button>
<h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
</div>
';
} ?>
</div>
</div>
</div>
<script>$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});</script>
As you can see I am using a while loop to display every row I have also added the 'Make' of the vehicle to the listing container class, there is also a bit of jQuery however I will explain what that is used for shortly.
I then have this form:
<div class="container con-col-listing">
<div class="row">
<div class="col-md-4 col-sm-4">
<form class="car-finder-container dflt-container">
<h2 class="h2-finder">Car finder</h2>
<ul class="toggle-view">
<li class="li-toggle">
<h4 class="h4-finder-toggle">Make<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<select class="form-control select-box" name="">
<option value="make-any">Make (Any)</option>
<?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
{
echo '
<option value="">'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Body type<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="four-by-four-checkbox" class="float-checkbox" type="checkbox"/>
<label for="four-by-four-checkbox" class="label-checkbox">4x4</label>
<input id="convertible-checkbox" class="float-checkbox" type="checkbox"/>
<label for="convertible-checkbox" class="label-checkbox">Convertible</label>
<input id="coupe-checkbox" class="float-checkbox" type="checkbox"/>
<label for="coupe-checkbox" class="label-checkbox">Coupe</label>
</div>
</li>
<li class="li-toggle">
<h4 class="h4-finder-toggle">Transmission<span class="glyphicon glyphicon-plus glyph-plus-toggle"></span></h4>
<div class="panel">
<input id="automatic-checkbox" class="float-checkbox" type="checkbox"/>
<label for="automatic-checkbox" class="label-checkbox">Automatic</label>
<input id="manual-checkbox" class="float-checkbox" type="checkbox"/>
<label for="manual-checkbox" class="label-checkbox">Manual</label>
<input id="semi-auto-checkbox" class="float-checkbox" type="checkbox"/>
<label for="semi-auto-checkbox" class="label-checkbox">Semi automatic</label>
</div>
</li>
</ul>
<button href="#" class="btn btn-block car-search-button btn-lg btn-success"><span class="glyphicon car-search-g glyphicon-search"></span> Search cars
</button>
<h4 class="h4-finder">Try our Smart Search <span class="glyphicon info-car-search-g glyphicon-info-sign"></span></h4>
</form>
</div>
You only need to take notice to the start of the form, as you can see the 'Make's' of the vehicles are displayed in the select element options using a while loop.
Now back to the jQuery:
<script>$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});</script>
I have tried adding this jQuery to show the classes that display the same 'Make' selected in the options of the select element and hide the classes that do not contain that class in the listing-container div.
For some reason when the option is selected the jQuery isn't displaying the classes that have the same 'Make' as the option selected.
Any idea where I am going wrong?
BTW I know I should be using AJAX for this however I wouldn't know where to start.
You need to insert a value into the option tags of your Make .select-box. Each of the option tags is given with <option value="">'.$make["Make"].'</option>.
Thus $(this).val() will return an empty string. Try something like: '<option value="'. $make["Make"].'">'.$make["Make"].'</option> instead.
Make the changes indicated below:
option
<option>'.$make["Make"].'</option>
jQuery
//Wait for DOM to load
$(document).ready(function() {
$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});
});
UPDATE
After reviewing your page, the only code you need at the current location, EXACTLY AS SHOWN, is:
$(".select-box").first().change( function() {
var make = $(this).val();
if( make != 'make-any' ) {
$('.' + make).show().next('.listing-container-spec').show();
$(".listing-container").not("." + make).hide()
.next('.listing-container-spec').hide();
}
}).change();

Categories