Develop Reference

Can't change preset selections in radio checkbox

I have literally no experience. I'm a paramedic, and I have to fill out hundreds of patients forms using a redundant form with many superfluous fields.
I am trying to write a script to prefill some of the fields that stay the same for most patients, for example, "age units." Almost all of our patient's ages are in "years" but the software fields listed include "minutes, hours, days, weeks, months, years, cancel the selection, etc." The field is required for completion of a report, yet the default is set to "cancel selection", which will prevent completion of the report.
I have attached the code as it is. I literally had to google what (language?) this was even written in. First, I figured that I could inspect the default element, inspect the desired element, and just modify the values so that the desired element was checked. Then, I tried to use an autofill extension that allowed me to select a form field and modify the value. I tried to modify it as a checkbox/radio. I tried to use javascript. I yelled. I have been wildly unsuccessful. If someone could point me in the right direction, I'd be eternally grateful. I don't even know what I'm trying to modify. Is it a radio/checkbox? Is it a button? Is it text?
I have tried as much as my feeble brain is capable of.
This is what one of the offending elements of the form looks like.
<div class="radio_checkbox_div_container">
<table class="table_radio">
<tbody>
<tr>
<td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" checked=""> Cancel Selection </td>
<td colspan="2"> </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_0" value="2516001"> Days </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_1" value="2516003"> Hours </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_2" value="2516005"> Minutes </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_3" value="2516007"> Months </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_4" value="2516009"> Years </td>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_5" value="7701001"> Not Applicable </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_6" value="7701003"> Not Recorded </td>
</tr>
</tbody>
</table>
</div>
I want to modify some form fields (all similar to above) so that my most used selections are the default values.

He Hi Hello,
I create one jsfiddle for you, just copy paste html tags and replace ids in script to select radio buttons and other elements
this will give you basic idea
https://jsfiddle.net/1efx59vn/
<div class="radio_checkbox_div_container"><table class="table_radio"><tbody><tr><td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" > Cancel Selection </td><td colspan="2"> </td></tr>
<script>
$('#ePatient_16_cancel').attr('checked', 'true')
</script>
As i can see, you are new, have no knowledge about javascript, so this will be tough for you to understand. But try to understand just few things like in this script tag $('#ePatient_16_cancel').attr('checked', 'true') _ePatient_16_cancel_ is an id of radio button, id means your unique account number, that no one will have, find ids for other elemets too and put inside $('#') replace with element ID.
So the script will look like this
$('#ePatient_16_cancel').attr('checked', 'true')
open form in chrome browser and press F12 key, navigate to console tab and paste the script in console then press enter, this will select radio button for you

How to structure/control the data that was submitted by a Form?

Let's assume I have a Form like this:
<form>
<table>
<thead>
<th>
Submit?
</th>
<th>
Data
</th>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="c1">
</td>
<td>
<input name="t1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="c2">
</td>
<td>
<input name="t2">
</td>
</tr>
</tbody>
</table>
</form>
If I submit that form. An Array will be submitted that contains the checkboxes (if checked) and the regular input.
Now I want it to either:
Submit each row as a row in the array
Only submit the content of the row if the checkbox is checked.
Is there a way to accomplish that?
Edit:
Right now I am submitting the Data like this:
$.post(url, { attributes: $(form).serializeArray() })
I'd love to do it with HTML-Markup, if possible. As this would be the right way in my opinion.
I actually don't want to do some JS/PHP Array juggling. Unless there is a nice way to do it. Right now I can only think of some quite ugly foreach stacking.

Alright here is how I solved it:
Leave the form as it is.
Just do some JS Magic. Instead submitting the Form I do the following:
var submitData = {};
$("input:checked.attributCheckbox").each(function() {
var id = $(this).attr('name');
// This is how I get the input for the checkbox.
var val = $("input[type=number][name="+ id +"]").val();
submitData[id] = val;
});
$.post(url, {attributes : submitData});
Well it's not the perfect solution I hoped for. But it works quite nice. Maybe somebody can come up with a better way to solve it?

Modifying html attributes with jQuery producing unexpected results

