How to collect dynamic html from input fields using JavaScript - javascript

I have 16 table elements like,
<td id="test"> /Dynamic value appears here from JavaScript/ </td>
Where I put values from OnChange event, with this JavaScript
document.getElementById('test').innerHTML = value + " LT";
Now I want to know how to grab all input field values upon changing input field values in <td id="Test"> </td> , because in the other field I want to show total amount based on other fields.
----------------------------------------------------------update
I will ask other question from same opera.
How get value from input type="hidden" field, where value changed allways then user select new element on html ??

Related

updating values in django template in html input?

I am making a shopping cart. I want to update the value as the user updates the input field.
Here is my code:
<tr>
<th scope="row">1</th>
<td>${object['name']}</td>
<td>
<input type="number" value=1 id=${object['id']}>
</td>
<td>${object['price']*this.value}</td>
</tr>
The input field has a default value of 1. In the last tag, I am multiplying value by the price. I am using "this" keyword because I want to apply the multiplied amount to the same row.
It doesn't give me any error but it just prints "NaN" in the table not the figure.

Auto fill form using javascript - get data from datalist

I have an autocomplete field that receives it's data from a database:
<datalist id="custlist">
<?php
$q_cust=mysql_query("select * from customer where rowstatus='0' order by id");
if (mysql_num_rows($q_cust)>0) {
while ($row=mysql_fetch_array($q_cust)){
print '<option value="'.$row['id'].'">'.$row['name'].'</option>';
}
}
?>
</datalist>
Below is my HTML for the codelist:
<tr>
<td></td>
<td><h3>Field 1</h3></td>
<td>:</td>
<td><input class="awesomplete" required="required" id="cust" name ="custnama" list="custlist" /></h3></td>
<td></td>
</tr>
The autocomplete works fine (I'm using the awesomplete widget) and when I select one of the customer names, the input 1 field will automatically show the ID of the customer.
What I want to do is having another field, let's say "input 2" that will show the customer name when the user selects the ID from the input 1 field.
Since I already stored the name as well on the data list, can I just get it from the datalist and show it in the input 2 field based on the value of input 1 using JavaScript?
If i can't do that please explain me the simplest way to get it done.

Gather a ng-model from several input fields

I am very new to angular and i am trying to display several input boxes and then gather the inputs of the user for each. The number or id of the input boxes depends on a json and its dynamic. I am trying to create the structure in a ng-repeat but it only displays one input box when i define the field ng-model for it.
This is what i have so far.
<td ng-repeat="(key, value) in personType.requirements">
<label for="{{key}}">{{key}}:</label> <input type="text" id="{{key}}" value="{{value}}" ng-model="newReg.{{key}}"></td>
<td><button id='finalizePerson' ng-click="register(newReg)">Register</button></td>
You need to explicitly define the $scope.newReg = {}; to your controller scope.
And to use dynamic ng-model properties, try newReg[key] instead.

How to add URL data (variables) when submiting a form?

I have this form on my web page:
<form action="my_target_file.py">
<!-- some input textboxes here -->
<input type="submit" value="Go!" />
</form>
When the form is submitted, I can access those values (the ones in the textboxes and other controls) easily. But I want to add some data to the my_target_file.py URL. For example, using Javascript, I can check if there's a checkbox checked or not. If it's checked, then I want to call my_target_file.py?checked=1 when submiting the form, along with all those values which the user has entered at the textboxes.
My current solution is to have a hidden textbox which I fill using Javascript when the checkbox is checked, for example. Then I read the hidden textbox from my_target_file.py, but that's not too clean.
How can I achieve this?
Simply name the checkbox "checked" and set its value to "1"--JavaScript is not needed.
<input type="checkbox" name="checked" value="1" />
When added to the form code that you provided, the above checkbox will add a query string value of checked=1 within the existing query string if and only if the user has checked the checkbox.
As per your comment below, you can append hidden fields within a form like this:
var box = document.createElement('input');
box.type = 'hidden';
box.value = '1';
box.name = 'checked';
form.appendChild(box);
Do this for each parameter name and value that you want to store, and replace form with the JavaScript object that represents your form, e.g., document.forms[0] or document.getElementById("formid").

How can I hide/show textboxes based on drop down menu selection?

I have a drop down menu for which one option is 'Other'. Each option is tored in a table with an id ie if OptionId = 6, OptionDescription is "Other".
If 'Other' is chosen, a text box should appear for the user to enter specifically what the other criteria is:
<tr>
<td class="labels">
Option:
</td>
<td colspan="3">
<%=Html.DropDownList("OptionId", Utilities.OptionLookup(), "-Select One-") %>
</td>
<td>
<input id="OtherOption" type="text" />
</td>
</tr>
In this case, Utilities.OptionLookup() gets the values from my Option table and populates the dd. At the moment, I just have a a plain textbox OtherOption.
I've used javascript before to do something like this but it's based on a click event. So, I set the text box to 'display:none', use onclick to name my script and do the visible true or false in my script.
I want to be able to do something similar but when 'Other' is selected in my drop down.
What's the best way to do this?
You can do it the same way, but instead of the onclick event, you utilize the onchange event.

Categories

Resources