I have this code :
<div class="st-form-line">
<span class="st-labeltext">Countries</span>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="members_create_campaign_form[countrySelectionType]" required="required" value="0" checked="checked" /> All</label>
<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="members_create_campaign_form[countrySelectionType]" required="required" value="1"/> Selected</label>
<div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
<div style="padding:5px"></div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Excluded Countries</b></p>
<select size="10" name="excluded2" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])" multiple >
<?php foreach($arrayCountries as $country) {?>
<option value="<?= $country ?>" ><?= $country ?></option>
<?php } ?>
</select>
</div>
<div class="simplebox cgrid40-left">
<input class="button-blue" type="button" name="right" value=">>" onclick="moveSelectedOptions(this.form['excluded2'],this.form['countries[]'])"><br/><br/>
<input class="button-blue" type="button" name="left" value="<<" onclick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])">
</div>
<div class="simplebox cgrid200-left">
<p style="text-align:center;"><b>Selected Countries</b></p>
<select size="10" id="members_create_campaign_form_countries" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['countries[]'],this.form['excluded2'])" multiple >
</select>
</div>
</div>
<div class="clear"></div>
</div>
This code look like this:
after i choose some countries from left side is adding me to right side, ok, that's good, but my problem is if is not selected as in this photo
is not adding in my database, and in this screnshoot it added only Canada and Germany that is selected and normally i want to add all countries that is added in right side.
This is js code:
<script type="text/javascript">
$(document).ready(function () {
if ($('#members_create_campaign_form_countrySelectionType_1').is(':checked')) {
$('#clist_div').show('slow');
}
$('#members_create_campaign_form_countrySelectionType_0').click(function () {
$('#clist_div').hide('slow');
});
$('#members_create_campaign_form_countrySelectionType_1').click(function () {
$('#clist_div').show('slow');
});
function selectDiff(s1Id, s2Id) {
var selected = $('#' + s2Id + ' option').map(function(){
return this.value;
}).get()
var excluded = $('#' + s1Id + ' option').each(function() {
if (selected.indexOf(this.value) != -1) {
selected.splice(selected.indexOf(this.value), 1);
$(this).remove();
}
}).get()
};
selectDiff('clist_div', 'members_create_campaign_form_countries');
});
1st : you need to select the all option in selected countries on submit
2nd : simple add selected attribute in all option in selected countries
Note : consequently if your adding to selected countries and removing from selected countries means . option loose the selected attribute so you need to add the selected attribute on submit
$(document).on('submit','#submit_button',function(){
$('#members_create_campaign_form_countries option').prop('selected',true);
});
You can take the selected countries as array and keep pushing selected countries in to that.
For example:
var selected_countries=[];
//on select country
selected_countries.push('country selected');
use selected_countries array add to DB.
Related
My goal is to have a form on a woocommerce product page that when a certain attribute is checked then more options will show up.
More specifically. There is a question:
"How many additional dogs are you purchasing for?" and the if "one" is checked a text field with the label: "Second Dog's Name:" will appear. And if "two" is selected than "Second Dog's Name:" AND "Third Dog's Name:" will appear.
This is the code that I am working with and cannot really change the html structure because it is built with a wordpress plugin for extra product options in woocommerce.
I am able to get this close where when the fourth option is selected it does what I want and shows all three, but the first three options do nothing. But when I was writing each code, they would work until I wrote the next one.
$('.form-control').on('change', function () {
if(this.value === "option-1"){
$(".form-control-2_parent").show();
} else {
$(".form-control-2_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-2"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
}
});
$('.form-control').on('change', function () {
if(this.value === "option-3"){
$(".form-control-2_parent").show();
$(".form-control-3_parent").show();
$(".form-control-4_parent").show();
} else {
$(".form-control-2_parent").hide();
$(".form-control-3_parent").hide();
$(".form-control-4_parent").hide();
}
});
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="option-1">One Additional Dog</option>
<option value="option-2">Two Additional Dogs</option>
<option value="option-3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
I know what I am missing is probably very basic, but I am very new to writing javascript/jquery functions and complex conditional statements like this one.
Thanks in advance for any help you can give me!
Here's the solution:
// First store all out option's Elements on a list
var options = [
$(".form-control-2_parent"),
$(".form-control-3_parent"),
$(".form-control-4_parent")
]
// Create a function that hides all our options
function resetAll(){
options.forEach(function(option){
option.hide();
});
}
$('.form-control').on('change',
function (event)
{
// Get the option that was clicked
var target = $(event.currentTarget);
if(target.val())
{
// First Hide all our options, this will hide any open ones
resetAll();
// Just create a loop that shows the number of options based on the selected option
var i = 0;
while(i < target.val()){
options[i].show();
i++;
}
}
}
);
.form-control-2_parent{
display:none;
}
.form-control-3_parent{
display:none;
}
.form-control-4_parent{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select form-control_parent">
<label for="select-1586051219224">Number of Additional Dogs:</label>
<div class="select">
<select name="select-1586051219224" class="form-control ">
<option value="no-addtional">No Additional Dogs</option>
<option value="1">One Additional Dog</option>
<option value="2">Two Additional Dogs</option>
<option value="3">Three Additional Dog</option>
</select>
<div class="select_arrow"></div>
</div>
</div>
<div class="wcpa_form_item wcpa_type_text form-control-2_parent">
<label for="text-1586038514482">Second Dog's Name</label>
<input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text form-control-3_parent">
<label for="text-1586038517583">Third Dog's Name</label>
<input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>
I have such html code printed with echo :
<input id="58" readonly="readonly" class="cell_to_edit" value="Accepted">
<span id="58" class="toggle_status">
<select class="status_change">
<option>Accepted</option>
<option>Waiting</option>
<option>Canceled</option>
</select>
</span>
<input id="59" readonly="readonly" class="cell_to_edit" value="Canceled">
<span id="59" class="toggle_status">
<select class="status_change">
<option>Accepted</option>
<option>Waiting</option>
<option>Canceled</option>
</select>
</span>
Jquery :
$(function() {
$('.cell_to_edit').on('click', function () {
var inputID = $(this).attr('id');
$(this).hide();
$("span[id=" + inputID + "]").show();
$("span[id=" + inputID + "]").attr("id",""+inputID+"");
$(".status_change").change(function() {
var selectIDforAjax = "id="+inputID;
console.log(selectIDforAjax);
$(this).hide();
$("input[id=" + inputID + "]").show();
});
});
});
I have such problem, when I open the selected options and hide input everything is messed up. How to close the option when the second one is opened? Because in future I'll pass the ID to php with Ajax to make the changes in database.
There is no need to have the id in your case(if the structure of your html is the same as given here). The elements you want to target(input.cell_to_edit and .toggle_status) are next/prev sibling elements so use that relationship instead of using ID to target them.
$(function() {
$('.cell_to_edit').on('click', function() {
$(this).hide().next().show();
});
$(".status_change").change(function() {
var $span = $(this).parent();
$span.hide().prev().show();
var id = $span.data('id');
alert(id)
});
});
.toggle_status {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input readonly="readonly" class="cell_to_edit" value="Accepted" />
<span data-id="58" class="toggle_status">
<select class="status_change">
<option>Accepted</option>
<option>Waiting</option>
<option>Canceled</option>
</select>
</span>
<input readonly="readonly" class="cell_to_edit" value="Canceled" />
<span data-id="59" class="toggle_status">
<select class="status_change">
<option>Accepted</option>
<option>Waiting</option>
<option>Canceled</option>
</select>
</span>
I am really new to jquery and javascript... I want to use the four variables in myairFunction to calculate something and those four variables store values retrieved from database.
How can make use of these values in my function ?
The function does not work. even if i test as follows, it printed nothing. where's wrong ?
$("#airradio1").click(function(){
$("#aircalc").click(function(){
$("#airanswer").html(lat1);
});
});
html :
<div id="calculator">
<h3>Air Travel</h3>
<div id="air">
<input type="radio" name="frm" id="airradio1" checked="check" onclick="setairform1()">Enter Individual flights(more accurate) <br>
<input type="radio" name="frm" id="airradio2" onclick="setairform2()">Enter numbers of flight(faster)<br>
<form id="airform1">
<div>
From
<div class="textinput">
<input type="text" id="dept" name="departure" placeholder="City name or aiport code" >
</div>
</div>
<div>
To
<div>
<input type="text" id="dest" placeholder="City name or airport code" >
</div>
</div>
<div>
Via
<div>
<input type="text" id="via" placeholder="City name or airport code" >
</div>
</div>
<div>
<div>
<input type="radio" name="trip" value="roundtrip">Round-trip <br>
<input type="radio" name="trip" value="oneway">One-way
</div>
</div>
<div>
Number of flights/passengers
<input type="text">
</div>
<div>
Class
<select style="width: 82px">
<option selected="selected">Economy</option>
<option>Business</option>
<option>First</option>
</select>
</div>
<div><button type="button" id="aircalc" >calculate</button></div>
<div id="result">
<div id="totalresult"> Total Emission:
<p id="airanswer">0 </p> lbs CO<sub>2</sub> </div>
</div>
here is the php :
$strSQL = "SELECT display, lat, longi FROM airport WHERE display LIKE '$term%'";
$rs = mysql_query($strSQL);
$json=array();
while($row = mysql_fetch_array($rs)){
$json[]=array('value'=>$row['display'],
'label'=>$row['display'],
'lat'=>$row['lat'],
'longi'=>$row['longi']
);
}
echo json_encode($json);
javascript :
$(document).ready(function(){
var lat1;
var long1;
var lat2;
var long2;
var a;
$('#dept').autocomplete({
source:'source.php',
minLength:1,
select:function(evt,ui){
lat1=ui.item.lat;
long1=ui.item.longi;
}
});
$('#dest').autocomplete({
source:'source.php',
minLength:1,
select:function(evt,ui){
lat2=ui.item.lat;
long2=ui.item.longi;
}
});
$("#airradio1").click(function(){
$("#aircalc").click(function(){
myairFunction1(lat1,lat2,long1,long2);
});
});
$('#via').autocomplete({
source:'source.php',
minLength:1
});
});
function myairFunction1(lat1,lat2,long1,long2){
co2 = lat1+lat2+long1+long2;
document.getElementById("airanswer").innerHTML = co2;
}
without seeing the information requested in the comments its nearly impossible to say what's going wrong. but the nested click function looks suspect. if you can target the element directly then why the nested listener?
$("#airradio1").click(function(){
$("#aircalc").click(function(){
myairFunction1(lat1,lat2,long1,long2);
});
});
instead just add the event listener directly to the #aircalc element:
$("#aircalc").click(function(){
myairFunction1(lat1,lat2,long1,long2);
});
I am having trouble applying the slidedown effect from jquery to display hidden div of form fields. I am trying to display each set of form fields if a specific value is selected from the select dropdown.
Script:
$(document).ready(function(){
$("#role").change(function(){
if ($("#role").val() == "student" ){
$(".hide1").slideDown("fast"); //Slide Down Effect
} else {
$(".hide1").slideUp("fast"); //Slide Up Effect
}
if ($("#role").val() == "faculty" ) {
$(".hide2").slideDown("fast"); //Slide Down Effect
} else {
$(".hide2").slideUp("fast"); //Slide Up Effect
}
if ($("#role").val() == "alumni" ) {
$(".hide3").slideDown("fast"); //Slide Down Effect
} else {
$(".hide3").slideUp("fast"); //Slide Up Effect
}});
});
HTML:
<form id="myform" class="form-control">
<select name = "role" class = "btn btn-primary" id ="role">:
<option>Role</option>
<option value = "student"> Student </option>
<option value = "faculty"> Faculty/Staff </option>
<option value = "alumni"> Alumni </option>
</select>
<br/><br/><br/><br/><br/><br/>
<div class="hide" id ="hide1">
<label for="address">Campus Address:</label>
<input type="text" id = "campadd" name="campadd" class= "form-control"/>
<label for="Major">Major:</label>
<input type="text" id = "major" name="major" class= "form-control"/>
</div>
<div class="hide" id = "hide2">
<label for="department">Department:</label>
<input type="text" id = "dept" name="dept" class= "form-control"/>
<label for="location">Location:</label>
<input type="text" id = "locations" name="location" class= "form-control"/>
</div>
<div class="hide" id ="hide3">
<label for="graduationdate">Graduation Year:</label>
<input type="text" id = "gradyear" name="gradyear" class= "form-control"/>
<label for="Major">Degree:</label>
<input type="text" id = "degree" name="degree" class= "form-control"/>
</div>
<br/>
</form>
You are using class selector instead of id selector in the slide up/down command
$(".hide2").slideDown("fast");
instead of
$("#hide2").slideDown("fast");
it can be shorten as
$(document).ready(function () {
var map = {
student : '#hide1',
faculty : '#hide2',
alumni : '#hide3',
}
$("#role").change(function () {
var target = $(map[this.value]);
$('.hide').not(target).stop(true, true).slideUp("fast");
target.stop(true, true).slideDown("fast");
});
});
Demo: Fiddle
Another way to look at this is: Fiddle
I have a script but I couldn't make it work correctly, I want to show inputs based on options, for example if I choose "Havale" option different inputs has to shown, if I choose "Paypal" option different inputs.
My codes are here;
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='group_name']").click(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".box2").css("display","block");
$(".box1").css("display","none");
}
});
$(".box1").show();
$(".box2").hide();
});
</script>
and this;
<select name="payment_method" class="select2" onchange="this.form.submit();" style="width: 160px;">
<option value="">-- Ödeme şekli seçin --</option>
<option value="paypal">Paypal</option>
<option value="havale">Havale / EFT</option>
</select>
and this;
<div class="withdraw-center">
<div class="form-input-title box1">Banka Hesap Adı Soyadı</div>
<div class="form-input-area-bg3 box1">
<input type="text" id="payment_name" class="input3" name="payment_name" value="<?php echo $row['payment_name']; ?>" size="37" />
</div>
<div class="form-input-title">Banka Adı</div>
<div class="form-input-area-bg3">
<input type="text" id="payment_bank" class="input3" name="payment_bank" value="<?php echo $row['payment_bank']; ?>" size="37" />
</div>
<div class="form-input-title">IBAN</div>
<div class="form-input-area-bg3">
<input type="text" id="iban" class="input3" name="iban" value="<?php echo $row['iban']; ?>" size="37" maxlength="26" />
</div>
<div class="form-input-title">T.C. Kimlik No</div>
<div class="form-input-area-bg3">
<input type="text" id="tckn" class="input3" name="tckn" value="<?php echo $row['tckn']; ?>" size="37" maxlength="11" />
</div>
<div class="form-input-title box2">PayPal E-mail Adresi</div>
<div class="form-input-area-bg3 box2">
<input type="text" id="paypal_email" class="input3" name="paypal_email" value="<?php echo $row['paypal_email']; ?>" size="37" />
</div>
</div>
Thanks everyone!
You need to register the handler to the payment_method elements change event
$(document).ready(function(){
$("select[name='payment_method']").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".box2").css("display","block");
$(".box1").css("display","none");
}
});
$(".box1").show();
$(".box2").hide();
});
Demo: Fiddle
Try this
$(".box1").hide();
$(".box2").hide();
$("select[name='payment_method']").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box2").show();
$(".box1").hide();
}
else if(option_value=='havale') {
$(".box1").show();
$(".box2").hide();
} else {
$(".box1").hide();
$(".box2").hide();
}
});
FIDDLE
You need to use the change event on the select box of the payment type.
Try this:
$(document).ready(function(){
$(".box1").hide();
$(".box2").hide();
$(".withdraw-center").hide();
$(".select2").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".withdraw-center").show();
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".withdraw-center").show();
$(".box2").css("display","block");
$(".box1").css("display","none");
}else{
$(".withdraw-center").hide();
}
});
Here is the fiddle:http://jsfiddle.net/ULUFe/1/