data-ng-change cannot pass a parameter to the function - javascript

I have a dropdown list, which is a combination of two values: engine.number and engine.name. After an option is selected passNumber() function should be called. The function is called after the selection of the option, but it does not pass the "engine.number" value. It becomes 'undefined' when I debug the js function. What am I missing here?
HTML:
<div class="controls">
<select class="span3" ng-model="selectedEngine" ng-options='engine.element as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(engine.number)">
<option value="">Please Select...</option>
</select>
<span class="help-inline" id="loadingEngines" rel="spinner"></span>
</div>
Function:
$scope.passNumber = function(number) {
//do something
}
Edit:
I tried selectedEngine, selectedEngine.number, engine, engine.number to pass they are all 'undefined'

It's because it has no idea which repeated instance you're trying to pass. You need to pass in the ngModel - so change your model to be the entire object and pass that:
<select class="span3" ng-model="selectedEngine" ng-options='engine as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(selectedEngine.number)">
<option value="">Please Select...</option>
</select>

First to all...
Is the select loading data? Maybe you´re not using an controller directive.
<div class="controls" data-ng-controller="MyController">
<select class="span3" ng-model="selectedEngine" ng-options='engine.element as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(engine.number)">
<option value="">Please Select...</option>
</select>
<span class="help-inline" id="loadingEngines" rel="spinner"></span>

Change your ng-options's data-ng-change to pass in the selectedEngine from ng-model:
<div class="controls">
<select class="span3" ng-model="selectedEngine" ng-options='engine.element as (engine.number + " " + engine.name) for engine in engines' data-ng-change="passNumber(selectedEngine)">
<option value="">Please Select...</option>
</select>
{{ selected }}
</div>
See Plunkr

Related

Javascript concatenate select and input values in a text box

