Develop Reference

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.

How to position dynamic content so that other content doesn't move

I have tried to set the message after user clicked on the save button. Message should be 'Record has been saved successfully!' Next to the Save button or aligned to the right side of the table. Here is my HTML:
<tr>
<td align="center">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
<span id="msgSave"></span>
</td>
</tr>
Javascript:
document.getElementById("msgSave").innerHTML = "Record has been saved successfully!";
Current message will show but Save button will slide to the left. I don't want my button to move once message shows up. Is there any way to fix that? Should I set the standard width or something else is wrong in my HTML.

If you align your tr to the left, there will be no slide
<tr>
<td align="left">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
<span id="msgSave"></span>
</td>
</tr>
I don't know if your layout allows you to align left, but it's an solution

The problem is that your table cell will adjust when the content inside it changes! That's the nature of table cells using centered content.
Instead you could do something like:
<tr>
<td width="30%" align="center">
<button type="button" name="save" id="save" onclick="pgSave();">Save</button>
</td>
<td width="30%"><span id="msgSave"></span></td>
</tr>
Note that I added widths to the cells - this should keep them the same layout whatever content is in them (more or less).
A better approach would be DIV's though as they don't resize/move like table cells will.

Or inside the same td element put the span enclosed by a p element like this :
<p><span id='msgSave'></span></p>
Since there is a default break for p elements.

How do i use jquery to edit tables in the django manager?

I have a table output in Django from my DB into HTML.
I want to make it so the width for my fields ajusts to the text size, i found some js here:
Adjust width of input field to its input
...but when i paste the code to my .js files it doesnt change the fields at all on the page. this is my css code currently
table#infos td input {
width:4em;
}
table#infos td textarea {
width:6em;
height:2em;
}
and this is an eg of some of the html that isnt being changed properly
<tbody>
<tr>
<td>
<div class="resizing-input">
<span class="sort_value" style="display:none;">1</span>
<input id="id_form-0-id" min="0" name="form-0-id" type="number" value="1" />
</div>
</td>
<--etc--!>
the inputs id's are auto generated from the db column names etc
the jquery i tried to use was from this
http://jsfiddle.net/7pccrdbw/2/

Submitting a dynamically generated form

I'm creating a website, and I have a form that gets created by Django. Once the page is loaded, the user can add text inputs to the form by clicking a button. The problem is that when the submit button is clicked, only the text inputs that were originally created by Django get submitted. In other words, the extra text inputs that were added dynamically don't get submitted.
I'm guessing that this is due to the fact that the submit button is only "aware" of form elements that were present when the page was loaded, and not dynamically loaded elements. With that in mind, I'm guessing I need to use some kind of Javascript in order to submit all of the form elements, including the dynamically added ones, but I can't figure out how to do it.
I've tried the jQuery submit function, but I don't really know what I'm supposed to do with it. Any tips would be appreciated!
EDIT: Here's a code snippet, which shows what the HTML looks like after 2 more text inputs have been added dynamically to the "origin"
<table>
<form class="dataInput" action="/foner/116" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='YYuqTzXUVosu1s2HD3zS00DpoPwQ7N0k' />
<tbody class="origin">
<tr>
<th>
<label>Origin:</label>
</th>
<td>
<input id="id_Origin-0" maxlength="200" name="Origin-0" type="text" value="A native of Georgia" /> // PRESENT AT PAGE LOAD
</td>
<td>
<button class="adder origin">+</button> // USER CLICKS THIS TO APPEND MORE TEXT INPUTS TO THE FORM
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
<tr>
<th>
</th>
<td>
<input type="text" value="" maxlength="200" name="origin[]"></input> // DYNAMICALLY ADDED
</td>
</tr>
</tbody>
<tr>
<th>
<label>Notes:</label>
</th>
<td>
<input class="submitButton" type="submit" value="S" />
</td>
</tr>
</form>
</table>

Ok, I was able to solve the problem. I had a table that was arranging all of the text inputs for the form, and the table also enclosed the form itself. It turns out that by inverting this, and enclosing the table inside of the form, all of the dynamically generated inputs get POSTed successfully. Thanks again to those who gave input in the comments above -- it's always helpful to get other opinions & perspectives.
So my question is (I know you're not supposed to ask questions in answers, but in case anyone feels like responding...): How was I supposed to know this? If you're using a compiled language, this is something that a compiler would probably catch for you. Is it just the kind of thing that you get the hang of with experience? Are there any books that would help me to get a handle on elementary problems like this? I find web development to be very tedious and frustrating because I often get hung up for long periods of time on trivial errors like this, and I'm assuming it doesn't have to be this way; I just don't quite know how to improve.

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.