I have a screenshot as shown below:
The screenshot above belongs to the following code:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<!-- Date START -->
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="<?php if($data->{" house_sitting_date "}<>''){echo $data->{"house_sitting_date "};}?>">
</div>
<!-- Date END -->
<!-- Yes/No Dropdown START -->
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';} ?>>Please choose an option</option>
<option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>
<option value="no" <?php if($data->{"house_sitting_date_yes_no"}=="no"){echo 'selected';} ?>>No</option>
</select>
</div>
<!-- Yes/No Dropdown END -->
<!-- Add new row button START -->
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()"/>
</div>
<!-- Add new row button END -->
</div>
<!-- Javascript Code START -->
<script>
function rowAdd() {
}
</script>
<!-- Javascript Code END -->
On hitting save button, the above form (as shown in the screenshot) gets saved in the following JSON file:
$output['house_sitting_date']=$_POST['house_sitting_date'];
$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];
if(file_exists('../feeds/ptp-ess_landing_house.json')){
$data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}
Problem Statement:
I am wondering what JavaScript code I need to add so that it add another select of rows. When I say Select of Rows, I meant to say the following. I added an onclick event on input tag.
You'll need to change some minor things, but this is the general idea:
<h3 style="text-align:center;margin-top:45px;">Sitting Days</h3>
<div class="add-new-row-button">
<input type="button" id="addRow" value="Add New Row" onclick="rowAdd()" />
</div>
<div id="rows">
<div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<h4 style="text-align:center;">Select Date</h4>
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<h4 style="text-align:center;">Yes/No</h4>
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
</div>
<script>
function rowAdd(event) {
document.getElementById("rows")
.insertAdjacentHTML('beforeend', newRow());
}
function newRow() {
return `
<div id="default-node" class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
<div class="select-date" style="margin-right:30px;">
<input type="date" id="house-sitting-date" name="house_sitting_date" value="">
</div>
<div class="yes-no">
<select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
<option value="nada" selected>Please choose an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
`
}
</script>
Related
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?
I have some working jQuery that grabs the value from an input from which the user enters, and then also grabs a value from a hidden field, the jQuery then performs the necessary calculations and displays the result.
The issue I am having is when I put the fields into a modal, it doesn't work, even when I try and state the modal ID before the input ID.
Can someone help me get this working as needed?
$(function() {
$(document).ready(function() {
$("#demoModal #qty").keyup(function() {
totalTP = $("#demoModal #qty").val() * $("#demoModal #price").val() / 100;
$("#demoModal #totalTP").val(totalTP);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<label>Enter your taxable monthly profit</label>
<input name="qty" id="qty" type="text" />
<input hidden name="price" id="price" type="hidden" value="19" /><br />
<label>Deducitble Tax Available</label>
<input name="totalTP" id="totalTP" type="text" />
<br>
<br>
<form id='fm'>
<label>HR:</label>
<select class="first">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">HR Plan</option>
<option value="100">HR Pro</option>
<option value="200">HR Pro+</option>
<option value="400">HR Pro Plan</option>
</select>
<label>Accounting:</label>
<select class="second">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Accounting Plan</option>
<option value="100">Accounting Pro</option>
<option value="200">Accounting Pro+</option>
<option value="400">Accounting Pro Plan</option>
</select>
<label>Graphic Design & Marketing:</label>
<select class="third">
<option disabled selected value="0">Select Plan</option>
<option value="0">No Plan</option>
<option value="50">Graphic Design Plan</option>
<option value="100">Graphic Design Pro</option>
<option value="200">Graphic Design Pro+</option>
<option value="400">Graphic Design Pro Plan</option>
</select>
<input hidden type="text" class="form-control" id="temp" name="temp">
<input hidden type="text" class="form-control" id="bc" name="bc">
<input hidden type="text" class="form-control" id="de" name="de">
</form>
<br>
<label>Plan Costs:<div id="total"></div> </label>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
View on jsFiddle
I have the following pricing plan and I've already broke my had trying to change the data of list item <li>Gain 20 Likes</li> when the appropriate option is chosen. For example when chosen the option <option value="10.00">15 .......$10.00</option> I want the list item to display <li>Gain 15 Likes</li>, when chosen <option value="15.00">30 .......$15.00</option> to display <li>Gain 30 Likes</li> etc. My javascript knowledge is too poor to solve this problem unfortunately.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col"><!-- t#4-starts -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Plan</h3>
</div>
<div class="panel-body">
<div class="the-price">
<div class="form-group" style="margin-bottom:13px;">
<select class="form-control" id="followersPlans" name="followersPlans">
<option value="10.00">15 .......$10.00</option>
<option value="15.00">30 .......$15.00</option>
<option value="30.00">50 .......$30.00</option>
<option value="60.00">100 .....$60.00</option>
<option value="100.00">200 .....$100.00</option>
<option value="140.00">300 .....$140.00</option>
<option value="220.00">500 .....$220.00</option>
<option value="420.00">1000 ...$420.00</option>
</select>
</div>
<p class="mini">Monthly Subscription</p>
Activate
</div>
<ul class="pricing__list">
<li>No Survey Required</li>
<li>Gain 20 Likes</li>
</ul>
</div>
</div>
</div><!-- t#4-ends -->
As you want to store your $ amount on the value attributes of the options items, you might want to use data-attributes to store the like numbers.
Here is how to do it with jQuery :
$(document).ready(function() {
$('#followersPlans').on('change', function() {
// console.log($(this).find('option:selected').data('likes'));
var likes = $(this).find('option:selected').data('likes');
$('.updateLikes').html('Gain ' + likes + ' Likes');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col">
<!-- t#4-starts -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Plan</h3>
</div>
<div class="panel-body">
<div class="the-price">
<div class="form-group" style="margin-bottom:13px;">
<select class="form-control" id="followersPlans" name="followersPlans">
<option value="10.00" data-likes="15">15 .......$10.00</option>
<option value="15.00" data-likes="30">30 .......$15.00</option>
<option value="30.00" data-likes="50">50 .......$30.00</option>
<option value="60.00" data-likes="100">100 .....$60.00</option>
<option value="100.00" data-likes="200">200 .....$100.00</option>
<option value="140.00" data-likes="300">300 .....$140.00</option>
<option value="220.00" data-likes="500">500 .....$220.00</option>
<option value="420.00" data-likes="1000">1000 ...$420.00</option>
</select>
</div>
<p class="mini">Monthly Subscription</p>
Activate
</div>
<ul class="pricing__list">
<li>No Survey Required</li>
<li class='updateLikes'>Gain 20 Likes</li>
</ul>
</div>
</div>
</div>
<!-- t#4-ends -->
You could work with data attributes in your options and set a second value with that data you need for example:
<div class="form-group" style="margin-bottom:13px;">
<select class="form-control" id="followersPlans" name="followersPlans">
<option data-like="15" value="10.00">15 .......$10.00</option>
<option data-like="30" value="15.00">30 .......$15.00</option>
<option data-like="50" value="30.00">50 .......$30.00</option>
</select>
</div>
With jQuery you can access that values with the .data() function something like this:
$(document).ready(function() {
$("#followersPlans").change(function() {
var yourData = $("#followersPlans option:selected").data('like');
# Alternative
# var likes = $(this).find('option:selected').data('likes');
console.log(yourData);
});
});
Here is a simple solution with Vanilla JavaScript.
var plans = document.getElementById("followersPlans");
var selectedPlan = document.getElementById("selected-plan");
plans.addEventListener('change', setLikes);
function setLikes() {
var value = plans.querySelector('option:checked').dataset.like;
selectedPlan.innerHTML = "Gain " + value + " Likes";
}
setLikes();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-md-6 compare-col"><!-- t#4-starts -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Plan</h3>
</div>
<div class="panel-body">
<div class="the-price">
<div class="form-group" style="margin-bottom:13px;">
<select class="form-control" id="followersPlans" name="followersPlans">
<option data-like="15" value="10.00">15 .......$10.00</option>
<option data-like="30" value="15.00">30 .......$15.00</option>
<option data-like="50" value="30.00">50 .......$30.00</option>
<option data-like="100" value="60.00">100 .....$60.00</option>
<option data-like="200" value="100.00">200 .....$100.00</option>
<option data-like="300" value="140.00">300 .....$140.00</option>
<option data-like="500" value="220.00">500 .....$220.00</option>
<option data-like="1000" value="420.00">1000 ...$420.00</option>
</select>
</div>
<p class="mini">Monthly Subscription</p>
Activate
</div>
<ul class="pricing__list">
<li>No Survey Required</li>
<li id="selected-plan">Gain 20 Likes</li>
</ul>
</div>
</div>
</div><!-- t#4-ends -->
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.
<label>Project Type </label>
<div>
<select name="category" id="category" class="form-control ">
<option value="">Select Project Type</option>
<option value="Independent_House">Independent House</option>
<option value="Duplex_House">Duplex House</option>
<option value="Pent_House">Pent House</option>
</select>
</div>
<div class="cato" id="category_Independent_House" style="display:none">
<input type="button" id="addindependant" value="Add Property" />
<div id="cato_Independent_House">
<div class="form-group">
<label>Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Duplex_House" style="display:none">
<input type="button" id="addduplex" value="Add Property" />
<div id="cato_Duplex_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<div class="cato" id="category_Pent_House" style="display:none">
<input type="button" id="addpenthouse value="Add Property" />
<div id="cato_Pent_House">
<div class="form-group">
<label >Bed Rooms</label><label>Bath Rooms</label>
</div>
</div>
</div>
<script type="text/javascript">
js(function() {
js('#addindependant').click(function(e){
js('#cato_Independent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addduplex').click(function(e){
js('#cato_Duplex_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
js('#addpenthouse').click(function(e){
js('#category_Pent_House').append('<div class="form-group submenu">
<div ><select name="rooms[]" >
<option value="1">1BHK</option>
<option value="2">2BHK</option>
<option value="3">3BHK</option>
</select>
</div>
<div><select name="toilets[]">
<option value="1">1T</option>
<option value="2">2T</option>
<option value="3">3T</option>
</select>
</div>
</div>');
});
});
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
});
});
</script>
This is my code. When I select the category based upon the category selected the divs cato_Independent_House cato_Duplex_House and category_Pent_House get appended to their respective categories.
Consider first independant house is selected from drop down so its respective cato_Independent_House gets appended to the div with id id="category_Independent_House" on click of the button.after that when duplex house is selected from drop down its respective 'cato_Duplex_House' gets appended to div with id="cato_Duplex_House" on click of the button.
But when I go back and select Independant house it must not show previous selected div until the button is clicked. But here the div is already been displayed even the button is not clicked when I go back.The previous menu should show its div only when the button is clicked.i.e, the previous divs must get empty or removed when other option is selected.How to do this?
js
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('.cato').each(function() {
console.log(js('.cato'));
if(js(this).attr('data-visible') != "true") {
js(this).hide();
}
});
js('#category_'+selection).show('slow');
});
js('.addProperty').click(function(){
js(this).parents('.cato').attr('data-visible','true');
});
});
html
<input type="button" id="addduplex" value="Add Property" class="addProperty" />
add class addProperty to all your add property input
Working JsFiddle Link. I guess this is what you wanted
You should use the jquery hide method to hide the others divs depending on wich one you have selected:
js(document).ready(function(){
js('#category').change(function () {
var selection = js(this).val();
js('#category_'+selection).show('slow');
if(selection=="Independent_House"){
js('#cato_Duplex_House').hide();
js('#cato_Pent_House').hide();
}else if(...){
{otherCases}
});});
And if you want to clear also the inputs selection of each div you could do something like this:
js("#input_controller_id_to_clear")[0].selectedIndex = -1;