I'd like to concatenate several values from selects and input fields on a final input field that contain all the values.
What I have until now is this:
$('#chosen_a').change(function() {
$('#ddlNames').val($('#chosen_a option:selected').data('id'));
console.log($('#chosen_a option:selected').data('id'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- First select -</option>
<option value="AAA" data-id="AAA">AAA</option>
<option value="BBB" data-id="BBB">BBB</option>
<option value="CCC" data-id="CCC">CCC</option>
<option value="DDD" data-id="DDD">DDD</option>
<option value="EEE" data-id="EEE">EEE</option>
</select>
<input id="Something1" placeholder="Write something"></input><br/>
<select name="criteria_title" id="chosen_b" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
<option value="" disabled="" selected="">- Second select -</option>
<option value="FFF" data-id="FFF">FFF</option>
<option value="GGG" data-id="GGG">GGG</option>
<option value="HHH" data-id="HHH">HHH</option>
<option value="III" data-id="III">III</option>
<option value="JJJ" data-id="JJJ">JJJ</option>
</select>
<input id="Something2" placeholder="Write something else"></input><br/>
<br><br>
<input maxlength="2600" name="ddlNames" id="ddlNames" onKeyUp="countChar(this)" placeholder="Blocco Note"></input><br/>
In effect, I can get the first select option to the input field, but I do not know how to add the rest.
If I understand you well ...
Add a class 'getValues' to all inputs & selects that you want to get the values and create an event on JQuery onChange so when something will change it will auto-join it in that #ddlNames input.
$('.getValues').change(function() {
var values = [];
$('.getValues').each(function() {
values.push($(this).val());
});
$('#ddlNames').val(values.join(', '));
})
Try this:
const onChange = () => {
const value = $('#chosen_a option:selected').val() + ' '
+ $('#Something1').val() + ' '
+ $('#chosen_b option:selected').val() + ' '
+ $('#Something2').val();
$('#ddlNames').val(value);
}
$('select').change(onChange);
$('input').keydown(onChange);

Possible to assign tab value to html form element?

I am curious if it possible to assign a tab character as value to an html dropdown list. This is my current markup:
<select id="delimiter-select" class="form-control form-control-sm csv-select">
<option value=",">Comma (,)</option>
<option value=";">Semi-Colon (;)</option>
<option value="|">Pipes (|)</option>
<option value="Tab">Tab</option>
</select>
Where the value Tab is I would like that to be a tab character that I can eventually pass to JS.
There is a HTML entity for the Tab character, &Tab; or , use that:
document.getElementById("delimiter-select").onchange = function (e) {console.log(` Separator is ${e.target.value} separating`)}
<select id="delimiter-select" class="form-control form-control-sm csv-select">
<option value=",">Comma (,)</option>
<option value=";">Semi-Colon (;)</option>
<option value="|">Pipes (|)</option>
<option value="&Tab;">Tab</option>
</select>
Use as the tabulation HTML entity
console.log($('#input').val() + 'Test');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" value=" ">

angularjs ng-repeat cascading Dropdown not updating

I have this issue using Angularjs
i am creating cascade drop down like below
<div class="col-sm-2 pr10">
<select class="PropertyType" ng-controller="LOV" ng-init="InitLov(140)" ng-model="PropertyType" ng-change="update(PropertyType)" >
<option value="" selected="selected" disabled="disabled"> {{type ? type: 'Property Type'}} </option>
<!-- <option value="">-- Select Type --</option>-->
<option ng-repeat="Lov in LovList" value="{{Lov.Value}}" >{{Lov['Lable'+Lang]}} </option>
</select>
</div>
<div class="col-sm-2 pr10">
<select class="PropertySubType" ng-controller="LOV" ng-model="PropertySubType" >
<option value="" selected="selected"disabled="disabled" >{{subType ? subType: 'Property Sub Type'}}</option>
<!-- <option value="">-- Select Sub Type --</option> -->
<option ng-repeat="Sub in SubType" value="{{Sub.Value}}" >{{Sub['Lable'+Lang]}} </option>
</select>
</div>
and the Angular file:
$scope.update = function (id) {
$http.post("API/WebsiteService.asmx/getSubPropertyLov", { type: id }).success(function (data) {
debugger;
var rr = eval('(' + data.d + ')');
$scope.SubType = rr.result;
});
}
the API returns data, and the SubType scope gets it, but it doesn't change the dropdown data (PropertySubType),
*the function is inside LOV controller.
Don't duplicated ng-controller="LOV" on each select, this way they both get different scopes. Put both selects in the scope of the same controller.
Also don't use ngRepeat, use ngOptions:
<div ng-controller="LOV">
<div class="col-sm-2 pr10">
<select class="PropertyType"
ng-init="InitLov(140)"
ng-model="PropertyType"
ng-change="update(PropertyType)"
ng-options="Lov.Value as Lov['Lable' + Lang] for Lov in LovList">
<option value="" selected="selected" disabled="disabled"> {{type || 'Property Type'}} </option>
</select>
</div>
<div class="col-sm-2 pr10">
<select class="PropertySubType"
ng-options="Sub.Value as Sub['Lable' + Lang] for Sub in SubType"
ng-model="PropertySubType">
<option value="" selected="selected" disabled="disabled">{{subType || 'Property Sub Type'}}</option>
</select>
</div>
</div>

"Add" button stops working after deleting rows

I'm able to clone the #ingredient_1 div with the Add button. However, after pressing Add several times, then deleting random cloned divs with their specific X buttons, the Add button stops working.
I've replicated this problem across several browsers. Any advice would go a long way.
$('#add_more').click(function() {
var num = $('.clone').length;
var newNum = num + 1;
var newElem = $('#ingredient_1').clone().attr('id', 'ingredient' + '_' + newNum);
$('#ingredient_' + num).after(newElem);
});
$('#main').on('click', '.remove', function() {
$(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="ingredient_1" class="clone">
<select id="1">
<option selected="selected">Please Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<input type="text" name="name" placeholder="Amount" />
<select id="2">
<option selected="selected">Units</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<select id="3">
<option selected="selected">Time</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<button class="remove">X</button>
</div>
<div id="add_button">
<input type="button" id="add_more" value="Add" />
</div>
</div>
Once you delete the first row the element you're cloning no longer exists. Clone the element outside your click function so it's not overwritten:
var newElem = $('#ingredient_1').clone().attr('id', 'ingredient' + '_' + newNum);
var num = 1;
$('#add_more').click(function() { ... });
Also, declare your ID incrementor outside the function and simply add 1 each time the click function runs with num++. I'm guessing that it doesn't really matter what the ID values are, so as long as they're unique this works.
The problem is that you're using .length to calculate newNum. If you delete DIVs in the middle, you'll end up with duplicate IDs. For instance, suppose you first add 3 DIVs, you'll have DIVs numbered 1, 2, 3, 4. Then you delete #3. The next time you click Add, $(".clone").length will be 3, so you'll set newNum = 4;. But there's still a DIV with that ID.
Instead of using $(".clone").length, get the ID of $(".clone:last"), get the number at the end of it, and add 1 to that.
You're cloning, which if you have at least one static item, is fine. I fixed up your code so your initial row is hidden, and you have an ID variable that is auto incremented. On top of which, on load, it creates clones and creates the first row. Your back end code will just have to ignore a case where the style is set to display:none.
var id = 1;
$(function () {
var first = $('.clone');
first.attr('style', 'display:none');
NewRow();
});
$('#add_more').click(function () {
NewRow();
});
function NewRow() {
console.log('num = ' + id++);
var newElem = $('.clone:last').clone().attr('id', 'ingredient' + '_' + id + '_x');
newElem.attr('style', '');
$('.clone:last').after(newElem);
}
$('#main').on('click', '.remove', function () {
$(this).parent().remove();
});
You'll notice that I changed your click event to call the function NewRow(), this was done so that you can call a function in the Document.Ready event, as well as on the button click.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="ingredient_1" class="clone">
<select id="1">
<option selected="selected">Please Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<input type="text" name="name" placeholder="Amount" />
<select id="2">
<option selected="selected">Units</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<select id="3">
<option selected="selected">Time</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
<option value="">Select</option>
</select>
<button class="remove">X</button>
</div>
<div id="add_button">
<input type="button" id="add_more" value="Add" />
</div>
</div>
Working JSFiddle is here

Why is only one GET value showing

I am trying to retrieve the values entered in the form below to pass into a PHP file so I can add the values into the database. The problem is I am only getting one of the values to pass into the PHP page, the URL bar only shows one value which is equipmentList I am new to JavaScript and PHP but I am guessing the solution is relativly simple. I know the problem is not with my PHP file because right now for testing/learning purposes I am only using echo to print the value of the $_GET variables that appear in the URL bar. My code below:
<form id="updateForm" action="formPage.php">
<input type="text" id="jobDescription" style="display: none"/>
<label id="equipRan" style="display: none">Equipment ran</label>
<div id="drops">
<div id="equipType">
<select size="1" name="equipmentList" title="" id="equipmentList" style="display: none">
<option value="">Select Machine</option>
<option value="EX">Excavator</option>
<option value="DZ">Dozer</option>
<option value="SC">Scraper</option>
</select>
</div>
<div class="unitDropDowns">
<div class="EX">
<select class="exUnitNumbers">
<option value="">Unit number</option>
<option value="01E">01E</option>
<option value="2E">2E</option>
<option value="4E">4E</option>
</select>
</div>
<div class="DZ">
<select class="dzUnitNumbers">
<option value="">Unit number</option>
<option value="01D">01D</option>
<option value="2D">2D</option>
<option value="1D">1D</option>
</select>
</div>
<div class="SC">
<select class="scUnitNumbers">
<option value="">Unit number</option>
<option value="54C">54C</option>
<option value="53C">53C</option>
<option value="52C">52C</option>
</select>
</div>
</div>
</div>
<button type="submit" id="updateButton" onclick="dbQuery()" style="display: none">Submit</button>
</form>
JavaScript Function:
var dbQuery = function(){
var description = document.getElementById("jobDescription").value;
var selectedEquip = document.getElementById("equipmentList");
var selectedEquip1 = selectedEquip.options[selectedEquip.selectedIndex].text;
var selectedVisibleValue = $(".unitDropDowns select:visible").val();
document.getElementById("descriptionSummary").innerHTML = "<h3>Description</h3>" + "<p>" + description + "</p>";
document.getElementById("equipmentRan").innerHTML = "<h3>Equipment Ran </h3>" + "<p>" + selectedEquip1 + "</p>" + "<h3>Unit Number</h3>" + "<p>" + selectedVisibleValue + "</p>";
document.getElementById("equipmentRan").style.display = "block";
document.getElementById("descriptionSummary").style.display = "block";
document.forms["updateForm"].submit();
}
Only your equipmentList select has a name and id.
In order for the value of an html element such as input or select to be included in request submitted by the form, these elements must have name attribute defined.
The purpose of your dbQuery function is not clear. Html that you construct there will at best quickly flash in front of the user and then will be replaced by the new page returned from the server.

Categories