i am trying to do a small application and i am completely new to this.
here is what my code looks like.
<select id="servicename" ng-model="ServicePackages" ng-options="servicename for (servicename, ServicePackages) in ServiceType"><option value=''>Select</option></select>
<select ng-model="price" ng-disabled="!ServicePackages" ng-options="servicepack for (servicepack, price) in ServicePackages"><option value="">Select</option></select>
<h1 ng-disabled="!ServicePackages || !price">{{price + 1}}</h1>
I dont want H1 tag to show up until there is no second dropdown selected.
And i am not able to bind the data for
<form>
<select id="servicename" ng-model="ServicePackages" ng-options="servicename for (servicename, ServicePackages) in ServiceType"><option value=''>Select</option></select>
<select ng-model="price" ng-disabled="!ServicePackages" ng-options="servicepack for (servicepack, price) in ServicePackages"><option value="">Select</option></select>
<input type="text" ng-model="numberOfpages" />
<h1 ng-disabled="!ServicePackages || !price">{{(price + numberOfpages)}}</h1>
</form>
here also its just keep adding, but not performing the sum.
Thank you in advance
ng-disabled isn't applicable to a <h1> tag because it isn't any kind of user input. Try it using ng-if, or ng-show (or ng-hide).
<h1 ng-hide="!ServicePackages || !price">{{price + 1}}</h1>
As for the addition, you must ensure you're adding 2 numbers, not strings.
Related
I'm doing a website that allow user to add new group to the existing group. In the existing group it already have three fixed group which are It, cleaning, accountant, so my idea was letting user to add group name by clicking submit and their input field will be sent to
empty's <p> tag (eg： nurse, doctor.. and so on differentiate which a coma ,). Other than that, after I able to get the existing and new added group, I need to dynamically add the full groups to a drop down list. (eg: It, cleaning, accountant, nurse, doctor).
I know stackoverflow is not a code writing service, but I do make own research before posting this question and I couldn't found any useful resources. So anyone who willing to guide me will be much appreciate. Thanks in advance
Current template:
Expected Output:
Full code:
<!DOCTYPE html>
<html>
<body>
<h1>Existing Group</h1>
<p>IT, Cleaning, Accountant</p>
<h1>Add New Group</h1>
<p></p>
<input type="tel" id="group" name="group" placeholder="enter group name">
<br><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<h1>Drop Down List</h1>
<label for="group">Choose a group:</label>
<select name="group" id="group">
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</body>
</html>
You need to use JavaScript.
First, you use addEventListener() to listen when the user clicks the submit button. Then, we get the value of the input and separate it by commas with input.value.split(','). Then, we loop through the values, create a new <option> tag and add it to the <select> tag.
Also, you have two elements with id="group", so you need to change one of them. I changed the <select> to id="group-select".
const submit = document.querySelector('button');
const input = document.querySelector('input');
const select = document.querySelector('select');
const myP = document.querySelector('p#myP');
submit.addEventListener('click', function(e)
{
const values = input.value.split(',');
if (myP.innerText == '')
{
myP.innerText = values;
}
else
{
myP.innerText += ', ' + values;
}
for (let i in values)
{
const new_option = document.createElement('option');
new_option.value = values[i];
new_option.innerText = values[i];
select.appendChild(new_option);
}
});
<!DOCTYPE html>
<html>
<body>
<h1>Existing Group</h1>
<p>IT, Cleaning, Accountant</p>
<h1>Add New Group</h1>
<p id="myP"></p>
<input type="tel" id="group" name="group" placeholder="enter group name">
<br><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<h1>Drop Down List</h1>
<label for="group">Choose a group:</label>
<select name="group" id="group-select">
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</body>
</html>
In this case, you will need to use some javascript depending on your requirements to add the extra node as follows:
Pure JS:
var result = document.getElementById("group");
var tag = document.createElement("option");
tag.setAttribute("value",result.value)
var text = document.createTextNode(result.value);
tag.appendChild(text);
var element = document.getElementById("groupSelect");
element.appendChild(tag);
Keep in mind you have 2 elements with the same ID (group), which will cause most of your JS to crash. Also note that you can also use Jquery which might be a bit easier as well
I have a web form where i disable a dropdown on page load in C#.
The drop down is to be disabled at all times, only when users make a certain selection is when I would like to change the value in my drop down. Either Yes or No.
This is my Javascript code:
var drpModeNeed = document.getElementById("drpAssessID"); //This dropdown is
//where I'm looking to change the value (it is disabled)
var drp4Val = (document.getElementById('<%=drp4ID.ClientID %>').value);
var drp14Val = (document.getElementById('<%=drp14ID.ClientID %>').value);
var drp15Val = (document.getElementById('<%=drp15ID.ClientID %>').value);
if (drp4Val == 1 || (drp14Val == 1 && drp15Val == 1))
{
//trying to change the value here of dropdown
}
This is what I've tried in the if statement
drpModeNeed.options[drpModeNeed.selectedIndex].value == 1;
but nothing happens. I know for sure that it definitely recognizes the statements, becase I've placed an alert inside the IF statement and each time it would show that the values were definitely selected.
I guess I'm wondering if I'm able to change the value of a disabled dropdown? if I am, then why isn't the code working?
To update the effective value of a <select> element, you don't set the .value of an <option>, you set the .selected property to true (or any truthy value):
drpModeNeed.options[1].selected = true;
Keep in mind that if the <select> element has the .disabled property set, posting the enclosing <form> will not send that value to the server. The browser assumes that disabled elements are supposed to be ignored.
it works for me:
function changeValue(newValue){
var drpModeNeed = document.getElementById("drpAssessID");
drpModeNeed.value=newValue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="drpAssessID" disabled="disabled" class="aspNetDisabled">
<option value="1">one</option>
<option selected="selected" value="2">two</option>
</select>
<br /><br />
<button type="button" onclick="changeValue(1);">Set 1</button>
<br /><br />
<button type="button" onclick="changeValue(2);">Set 2</button>
</body>
</html>
When i select an item from a dropdownmenu id like to view it in a input field, if another item is selected i want to add this to the input field separated by a comma.
Currently this is the html:
<div>
<input type="text" id="box" placeholder="Using..." style="width: 400px">
<select style="width: 180px" id="drop">
<option value="" disabled selected>Select</option>
{% for stuff in stuffs%}
<option value="{{stuff}}" onclick="ApplyField(drop,box)">{{stuff}}</option>
{% endfor %}
</select>
</div>
and the javascript:
<script>
function ApplyField(drop_id,box_id)
{
var e = document.getElementById(field_id);
var selectedItem = e.options[e.selectedIndex].text;
if (document.getElementById(box_id).text == "")
document.getElementById(box_id).text = selectedItem;
else
document.getElementById(box_id).text = document.getElementById(box_id).text + "," + selectedItem;
}
</script>
But somehow my script wont set the input box item to the selecteditem altough the code seems logical to me. This is my first time writing javascript so its likely that i missed something trivial. Any help is appretiated.
I believe that your drop_id and box_id are not the correct way to select the element in JavaScript. Also not quite sure what is going on with the {{stuff}} template to be honest
Can you use jQuery? If so, have a look at http://www.w3schools.com/jquery/html_val.asp
First of all, thank you very much for supporting me in: Change Dropdown values based on input in textfield
Now I need to extend this feature.
Here is the code for changing the drop down menue based on a text field value (Thank you very much, Rion Williams):
https://jsfiddle.net/q5s24th2/
Now I would like to add more persons for which I can also enter the textfield value so that the drop down menu changes its content. Here I have created something to add more people:
https://jsfiddle.net/xsnLc48o/
<p id="maintable">1:
<input name="Year1" type="text" value="" />
<select name="Results1">
<option selected="selected" value="">please choose:</option>
<option value="300" data-under-18="100" data-over-18="300">300.-</option>
<option value="500" data-under-18="200" data-over-18="500">500.-</option>
<option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
<option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
<option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
<option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
</select>
<input name="Additional1" type="checkbox" title="Option" value="1" />Option
</p>
<p>
<input type="button" value="+ Add Person" id="addRows" />
</p>
Unfortunately for the added persons the drop down feature does not work (I have tried several things).
If anybody has an idea how to do it, I would be very happy.
Maybe there is a much better possibility than using the addRows/append feature.
Thank you in advance.
Best regards,
Andy
You could accomplish this by creating a function that would clone one of your existing rows and append it to content. It may be best to consider using a table to more easily organize your content :
<table id="maintable">
<tr class='person-row'>
<td class='person-number'>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
And then adjusting your "add rows" function to clone the first row and then store a counter of the number of current users so that you can append that to the name attribute as expected :
// When you add a new user
$("#addRows").click(function(){
// Determine the next users number
var nextUser = $('.person-row').length + 1;
// Clone the first row
var nextUserRow = $('#maintable tr:first').clone();
// Update your attributes
$(nextUserRow).find('.person-number').text(nextUser + ':');
$(nextUserRow).find('.person-year').attr('name','Year' + nextUser).val('');
$(nextUserRow).find('.person-value').attr('name','Results' + nextUser);
$(nextUserRow).find('.person-additional').attr('name','Additional' + nextUser);
// Set the defaults for the row
$(nextUserRow).find('select option:not(:first)').each(function() {
var valueToUse = $(this).attr('data-over-18');
$(this).val(valueToUse).text(valueToUse + '.-');
});
// Append the row
$("#maintable").append(nextUserRow);
});
You can see a working example of this in action here and demonstrated below :
I am trying to replace a series of 'for' attributes of labels based on their current contents.
The application is using AJAX to add an item to an invoice without refreshing the page. Upon receiving notification of a successful item add, my script should replace all the labels in the form whose 'for' attribute ends with '-new' with the same attribute minus the '-new' and adding ('-' + itemValue), where itemValue is the item Id of the invoice item that was added.
I know how to select all the labels I want to change at once:
jQuery('label[for$=new]')
I know how to get their 'for' attribute:
jQuery('label[for$=new]').attr('for')
I tried the JavaScript replace method:
jQuery('label[for$=new]').attr('for').replace(/-new/,itemValue)
But that appears to select each label's 'for' attribute, replace the text, and pass the replaced text back (to nothing), since I don't know how to identify the labels that have the 'for' attribute I want to replace.
Here's some sample HTML:
<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF'];?>" method="post" name="InvoiceItemsForm-1" onsubmit="return false">
<div id="InvoiceItem-new-1" class="InvoiceItem">
<label for="InvoiceItemNumber-new">New Invoice Item Number: </label>
<input id="InvoiceItemNumber-new" class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber-new">
<label for="InvoiceItemDescription-new">Item Description: </label>
<input id="InvoiceItemDescription-new" class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new">
<label for="InvoiceItemAmount-new">Item Amount: </label>
<input id="InvoiceItemAmount-new" class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new">
<input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem">
</div>
<button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button>
</form>
Once I get this to work, I'm going to replace all the ids for all the inputs. Same problem. I imagine the solution looks something like this:
jQuery('input[id$=new]').attr('id').replace(/-new/,itemValue)
I just cannot figure out the syntax for this at all.
No need to use .each() ... the .attr() method accepts a function as the second parameter that returns the new value to be used as replacement
jQuery('label[for$=new]').attr('for', function(index, currentValue){
return currentValue.replace(/-new/,'-' + itemValue);
});
If I may, why not just put the input tag inside the label tag? That way, you won't need a for attribute inside the label tag.
Next, a better way to accomplish what you're trying to do would be to use the invoice ID number as the ID for the surrounding div, and add a 'new` class for "new" invoice entries.
So your form would look something like this:
<form id="InvoiceItemsForm-1" action="<?=$_SERVER['PHP_SELF']" method="post" name="InvoiceItemsForm-1" onsubmit="return false">
<div class="InvoiceItem new">
<label>New Invoice Item Number: <input class="InvoiceItemNumber" type="text" value="" name="InvoiceItemNumber"></label>
<label>Item Description: <input class="InvoiceItemDescription" type="text" value="" name="InvoiceItemDescription-new"></label>
<label for="InvoiceItemAmount-new">Item Amount: <input class="InvoiceItemAmount" type="text" value="" name="InvoiceItemAmount-new"></label>
<input id="addInvoiceItem-1" width="25" type="image" height="25" src="/payapp/images/greenplus.th.png" alt="Add New Invoice Item" onclick="addInvoiceItemButtonPushed(this)" value="invoiceItem">
</div>
<button id="CloseInvoice-1" onclick="closeInvoice(this)" type="button">Close Invoice</button>
</form>
You'll still have all the targetability you need to get the new invoice item field data, but now, you only have two things to do to convert from a "new" invoice row to an "existing" invoice item row: add an id attribute to the div and remove the new class, both of which jQuery will let you do quite easily.
Not sure I get the question, but something like:
var oldFor = $('label[for$=new]').attr('for');
var newFor = oldfor.replace(/-new/,itemValue);
$('label[for$=new]').attr('for', newFor);
.attr( attributeName, value )
attributeName = The name of the attribute to set.
value = A value to set for the attribute.
When selecting multiple elements, you will need to iterate:
$('label[for$=new]').each(function(index) {
$(this).attr('for', $(this).attr('for').replace(/-new/, '-' + itemValue));
});