I am new to angularJs. What i was trying to to let say I have a div where I have some selectbox and textbox in a row format. there is a button say "ADD". When I click on ADD i need to add the same div elements another time below the previous div.
This is my div part....
<div class="form-group row">
<label class="col-md-1 control-label">IF</label>
<div class="col-md-2">
<select name="TableName_1" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_1" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<select name="Operator_1" size="0" style="width: 100%;">
<option value="Operator_1"> = </option>
<option value="Operator_2"> != </option>
<option value="Operator_3"> < </option>
<option value="Operator_4"> > </option>
<option value="Operator_5"> <= </option>
<option value="Operator_6"> => </option>
</select>
</div>
<div class="col-md-2">
<select name="TableName_2" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_2" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<button id="addDiv" class="btn btn-default">Add</button>
</div>
</div>
Help me to crack this...
You can use an Angular directive and jquery selectors. Basically replace the button with a directive that emits a button attached to a click event. On the click event clone the div html, compile it using $compile service in angular and append it to the body. see example
var app = angular.module('addDivApp', []);
app.controller('addDivController', function($scope) {
});
app.directive('addDivDirective', function() {
return {
restrict: 'A',
scope: true,
template: '<button id="addDiv" class="btn btn-default" ng-click="click()">Add</button>',
controller: function($scope, $element, $compile) {
$scope.clicked = 0;
$scope.click = function() {
$('body').append($compile($('.form-group').clone())($scope));
}
}
}
});
<!DOCTYPE html>
<html ng-app="addDivApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body ng-controller="addDivController">
<div class="form-group row">
<label class="col-md-1 control-label">IF</label>
<div class="col-md-2">
<select name="TableName_1" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_1" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<select name="Operator_1" size="0" style="width: 100%;">
<option value="Operator_1"> = </option>
<option value="Operator_2"> != </option>
<option value="Operator_3"> < </option>
<option value="Operator_4"> > </option>
<option value="Operator_5"> <= </option>
<option value="Operator_6"> => </option>
</select>
</div>
<div class="col-md-2">
<select name="TableName_2" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_2" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<div add-div-directive></div>
</div>
</div>
</body>
</html>
Add below code in your controller and do a little change in html. Add ng-repeat in div tag to repeat and ng-click method in button to call functions.
$scope.divCount=[{}];
$scope.addDiv=function(){
$scope.divCount.push({});
};
$scope.removeDiv=function(){
$scope.divCount.splice($scope.divCount.length-1,1);
}
<div class="form-group row" ng-repeat="count in divCount">
<label class="col-md-1 control-label">IF</label>
<div class="col-md-2">
<select name="TableName_1" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_1" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<select name="Operator_1" size="0" style="width: 100%;">
<option value="Operator_1"> = </option>
<option value="Operator_2"> != </option>
<option value="Operator_3"> < </option>
<option value="Operator_4"> > </option>
<option value="Operator_5"> <= </option>
<option value="Operator_6"> => </option>
</select>
</div>
<div class="col-md-2">
<select name="TableName_2" size="0" style="width: 100%;">
<option value="Table_1">Table 1</option>
<option value="Table_2">Table 2</option>
<option value="Table_3">Table 3</option>
<option value="Table_4">Table 4</option>
<option value="Table_5">Table 5</option>
</select>
</div>
<div class="col-md-2">
<select name="FieldName_2" multiple="" size="4" style="width: 100%;">
<option value="Field_1">Field 1</option>
<option value="Field_2">Field 2</option>
<option value="Field_3">Field 3</option>
<option value="Field_4">Field 4</option>
<option value="Field_5">Field 5</option>
</select>
</div>
<div class="col-md-1">
<button id="addDiv" class="btn btn-default"
ng-click="addDiv()">Add</button>
</div>
<div class="col-md-1">
<button id="removeDiv" class="btn btn-default"
ng-click="removeDiv()">Remove</button>
</div>
</div>
Related
I am trying to make depending dropdown list. Second list depends on the first one, but when I coded and used it, it shows all of the answers, like "depending" didn't even work. Like this :
$(function() {
var $cat = $("#category1"),
$subcat = $("#category2");
$cat.on("change", function() {
var _rel = $(this).val();
$subcat.find("option").attr("style", "");
$subcat.val("");
if (!_rel) return $subcat.prop("disabled", true);
$subcat.find("[rel=" + _rel + "]").show();
$subcat.prop("disabled", false);
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<form>
<div class="form-history">
<span>
<div class="form-label"><label for="employeeID">WPROWADŹ ID TAG</label></div>
<div class="form-smallmessage"><input type="text" name="employeeID" id="employee_input"></div>
</span>
<span>
<div class="form-label"><label for="DzialID">Wybierz dział</label></div>
<div class="form-smallmessage">
<select name="category1" id="category1">
<option value="">Wybierz Dział</option>
<option value="Making_TP">Making Toothpaste</option>
<option value="Making_MW">Making MouthWash</option>
<option value="Finishing_HSL">Finishing HSL</option>
<option value="Finishing_LSL">Finishing LSL</option>
<option value="Finishing_MW">Finishing MouthWash</option>
<option value="VI_TUBES">VI Tubes</option>
<option value="VI_PRINTING">VI Printing</option>
</select>
</div>
</span>
<div class="form-label"><label for="LineID">Wybierz linie</label></div>
<div class="form-smallmessage">
<select disabled="disabled" id="category2" name="category2">
<option value>Wybierz linie</option>
<!-- Making_TP -->
<option rel="Making_TP" value="Lee1">Lee 1</option>
<option rel="Making_TP" value="Lee2">Lee 2</option>
<option rel="Making_TP" value="Lee3">Lee 3</option>
<option rel="Making_TP" value="Lee4">Lee 4</option>
<option rel="Making_TP" value="Lee5">Lee 5</option>
<option rel="Making_TP" value="Lee6">Lee 6</option>
<option rel="Making_TP" value="lee7">Lee 7</option>
<option rel="Making_TP" value="ZOATEC">Zoatec</option>
<option rel="Making_TP" value="Lee9">Lee 9</option>
<!-- Making_MW -->
<option rel="Making_MW" value="MW1">Making MW 1</option>
<option rel="Making_MW" value="MW2">Making MW 2</option>
<!-- Finishing_HSL -->
<option rel="Finishing_HSL" value="HSL1">High Speed Line 1</option>
<option rel="Finishing_HSL" value="HSL2">High Speed Line 2</option>
<option rel="Finishing_HSL" value="HSL3">High Speed Line 3</option>
<option rel="Finishing_HSL" value="HSL4">High Speed Line 4</option>
<option rel="Finishing_HSL" value="HSL5">High Speed Line 5</option>
<option rel="Finishing_HSL" value="HSL6">High Speed Line 6</option>
<option rel="Finishing_HSL" value="HSL7">High Speed Line 7</option>
<!-- Finishing_LSL -->
<option rel="Finishing_LSL" value="LSLA">Low Speed Line A</option>
<option rel="Finishing_LSL" value="LSLC">Low Speed Line C</option>
<option rel="Finishing_LSL" value="LSLD">Low Speed Line D</option>
<option rel="Finishing_LSL" value="LSLE">Low Speed Line E</option>
<option rel="Finishing_LSL" value="LSLG">Low Speed Line G</option>
<option rel="Finishing_LSL" value="LSLH">Low Speed Line H</option>
<option rel="Finishing_LSL" value="LSLI">Low Speed Line I</option>
<option rel="Finishing_LSL" value="LSLJ">Low Speed Line J</option>
<!-- Finishing_MW -->
<option rel="Finishing_MW" value="MWFIN1">Mouthwash Finishing 1</option>
<option rel="Finishing_MW" value="MWFIN2">Mouthwash Finishing 2</option>
<!-- VI_TUBES -->
<option rel="VI_TUBES" value="AISA1">Aisa 1</option>
<option rel="VI_TUBES" value="AISA2">Aisa 2</option>
<option rel="VI_TUBES" value="AISA3">Aisa 3</option>
<option rel="VI_TUBES" value="AISA4">Aisa 4</option>
<option rel="VI_TUBES" value="AISA5">Aisa 5</option>
<option rel="VI_TUBES" value="AISA6">Aisa 6</option>
<option rel="VI_TUBES" value="AISA7">Aisa 7</option>
<option rel="VI_TUBES" value="AISA8">Aisa 8</option>
<option rel="VI_TUBES" value="AISA9">Aisa 9</option>
<option rel="VI_TUBES" value="AISA10">Aisa 10</option>
<!-- VI_PRINTING -->
<option rel="VI_PRINTING" value="KPG1">KPG1</option>
<option rel="VI_PRINTING" value="KPG2">KPG2</option>
<option rel="VI_PRINTING" value="KPG3">KPG3</option>
</select>
</div>
<span>
<div class="form-label"><label for="MachineID">Nazwa Maszyny</label></div>
<div class="form-smallmessage"><input type="text" name="MachineID" id="Machine_input"> </div>
</span>
<span>
<div class="form-label"><label for="DateID">Data wystąpienia problemu</label></div>
<div class="form-smallmessage"><input type="date" name="DateID" id="Date_input"></div>
</span>
<span>
<div class="form-labelbig"><label for="ProblemID">Opisz problem</label></div>
<div class="form-smallmessage"><textarea id="text" name="ProblemID" id ="problem_input" rows="10" cols="22"></textarea></div>
</span>
<span>
<input type="button" value="ZABLOKUJ" id="gobutton">
</span>
</div>
</form>
As you can see on the screen it should show only Lee1-9 instead of all answers..
Can you tell me what did I do wrong and how do I fix it? Its the first time I'm trying to do something like this.
Thanks a lot for your time.
In the part where you call .show() on the options that need to be visible, you should also make sure that you call .hide() on the others...
So do this:
$subcat.find("option").hide().filter("[rel=" + _rel + "]").show();
Applied here:
$(function() {
var $cat = $("#category1"),
$subcat = $("#category2");
$cat.on("change", function() {
var _rel = $(this).val();
$subcat.val("").find("option").attr("style", "");
if (!_rel) return $subcat.prop("disabled", true);
$subcat.find("option").hide().filter("[rel=" + _rel + "]").show();
$subcat.prop("disabled", false);
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<form>
<div class="form-history">
<span>
<div class="form-label"><label for="employeeID">WPROWADŹ ID TAG</label></div>
<div class="form-smallmessage"><input type="text" name="employeeID" id="employee_input"></div>
</span>
<span>
<div class="form-label"><label for="DzialID">Wybierz dział</label></div>
<div class="form-smallmessage">
<select name="category1" id="category1">
<option value="">Wybierz Dział</option>
<option value="Making_TP">Making Toothpaste</option>
<option value="Making_MW">Making MouthWash</option>
<option value="Finishing_HSL">Finishing HSL</option>
<option value="Finishing_LSL">Finishing LSL</option>
<option value="Finishing_MW">Finishing MouthWash</option>
<option value="VI_TUBES">VI Tubes</option>
<option value="VI_PRINTING">VI Printing</option>
</select>
</div>
</span>
<div class="form-label"><label for="LineID">Wybierz linie</label></div>
<div class="form-smallmessage">
<select disabled="disabled" id="category2" name="category2">
<option value>Wybierz linie</option>
<!-- Making_TP -->
<option rel="Making_TP" value="Lee1">Lee 1</option>
<option rel="Making_TP" value="Lee2">Lee 2</option>
<option rel="Making_TP" value="Lee3">Lee 3</option>
<option rel="Making_TP" value="Lee4">Lee 4</option>
<option rel="Making_TP" value="Lee5">Lee 5</option>
<option rel="Making_TP" value="Lee6">Lee 6</option>
<option rel="Making_TP" value="lee7">Lee 7</option>
<option rel="Making_TP" value="ZOATEC">Zoatec</option>
<option rel="Making_TP" value="Lee9">Lee 9</option>
<!-- Making_MW -->
<option rel="Making_MW" value="MW1">Making MW 1</option>
<option rel="Making_MW" value="MW2">Making MW 2</option>
<!-- Finishing_HSL -->
<option rel="Finishing_HSL" value="HSL1">High Speed Line 1</option>
<option rel="Finishing_HSL" value="HSL2">High Speed Line 2</option>
<option rel="Finishing_HSL" value="HSL3">High Speed Line 3</option>
<option rel="Finishing_HSL" value="HSL4">High Speed Line 4</option>
<option rel="Finishing_HSL" value="HSL5">High Speed Line 5</option>
<option rel="Finishing_HSL" value="HSL6">High Speed Line 6</option>
<option rel="Finishing_HSL" value="HSL7">High Speed Line 7</option>
<!-- Finishing_LSL -->
<option rel="Finishing_LSL" value="LSLA">Low Speed Line A</option>
<option rel="Finishing_LSL" value="LSLC">Low Speed Line C</option>
<option rel="Finishing_LSL" value="LSLD">Low Speed Line D</option>
<option rel="Finishing_LSL" value="LSLE">Low Speed Line E</option>
<option rel="Finishing_LSL" value="LSLG">Low Speed Line G</option>
<option rel="Finishing_LSL" value="LSLH">Low Speed Line H</option>
<option rel="Finishing_LSL" value="LSLI">Low Speed Line I</option>
<option rel="Finishing_LSL" value="LSLJ">Low Speed Line J</option>
<!-- Finishing_MW -->
<option rel="Finishing_MW" value="MWFIN1">Mouthwash Finishing 1</option>
<option rel="Finishing_MW" value="MWFIN2">Mouthwash Finishing 2</option>
<!-- VI_TUBES -->
<option rel="VI_TUBES" value="AISA1">Aisa 1</option>
<option rel="VI_TUBES" value="AISA2">Aisa 2</option>
<option rel="VI_TUBES" value="AISA3">Aisa 3</option>
<option rel="VI_TUBES" value="AISA4">Aisa 4</option>
<option rel="VI_TUBES" value="AISA5">Aisa 5</option>
<option rel="VI_TUBES" value="AISA6">Aisa 6</option>
<option rel="VI_TUBES" value="AISA7">Aisa 7</option>
<option rel="VI_TUBES" value="AISA8">Aisa 8</option>
<option rel="VI_TUBES" value="AISA9">Aisa 9</option>
<option rel="VI_TUBES" value="AISA10">Aisa 10</option>
<!-- VI_PRINTING -->
<option rel="VI_PRINTING" value="KPG1">KPG1</option>
<option rel="VI_PRINTING" value="KPG2">KPG2</option>
<option rel="VI_PRINTING" value="KPG3">KPG3</option>
</select>
</div>
<span>
<div class="form-label"><label for="MachineID">Nazwa Maszyny</label></div>
<div class="form-smallmessage"><input type="text" name="MachineID" id="Machine_input"> </div>
</span>
<span>
<div class="form-label"><label for="DateID">Data wystąpienia problemu</label></div>
<div class="form-smallmessage"><input type="date" name="DateID" id="Date_input"></div>
</span>
<span>
<div class="form-labelbig"><label for="ProblemID">Opisz problem</label></div>
<div class="form-smallmessage"><textarea id="text" name="ProblemID" id ="problem_input" rows="10" cols="22"></textarea></div>
</span>
<span>
<input type="button" value="ZABLOKUJ" id="gobutton">
</span>
</div>
</form>
change the following code
$subcat.find("option").attr("style", "");
to
$subcat.find("option").attr("style", "display:none;");
Once I select the values determined in the select, the first select corresponds to a positive number, and the rest of select corresponds to a negative number, which will be accumulated depending on the ones that are added.
The problem comes when I select the selects, since the first input should be added/subtracted with the second input, giving rise to the third input that would be the result of these two, but it doesn't work, only when I put the numbers in the inputs manually, and not through select.
What could I do?
$('.pp').on('change', function() {
var value =this.value;
if(value == 'Gran Casa con Supremacía')
{
$('.puntosdepoblacion').val('11');
$('.arcas').val('3 Arcas de Oro');
}
if(value == 'Gran Casa')
{
$('.puntosdepoblacion').val('9');
$('.arcas').val('5 Arcas de Oro');
}
if(value == 'Casa Vasalla')
{
$('.puntosdepoblacion').val('7');
$('.arcas').val('7 Arcas de Oro');
}
});
$(document).ready(function() {
$(".a2, .b2").on("keydown keyup", function(event) {
var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
});
});
$('.select').on("change", function(){
var total=0;
$('.select').each(function(){
var price = parseFloat($(this).find("option:selected").data("price"));
console.log( price );
total += price;
});
$("#opt_price").val(total.toFixed(0))
});
$('.amt').keyup(function() {
var importe_total = 0
$(".amt").each(
function(index, value) {
if ( $.isNumeric( $(this).val() ) ){
importe_total = importe_total + eval($(this).val());
//console.log(importe_total);
}
}
);
$("#inputTotal").val(importe_total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table><select name="titulos" class="pp"><option hidden value="" disabled selected>Títulos</option><option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
<option label="Gran Casa">Gran Casa</option>
<option label="Casa Vasalla">Casa Vasalla</option></select><select class="select" name="poblacion">
<option disabled selected data-price="0">Población</option>
<option data-price="0">Nivel 0</option><option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<select class="select" name="recursos">
<option disabled selected data-price="0">Recursos</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<select class="select" name="milicia">
<option disabled selected data-price="0">Milicia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select><select class="select" name="influencia">
<option disabled selected data-price="0">Influencia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select><select class="select" name="ley">
<option disabled selected data-price="0">Ley</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option></select>
<div class="puntosrasgos"><div class="col-six" style="
height: 40px;
line-height: 40px;
"><div class="titulopuntosrasgos">Puntos de Población [PP]</div></div><div class="col-four"><div class="input-group" style="
position: absolute;
margin-top: -23px;
margin-left: 145px;
">
<table style="">
<tbody><tr>
<td width="10" rowspan="1" style="
table-layout: fixed;
min-width: 35px;
"><div class="col-pp"><input class="solo-numero amt puntosdepoblacion" type="number" id="form-field-first" value="0" name="positivos"></div></td>
<td width="10" rowspan="1"><div class="col-pp"><input class="solo-numero amt" value="0" type="number" id="opt_price" name="negativos"></div>
</td>
<td colspan="3" height="10"><div class="solo-numero amt"><input id="inputTotal" class="solo-numero" value="0" type="number" disabled name="total"></div>
</td>
</tr>
</tbody></table></div></div></div>
You have to manually trigger an event when you change the input values.
First, make them respond to the change event:
$(".a2, .b2").on("keydown keyup change", function(event) {
// Code ommited
})
Then, whenever you update the value, trigger the event:
In the .pp handler, after the if blocks:
$('.puntosdepoblacion').change();
And
$("#opt_price").val(total.toFixed(0)).change();
Full code:
$(document).ready(function() {
$('.pp').on('change', function() {
var value = this.value;
if (value == 'Gran Casa con Supremacía') {
$('.puntosdepoblacion').val('11');
$('.arcas').val('3 Arcas de Oro');
}
if (value == 'Gran Casa') {
$('.puntosdepoblacion').val('9');
$('.arcas').val('5 Arcas de Oro');
}
if (value == 'Casa Vasalla') {
$('.puntosdepoblacion').val('7');
$('.arcas').val('7 Arcas de Oro');
}
// Trigger the change event in .pp to force calculation <---
$('.puntosdepoblacion').change();
});
$('.select').on("change", function() {
var total = 0;
$('.select').each(function() {
var price = parseFloat($(this).find("option:selected").data("price"));
console.log(price);
total += price;
});
$("#opt_price").val(total.toFixed(0))
.change(); // Trigger
});
$(".a2, .b2").on("keydown keyup change", function(event) { // <--- Respond to change event, too
var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
tr.find(".c2").val(Number(tr.find(".a2").val()) + Number(tr.find(".b2").val()));
});
});
<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="titulos" class="pp">
<option hidden value="" disabled selected>Títulos</option>
<option label="Gran Casa con Supremacía">Gran Casa con Supremacía</option>
<option label="Gran Casa">Gran Casa</option>
<option label="Casa Vasalla">Casa Vasalla</option>
</select>
<select class="select" name="poblacion">
<option disabled selected data-price="0">Población</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="recursos">
<option disabled selected data-price="0">Recursos</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="milicia">
<option disabled selected data-price="0">Milicia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="influencia">
<option disabled selected data-price="0">Influencia</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<select class="select" name="ley">
<option disabled selected data-price="0">Ley</option>
<option data-price="0">Nivel 0</option>
<option data-price="-1">Nivel 1</option>
<option data-price="-2">Nivel 2</option>
<option data-price="-3">Nivel 3</option>
<option data-price="-4">Nivel 4</option>
<option data-price="-5">Nivel 5</option>
<option data-price="-6">Nivel 6</option>
<option data-price="-7">Nivel 7</option>
<option data-price="-8">Nivel 8</option>
<option data-price="-9">Nivel 9</option>
</select>
<div class="puntosrasgos">
<div class="col-six" style="height: 40px; line-height: 40px;">
<div class="titulopuntosrasgos">Puntos de Población [PP]</div>
</div>
<div class="col-four">
<div class="input-group" style="position: absolute; margin-top: -23px; margin-left: 145px;">
<table style="">
<tbody>
<tr>
<td width="10" rowspan="1" style="table-layout: fixed; min-width: 35px;">
<div class="col-pp">
<input class="col-xs-4 a2 puntosdepoblacion" type="number" disabled id="form-field-first" value="0" name="positivos">
</div>
</td>
<td width="10" rowspan="1">
<div class="col-pp">
<input class="col-xs-4 b2" value="0" type="number" disabled id="opt_price" placeholder="0" name="negativos">
</div>
</td>
<td colspan="3" height="10">
<div class="col-pp">
<input class="col-xs-4 c2" value="0" type="number" disabled id="form-field-first" placeholder="0" name="total">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I have 2 select boxes. When I select an option on selectbox1, it automatically changes the corresponding value on selectbox2 regardless of value but order.
The thing is, the code is working fine until after a few tries. Then even if I change the option on selectbox1, it doesn't update the one on selectbox2.
To reproduce the issue; go through A to E, then repeat.
Code:
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Also JSFiddle version: https://jsfiddle.net/153w074d/
No need for all that code, just work with selectedIndex:
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
What happened in your original code is that, in some way, the selected attributes are being messed around. Try this: Change to each option from A to E, then start over from A, the selection stops working. Then inspect the second select to see that there are more than one option with selected="selected" attribute. Not sure what caused that tho.
#DontVoteMeDown's answer will certainly work, but the reason you're having this issue is because of the discrepancy between .prop and .attr. Both are similar, but don't refer to the same, identical underlying value.
If you change the below two lines to use the .prop value instead of .attr, your code will work. See the working code example below.
$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
$(secChildIdx).attr("selected", "selected"); // change to .prop
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeProp('selected');
$(secChildIdx).prop("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
You can also use prop to select option.
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
I'm trying to create a function in javascript that will see what day it is and depending on a day have a certain drop box list appear. However, for some reason it won't work and I'm not sure where the syntax error is in my code.
HTML:
<html>
<head></head>
<body>
<div class="Questions">
<div id="myAnswers" style="display : none">>
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B" style="display : none">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>
</body>
</html>
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var day= new Date();
var weekday= day.getDay();
$("#A","#B").hide();
function showAnswer(){
if(weekday==3 || weekday==4){
$("#B").show();
}else{
$("#A").show();
}
}
window.onload=showAnswer;
</script>
A few issues to fix before your code can work:
As noted by #junkfoodjunkie you do not need the style="display:none;"
Use new Date(), not new Day()
Use $("#A,#B").hide(), not $("#A","#B")
Feel free to liberally use jQuery since ... :)
$(function() {
var day= new Date();
var weekday= day.getDay();
$("#A,#B").hide();
function showAnswer(weekday) {
if(weekday==3 || weekday==4) {
$("#B").show();
} else {
$("#A").show();
}
}
showAnswer( weekday );
console.log( weekday );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Questions">
<div id="myAnswers">
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>
So I have "add" and "delete" buttons that will respectively add/delete input fields. I also have a "preview" button ( using anchor tags) that will send the user to the next page. Upon clicking the preview button, I want to collect all information given and re-displayed on the next page.
I'm totally un aware of how to collect this dynamic information (user will add/delete BEFORE hitting preview, so the amount of input is unknown). How can I pass all this?
Here is what my code/markup looks like (Sorry if it is too many lines of code, I just want to give you as much information as possible):
JavaScript for deleting and adding fields:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
Add Line
Delete Line
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>
<div class="panel" style="width:98%; margin:0 auto">
<h5>Terms and Conditions</h5>
<p>I.</p>
<p>II.</p>
<p>III.</p>
<p>IV.</p>
</div>
<hr>
<div align="center">
Preview
</div>
If the information doesn't need to be secure, just use the url to pass parameters:
How to get the value from the GET parameters?
1) on your onclick function, you collect the information and create a string that is going to be the new url (with the parameters)
2) use window.location = newUrl; to access the link
3) in the new page, parse the URL to get the info
You can use localStorage variable to pass values between pages
eg. page 1:
localStorage.setItem("key","value");
page 2:
var value=localStorage.getItem("key");