I'm writing a script to add div block after clicking the add button.
Everything is fine, however after adding second block that incrementing.
For example: After second clicking that adding 4 block overall 6.
After clicking the removing that is deleting the last one also.
var removeBtn = $("#removeField");
$("body").on("click", "#addField", function(e) {
e.preventDefault();
var room = $(".room-type").first();
var count = removeBtn.data("count");
if (count > 0) {
removeBtn.data("count", count++).attr("data-count", count++);
} else {
removeBtn.data("count", 1).attr("data-count", 1);
}
room.clone(false).appendTo(".room-type");
});
$("body").on("click", "#removeField:not([data-count=0])", function(e) {
e.preventDefault();
var count = removeBtn.data("count");
if (count > 0) {
$(".room-type").data("count", count--).attr("data-count", count--).last().remove();
}
});
HTML
<div class="form_element select room-type">
<div class="duo_left">
<label class="form_name"><?=pll__('Room type')?></label>
<select name="room-type[]" class="selectpicker multi-fields">
<?if($single != null) :?>
<option value="Single Room">Single Room</option>
<? endif; ?>
<?if($double != null) :?>
<option value="Single Room">Double Room</option>
<? endif; ?>
<?if($deluxe != null) :?>
<option value="Single Room">Deluxe Room</option>
<? endif; ?>
<?if($deluxe_double != null) :?>
<option value="Single Room">Deluxe Double Room</option>
<? endif; ?>
<?if($executive_room != null) :?>
<option value="Single Room">Deluxe Double Room</option>
<? endif; ?>
<?if($gloria_room != null) :?>
<option value="Single Room">Gloria Room</option>
<? endif; ?>
</select>
</div>
<div class="duo_right">
<label class="form_name"><?=pll__('Number')?></label>
<select name="room-number[]" class="selectpicker multi-fields">
<option value="0" selected>0</option>
<? for ($i=1; $i<=10; $i++) : ?>
<option value="<?=$i?>"><?=$i?></option>
<? endfor; ?>
<option value="10+">10+</option>
</select>
</div>
</div>
you need to append to a parent div, add an additional div
like "container" on top of your "room-type"
and append your clone to it
room.clone().appendTo("#container");
also before removing check the length of your "room-type" class
here is a working fiddle for you
https://jsfiddle.net/fxabnk4o/12/
Related
I'm building a drop-down list with options containing data from a database and want to hide options which have zero data.
I have tried an if statement using continue but failing to catch the live data values from the database.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php foreach($database as $row):
if ($row['topic'] == 0) {
continue;
}
else {
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php endforeach; ?>
</select>
Is there any clever javascript-, php-, etc. code that can deactivate/hide options from a database which are empty.
Add this in your css:
select option:empty {
display:none
}
I think you should try this.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php
if(count($database) > 0)
{
foreach($database as $row)
{
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php
}
}
?>
</select>
Hope it helpful for you.
I have php page for vehicle search filter which have 2 types of vehicle that is RV's and campervans and also have two selects
<div class="fields">
<p>Vehicle Type</p>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<?php if(count($vehicleType) > 0 ){
foreach($vehicleType as $vt){ ?>
<option value="<?php echo $vt ?>" <?=isset($_GET['car_type'])&&$_GET['car_type']==$vt?'selected':'';?> ><?php echo $vt ?></option>
<?php }
} ?>
</select>
</div>
<div class="fields">
<p>Total No. of Passengers*</p>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<option <?php if(#$_REQUEST['passengers'] == 1){?>selected<?php }?>>1</option>
<option <?php if(#$_REQUEST['passengers'] == 2){?>selected<?php }?>>2</option>
<option <?php if(#$_REQUEST['passengers'] == 3){?>selected<?php } ?>>3</option>
<option <?php if(#$_REQUEST['passengers'] == 4){?>selected<?php }?>>4</option>
<option <?php if(#$_REQUEST['passengers'] == 5){?>selected<?php }?>>5</option>
<option <?php if(#$_REQUEST['passengers'] == 6){?>selected<?php }?>>6</option>
<option <?php if(#$_REQUEST['passengers'] == 7){?>selected<?php }?>>7</option>
<option <?php if(#$_REQUEST['passengers'] == 8){?>selected<?php }?>>8</option>
</select>
</div>
How do I do that with jQuery or php if I choose "Rv" in the first select? The second select would show me 8 passengers . If I choose Campervan in the first select, the second select would show me 5 passengers..
I would probably do something along these lines:
<?php
$number_of_passengers = 8;
if(!empty($_REQUEST['car_type'])) {
$number_of_passengers = $_REQUEST['car_type'] == 'Campervans' ? 5 : 8;
}
$passengers = 0;
if(!empty($_REQUEST['passengers'])){
$passengers = (int) $_REQUEST['passengers'];
}
?>
<select class="car" name="car_type" id="car_type">
<option value="0">Select Vehicle</option>
<option value="RV/Motorhome">RV/Motorhome</option>
<option value="Campervans">Campervans</option>
</select>
<select class="half" name="passengers" id="passengers">
<option>No. of Passengers</option>
<?php
for($i = 1; $i <= $number_of_passengers; $i++) {
?>
<option
<?php
if($i == $passengers) {
echo ' selected ';
}
?>
>
<?php echo $i ?>
</option>
<?php
}
?>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#car_type').change(function() {
$("#passengers").children().removeAttr("selected");
if ($(this).val() === 'Campervans') {
$('#passengers option:nth-child(n+7)').hide();
} else {
$('#passengers option').show();
}
});
</script>
There are cleaner ways of doing this but this should serve to get the point across.
Few things to note about the PHP:
See how I check if the $_REQUEST key is available using empty - this avoids having to use # which is generally not a good idea.
I am using a loop to echo the options in the passenger select to avoid code repetition because typing that out 8 times is boring ;-)
Hope this helps!
yes you need to add javascript code for that.
insert below code in your page and check if this is what you want?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$('.car').on('change', function(){
if($(this).val() === 'RV/Motorhome'){
$('.half').find('option').show()
}else if($(this).val() === 'Campervans'){
$('.half').find('option').slice(6).hide();
}
})
</script>
I have a multi-select dropdown and external div that post the number of selections. When I save the document as XML a window opens with an option to go back (I am using onclick="history.go(-1);").
Everything works except that the number of selection is = 0 even if the input has some elements selected.
Thanks.
java script code
$("#airlaine").change(function () {
var count = $(".k-multiselect-wrap li").length;
//console.log(count);
$('#displaycount').text(count);
});
html code
<div class="col-md-4 block">
<div class="iconqsai navy">
<p class="icontitle">QSAI</p>
<h4 id="displaycount" class="displaycount" name="aircount" value=""><?php if ($airlainecount != ""){echo $airlainecount;} else {echo "0";} ?></h4>
</div>
<div class="grayArea airline">
<div class="PanelMultiSelect"></div>
<select id="airlaine" name="airlines[]" multiple="multiple" class="numairline">
<option value="AA" <?php if (in_array("AA", $airline)) {echo "selected";}?> >AC</option>
<option value="AB" <?php if (in_array("AB", $airline)) {echo "selected";}?> >AF</option>
<option value="AC" <?php if (in_array("AC", $airline)) {echo "selected";}?> >ANA</option>
<option value="AD" <?php if (in_array("AD", $airline)) {echo "selected";}?> >EIL</option>
</select>
</div>
</div>
do you want to count list of .k-multiselect-wrap li or #airlaine selection?
for #airlaine selection:
$("#airlaine").change(function () {
var count = $("#airlaine option:selected").length;
$('#displaycount').text(count);
});
I have 10 dropdown menus that are like:
Please Select
Item 1
Item 2
Item 3
---Appetizers---
Item 4
Item 5
---Main Courses---
Item 6
Item 7
---Lunch Specials---
Item 8
I want to grab the value if an Item is selected and print it on a confirmation page. Can I do that with a for loop and javascript? Like if I do this, how would I call it in HTML?
function getItems() {
var items = [
document.getElementById("item1").value,
document.getElementById("item2").value,
document.getElementById("item3").value,
document.getElementById("item4").value,
document.getElementById("item5").value,
document.getElementById("item6").value,
document.getElementById("item7").value,
document.getElementById("item8").value,
document.getElementById("item9").value,
document.getElementById("item10").value
];
for (int i = 0; i < items.length; i++) {
var count = 0;
if (
(item[i] != "Please Select") ||
(item[i] != "---Appetizers---") ||
(item[i] != "---Main Courses---") ||
(item[i] != "---Lunch Specials---")
) {
document.getElementById(i).innerHTML = item[i];
count++;
}
}
}
The dropdowns are populated from a MySQL database using php. My HTML/php:
Item 4
<select id="item4">
<option value"">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value"">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value"">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value"">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
</select>
<br>
You seem to generate a single drop down with all options. If that is intended, then make it one in which multiple selections can be made, which is not the default behaviour. For that to happen, add the multiple attribute to the select.
Then you need to add a listener to the change event, so that your code executes whenever the user selects or unselects item(s).
Note that you have forgotten some = after the value attributes. Also, it is not allowed to put a <br> tag after an option element. A select element should only have option children elements.
Here is how the corrected PHP could look:
Item 4
<select id="item4" multiple size="8">
<option value="">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value="">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value="">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value="">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
</select>
The JavaScript could be much simpler, as in this working snippet:
// Listen to the selection changes made:
document.querySelector('#item4').addEventListener('change', function () {
// For this demo, the text is stored in a DIV
document.getElementById('output').textContent =
[...this.selectedOptions] // convert selected options list to array
.filter ( option => option.value.length ) // option must have a value
.map( option => option.textContent ) // get text of option
.join('\n'); // add line breaks
});
Item 4 (hold Ctrl key to add selections)<br>
<select id="item4" multiple size=8>
<option value="">Please Select</option>
<option value="">---Appetizers---</option>
<option value="1">drink 1 - $1</option>
<option value="1.10">drink 2 - $1.10</option>
<option value="">---Main Courses---</option>
<option value="15">dish 1 - $15</option>
<option value="16">dish 2 - $16</option>
<option value="">---Lunch Secials---</option>
<option value="10">lunch 1 - $10</option>
<option value="11">lunch 2 - $11</option>
</select>
<div id="output" style="white-space:pre"></div>
I am working on a dynamic array inside a table which means the table appears based on user input. Users need to fill this table and then click submit. I need to place javascript here to check if the user didn't select anything or didn't write in any column. If so, the user should not be able to proceed.
<form action="klr.php" method="post" name="myform" >
<?php
for ($i = 1; $i <= $de; $i++) {
?>
<tr>
<td>Tube</td>
<td>
<select id="in4-<?php echo $i; ?>" name="t1[<?php echo $i; ?>]" onclick="getText3(<?php echo $i; ?>)" onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)">
<option value="0">0</option>
<option value="12">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="75">75</option>
</select>
</td>
<td>
<input type="text" name="t2[<?php echo $i; ?>]" id="in1-<?php echo $i; ?>" onblur="getText3(<?php echo $i; ?>)" onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)"/>
</td>
<td>
<select name="a1[<?php echo $i; ?>]" id="in2-<?php echo $i; ?>" onclick="getText3(<?php echo $i; ?>)"onchange="getText39(<?php echo $i; ?>)" onmouseout="getText89(<?php echo $i; ?>)" >
<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>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</td>
</table>
I only provided the code of the first row of the table in which the user selects values. In the second column users can enter some values and in the third column users can select a value again. I need to place javascript in three of these columns
It sounds like you just wanted to verify if everything inside the form element was validated. Here are two fiddles I worked up to get you started:
1) Regular Javascript
function formCheck() {
var form = document.getElementById('mainForm'),
inputs = form.getElementsByTagName('INPUT'),
selects = form.getElementsByTagName('SELECT'),
i,
errors = [];
for (i = 0; i < inputs.length; i++) {
if (inputs[i].value.match(/^\s*$/)) {
errors.push(inputs[i].title + ' was not set');
}
}
for (i = 0; i < selects.length; i++) {
if (selects[i].selectedIndex === 0) {
errors.push(selects[i].title + ' was not set');
}
}
if (errors.length > 0 ) {
alert(errors.join('\n'));
return false;
}
alert('success!');
return true;
}
http://jsfiddle.net/fstreamz/3Decx/4/
2) With JQuery
function formCheck() {
var formElements = $('#mainForm').find('input, select'),
errors = [];
$.each(formElements, function(i, el) {
if ($(el).val().match(/^\s*$/)) {
errors.push($(el).prop('title') + ' is blank!');
}
});
if (errors.length > 0 ) {
alert(errors.join('\n'));
return false;
}
alert('success');
return true;
}
http://jsfiddle.net/fstreamz/w5KG3/4/
A few notes: 1) It checks every input or select element inside a form element with id="mainForm" so you'd have to add that to your form (next to name="myForm"). 2) I added a title attribute to the input/select elements so I could show that in the error message as a reference. 3) It checks for whitespace in input boxes and consider that invalid. 4) in the jsFiddle, it returns false even in success so the form doesn't submit for demonstration purposes. That should be changed to true if you use it.