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

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.

Related

Best way to build a checkbox or radio button to be able to be referenced in a Java Script function?

Im pretty new to html and I am building a webpage in html for work. It is basically a list of standards that a reviewer goes over and determines if a plan given to him/her meets those standards. I need to have either a checkbox(s) or radio button for "Accepted" and "Incomplete", but I need to be able to reference them later on with Java Script to run a report for the reviewer. Whats the best way to do this and should I use check boxes or radio buttons? I have my code attached, I am basically creating a bunch of rows in the table
<table style="width:100%">
<tr>
<td> <!--standard number--></td>
<td><!--standard name--></td>
<td> <input type="checkbox"> </td> <!--accepted checkbox-->
<td> <input type="checkbox"> </td> <!--incomplete checkbox-->
<td> <input type="text"> </td> <!--comments field-->
</tr>
</table>
Welcome and Thanks for asking the question.
So the difference between checkbox and radio button is with checkbox you can select as many as you want (e.g. Red/Green/Yellow/Blue) and with radio button you have a group where you select only one (e.g. Yes/No)
I created a fiddle with your example to show you how to access those elements: https://jsfiddle.net/vrjzfyun/
var accepted = document.querySelector("#cbAccepted");
accepted.checked = true;
Let us know if you have more questions.

Checkbox binding unwanted values

I have a check box:
<td class="text-center">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(contract.fields[5].htmlName)" data-strat-model="contract" data-field="contract.fields[5]"></div>
</td>
When clicked it is changing some field values. The 2nd and 3rd column change to N, 12.
I tried adding bind-once to the div and there was no effect. Then I tried ng-non-bindable and the checkbox dissapears.
How can I get this checkbox not to have an effect?

I have multiple select with sequential ids, how can I reference one of them in jquery?

I have a form where the user presses a button and dynamically generates a row of a table, which has 3 columns.
Each generated row is added to the table and has the following form:
<tr id="1" class="">
<td>
<select id="cmb_articulo_1" name="articulo[]">
</td>
<td>
<input type="text" id="txtcantidad_1" name="txtcantidad[]">
</td>
<td>
<input type="text" id="txtprecio_1" name="txtprecio[]">
</td>
<td>
<select id="cmb_descuento_1" name="descuento[]">
</td>
</tr>
Each element of the generated row is added a sequential corresponding to the generated row (id="cmb_articulo_1", id="cmb_articulo_2", id="cmb_articulo_3",..)
The user may have generated n-rows and the problem is that I have not been able to determine how to identify in which select from which row an option was chosen and how to process that option.
How to process the chosen option, has to do with when, for example, I have a select with id = "combo", I can process the chosen option with $("#combo").change(function{ . . . }), But in the situation I raise, there may be 1, 2, 5, 10, 20, etc. rows created dynamically, so I can not process the chosen option as in the previous case. I understand that there must be a way to process the chosen option in a select of any row, making a dynamic reference of that element.
Please, can you help me with these two consultations ?, from now, thank you very much.
Add a class to all <select> elements in the table:
<select class="cmb_articulo" id="cmb_articulo_1" name="articulo[]">
Then use event delegation to be able to bind dynamically inserted elements:
$(document).on('change', '.cmb_articulo', function () {
var $select = $(this);
var $row = $select.closest('tr');
var id = $row.attr('id');
// You have the ID now, do whatever you need to.
});

Perform an action when radio button choice is toggled

I am trying to make a form with radio button in bootstrap, such that whenever a radio button is toggled, a different form with new fields should appear subsequently:
<tr>
<td><label for="exampleInputEmail3" class="input-group">1 or 2 ? </label></td>
<td>
<select id="whatever" name="whatever" class="input-group">
<input type="radio" name="radioName" value="1" />one<br />
<input type="radio" name="radioName" value="2" />two<br />>
</select>
</td>
</tr>
If user selects option 1, form 1 needs to be displayed just below it otherwise form 2 needs to be shown.
The form 1 looks like:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">1</label></td>
</tr>
The form 2 looks exactly the same with different label:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">2</label></td>
</tr>
You can use Jquery to do this easily.
First you can use the .val() function to get the value of the radio button you checked.
Then you can use the hide/show functions to show the right form and hide the other.
I hope this helps you out.
First, you'll need different ID's for your table rows. Two elements cannot share the same ID. You can listen for changes with the change function and then toggle the visibility of both rows at the same time by using the comma to grab multiple selectors and then show/hide each respectively with toggle
$('input[name="radioName"]').change(function () {
$("#whatever_description1, #whatever_description2").toggle();
});
Here's a demo in fiddle
If you want more control, see get value from radio group using jquery

Tab through a table inside content editable div?

I am trying to figure out how to tab through HTML tables cells inside a contenteditable div. I know most people would say why are you doing that in the first place. I am working on a text editor that allows the user to insert a pre-formatted table where ever they want. I have tackled inserting the table dynamically at the users cursor but I cannot figure out how to let the user tab from the content to the html table and through each cell. I have tried input boxes which allows them to tab through but it leaves selector bars on each corner and still requires the user to double click on the cell to add content. I have also tried just table cells and it will not tab to the cells it just jumps over them. Any help would be much appreciated... after conquering the tracking of the cursor for inserting the table I thought I was home free... :(
<div id="divbilltext" runat="server" contenteditable="true" style="height:auto;">
<table>
<tr>
<td>
<input type="text" id="a" tabindex="1"/>
</td>
<td>
<input type="text" id="b" tabindex="2"/>
</td>
<td>
<input type="text" id="c" tabindex="3"/>
</td>
</tr>
</table>
</div>
tabindex would be the most consistent way of achieving this:
http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex
however tabindex is supported by specific elements only: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

Categories

Resources