Change the data when the option is selected - javascript

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 -->

Related

How to show the dropdown list based on the picklist values

I have an angular application in that I have to show the dropdown list based on the picklist values.
.service.ts
public getLists() {
let baseUrl = `/endpoint`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(LookupData: LookupData) => {
if (LookupData) {
this.option1data = LookupData.option1Data;
this.option2data = LookupData.option2Data;
this.option3data = LookupData.option3Data;
this.option4data = LookupData.option4Data;
}
},
(err) => {
console.error(err);
}
);
}
.component.html
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Category</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
</div>
</div>
</div>
<div class="row>
<div class="form-group">
<div class="col-sm-3>
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>
//In this dropdown I have to show the lists based on the selection of picklists
</option>
</select>
</div>
</div>
</div>
So In tha above code if I select option1 from the picklist I have to show the option1Data dropdownlist etc..
can anyone helpme on this
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option disabled selected="true">Select pick</option>
<option *ngFor="let items of LookupData" [ngValue]="items.name">
{{ items.name }}
</option>
</select>
</div>
</div>
</div>
please put the above code in the HTML file. Hope this code will helpful to you

get the selected item added dynamically jquery

I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.

Add/Delete a row on button-click in Javascript

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>

how to clone div bassed select option

i have select option with count of numbers so i need now when user choose any number clone div tag personal information by this number ex: - select 8 clone 8 time ..
i try do that by use( for loop )but i have problem when run i see clone over this number ex:- choose 8 clone 16 time
this is html code and my try js code
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</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>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
The problem you are facing comes from this line: var clone = $('.rowClone').clone();
the first clone is fine because only 1 .rowClone exist, next time multiple .rowClone exist and it appends all of those.
You have 2 solutions, either use var clone = $('.rowClone:first').clone(); or move var clone = $('.rowClone').clone(); before your for loop
Demo of the problem, run it and look at the console
$('#c3').change(function() {
$('.cloneHere').empty();
var count = $('#c3').val();
for (i = 1; count > i; i++) {
console.log("Number of .rowClone that exist = " + $('.rowClone').length)
var clone = $('.rowClone').clone();
$('.cloneHere').append(clone);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='col-xs-3'>
<label for="">count of person</label>
<select class='form-control select2' name="" id="c3">
<option value="" selected disabled hidden>Choose here</option>
<option value="8">8</option>
</select>
</div>
<div class='col-md-12'>
<div class='box box-primary'>
<div class='box-header with-border'>
<h3 class='box-title'>Information of Person</h3>
</div>
<div class='form-group'>
<div class='box-body rowClone2'>
<div class=' row'>
<div class=' col-sm-3'><label for="">Person 1</label></div>
</div>
<div class='row rowClone'>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="tel" class="form-control">
</div>
<div class='col-xs-6 col-md-3'>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="row cloneHere">
</div>
</div>
</div>
</div>
</div>

Passing a value from a HTML dropdown to a button to fire up a modal

I'm trying to pass a value which is selected by the dropdown on to a button (data-target) so i can show modals dynamically. I'm generating the modals with PHP so everything will be generated automatically.
So whenever a user selects a dropdown, value gets passed to the <button data-target"xx">.
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option value="1">Shop 1</option>
<option value="2>">Shop 2</option>
<option value="3">Shop 3</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
<button type="button" class="btn btn-info btn-sm" data-
toggle="modal" data-target="#myModal">+</button>
</div>
</div>
</div>
I know how to pass a value from dropdowns to input fields, but passing a value from the dropdown to a button data-target is bit tricky. What's the best way to achieve this?
Below given code is the code i used to pass the dropdown data-price value to a input field.
Passing a value from a dropdown to a input field
<script>
$(document).ready(function() {
$('.select2').select2();
});
$(document).ready(function() {
$('select.material-price').change(function() {
var materialValue =
$(this).select2().find(":selected").data("price");
$(this).closest('.row').find('.material-
total').val(materialValue);
});
});
</script>
Since you're using jQuery you've just to attach on change event to the dropdown the change the value of the button like :
$('.shop-name').on('change', function() {
$(this).closest('.row').find('.btn-info').attr('data-target', '#myModal'+$(this).val());
//Just for test purpose
console.log($(this).closest('.row').find('.btn-info').attr('data-target'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option value="1">Shop 1</option>
<option value="2">Shop 2</option>
<option value="3">Shop 3</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
<button type="button" id='target-btn' class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">+</button>
</div>
</div>
</div>
This is a different approach but this will work i tested it out. :)
<div class="row">
<div class='col-md-2 nopadding'>
<div class='form-group nomarg'>
<select class="shop-name select2">
<option data-link="#100000" value="#10">Material A</option>
<option data-link="#400000" value="20>">Material B</option>
<option data-link="#500000" value="30">Material C</option>
</select>
</div>
</div>
<div class='col-md-1 nopadding'>
<div class='form-group nomarg'>
Hello
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('select.shop-name').change(function() {
var shopValue =
$(this).select2().find(":selected").data("link");
$(this).closest('.row').find('.shop-value').attr('href'
,shopValue);
});
});
</script>

Categories