I am experiencing some unusual results with my jQuery and was hoping that somebody could enlighten me as to why. I am sure that jQuery is powerful enough to do this, so I wonder what I am doing wrong. Here is what I have (some seemingly simple and easy to understand code):
///////////reset default search entries/////////////
$("#sOrderByDLM").attr('checked', 'checked');
$("#sOrderByID").attr('checked', '');
$("#sOrderByPOIName").attr('checked', '');
$("#sOrderByAge").attr('checked', '');
$("#sOrderByOfficer").attr('checked', '');
$("#sOrderByDesc").attr('checked', 'checked');
$("#sOrderByAsc").attr('checked', '');
I have this inside a simple javaScript function that is called on the click of a non-submit type (normal) button. The problem is that when I click this, instead of it filling the sOrderByDLM radio button, it actually fills the sOrderByOfficer button and likewise with the bottom two jQuery statements (e.g., sOrderByAsc becomes 'checked' instead of sOrderByDesc) Am I not blatantly telling jQuery to reset the 'checked' attribute to that of the second argument, which is blank, except in the cases where I specifically set it to 'checked' for the fields I intend to be default?
I experienced a similar problem with checkboxes, but I found a work around by simply calling the same statements in reverse order, but that doesn't seem to work here, though. If I set 'checked="checked"' in razor everything is fine, but I need this button to work on the client side.
Anyway, if the HTML is necessary, I will provide it, but I doubt it is needed since the I have triple checked the ids to be sure.
Thanks for any help!
(And God Bless Stack Overflow, I don't know what I would do without you! :D)
UPDATE:
<tr>
<td class="orderlineupColor"><label for="sOrderByDLM">Date Last Modified</label><br/><input type="radio" id="sOrderByDLM" name="sOrderBy" style="margin-left: 115px;" value="OrderByDLM" #OrderByFiller[0] /></td>
<td class="orderlineupColor"><label for="sOrderByID">Entry ID</label><br/><input type="radio" id="sOrderByID" name="sOrderBy" style="margin-left: 115px;" value="OrderByID" #OrderByFiller[1] /></td>
<td class="orderlineupColor"><label for="sOrderByPOIName">POI Name</label><br/><input type="radio" id="sOrderByPOIName" name="sOrderBy" style="margin-left: 115px;" value="OrderByPOIName" #OrderByFiller[2] /></td>
<td class="orderlineupColor"><label for="sOrderByAge">Age</label><br/><input type="radio" id="sOrderByAge" name="sOrderBy" style="margin-left: 115px;" value="OrderByAge" #OrderByFiller[3] /></td>
<td class="orderlineupColor"><label for="sOrderByOfficer">Officer</label><br/><input type="radio" id="sOrderByOfficer" name="sOrderBy" style="margin-left: 115px;" value="OrderByOfficer" #OrderByFiller[4] /></td>
</tr>
<tr>
<td class="orderlineupColor2">In Descending Or<br/>Ascending Order:</td>
<td class="orderlineupColor2"><label for="sOrderByDesc">Descending Order</label><br/><input type="radio" id="sOrderByDesc" name="sAscOrDesc" style="margin-left: 115px;" value="OrderByDesc" #OrderByAscOrDescFiller[0] /></td>
<td class="orderlineupColor2"><label for="sOrderByAsc">Ascending Order</label><br/><input type="radio" id="sOrderByAsc" name="sAscOrDesc" style="margin-left: 115px;" value="OrderByAsc" #OrderByAscOrDescFiller[1] /></td>
<td class="orderlineupColor2"><button type="button" class="smallbtn" onclick="clearSortEntries()">Reset Sort Entries</button></td>
<td class="orderlineupColor2"></td>
</tr>

Try using bools and .prop()
$("#sOrderByDLM").prop('checked', true); // To check
$("#sOrderByID").prop('checked', false); // To Uncheck

To uncheck, try:
$("#sOrderByAsc").removeAttr('checked', '');
checked and selected are binary properties, not true/false attributes.
$("#sOrderByDLM").attr('checked', 'checked'); is correct.
So is: .attr('selected', 'selected');

If you want to used 'checked' and '' then use removeAttr jquery function instead of assigning '' blank to checked attribute but I do not prefer this one. As assigning true and false looks more symmetrical to me then assigning checked and removing attribute.
$("#sOrderByDLM").attr('checked', 'checked');
$("#sOrderByID").removeAttr('checked');
Use true or false instead of 'checked' and ''
$("#sOrderByDLM").attr('checked', true);
$("#sOrderByID").attr('checked', false);

there is a difference between .attr() and .prop()
http://api.jquery.com/prop/
http://api.jquery.com/attr/

Radio button value

I have a dynamically generated radio button as fiven below
echo '<tr>
<td colspan="2">Login System</td>
<td colpan="2">
<input type="radio" name="login_system'.$i.'" value="COMMON" checked="checked" />Common &nbsp
<input type="radio" name="login_system'.$i.'" value="INDIVIDUAL">Individual
</td>
</tr>';
and i need to take its value using javascript. Below is the code i have written for that
d['login_system']=$('input[name="login_system'+index+'"]').val();
But always I am getting value of first radio button even if I have selected second.
Can anyone help me?

$('input[name="login_system'+index+'"]:checked').val()

How to allow user to enter elements in an HTML table

I want to allow a user to enter a list of persons in a web application, and then submit them as one batch. Each row looks roughly like this:
<TR>
<TD> <INPUT name="person.fname"> </TD>
<TD> <INPUT name="person.lname"> </TD>
<TD> <INPUT name="person.birthdate"> </TD>
</TR>
The form starts out with a single row of blank inputs, and I want a fresh row added to the list whenever the user fills in any of the fields -- i.e. the list grows on demand. Likewise, I want a row to disappear whenever the user clears all fields in it.
What is the easiest, most robust and most maintainable way to implement this?
Finally, how do I submit this table of values back to the server? What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?

If you are familiar with jQuery, you can use the .change handler to catch them changing the field. Test to see if it's the last row and if there is data in it. If they have taken everything out of the row, remove it. jQuery has some great ways to do this, but it's all dependent on how you want to write it. If so, append the new row using jQuery's .append function. If you're using Python and cgi_app and you use the same name attribute for each type of cell, you can use form.getlist('fname[]') and it will return an array of the names.

What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?
You can do:
<TR>
<TD> <INPUT name="person[fname]"> </TD>
<TD> <INPUT name="person[lname]"> </TD>
<TD> <INPUT name="person[birthdate]"> </TD>
</TR>
Which generates array 'person'

JQuery is a good suggestion, but if you don't want to use it, you can try generating input name by appending an index. For example:
<TR>
<TD> <INPUT name="person_0.fname"> </TD>
<TD> <INPUT name="person_0.lname"> </TD>
<TD> <INPUT name="person_0.birthdate"> </TD>
</TR>
...
<TR>
<TD> <INPUT name="person_N.fname"> </TD>
<TD> <INPUT name="person_N.lname"> </TD>
<TD> <INPUT name="person_N.birthdate"> </TD>
</TR>
where "N" is the row index. This way may help you to easily get the entire whole row values by using (i.e.) $GET['person'.$i.'fname'], $GET['person'.$i.'lname']... and so on.

CSS:
input:not(:first-of-type){
display:none}
jQuery:
$('input').click(function(){
$(this).val('');
}).blur(function(){
if($(this).val().length>1){
$(this)
.toggleClass('processed')
.hide('slow')
.parents('#person').find('input:not(.processed):first').show('slow');
}
});
$('#person').prepend('Click on blank space to proceed<br/>');
HTML:
<tr>
<form id=person method=post action='/your_page_on_server'>
<td><input name="fname" value='Enter the first name'/></td>
<td><input name="lname" value='Enter the last name'/></td>
<td><input name="birthdate" value='Enter the birth date'/></td>
<td><input type=submit value='Submit'/></td>
</form>
</tr>
I'm not familiar with server-side scripting, so my answer in only partial. Here's an example.
Also, I recommend to add input validation by JS.