Can't change preset selections in radio checkbox - javascript

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

Related

Restrict user to select only one radio button from two groups with same value

I am working on a web app where I am creating a virtual team. User can pick players and then select a "Captain" and a "Vice-Captain" of the team. To accomplish this I have created two radio button groups so that user can pick only one player as "Captain" and only one player as "Vice-Captain" of the team.
My problem is that how can I restrict user from picking same player as Captain and Vice-Captain as both radio groups have different names and user can select one from each even if it is the same player. Here is a sample code in Laravel Blade of what I am trying to explain. You can suggest a solution using javascript or jquery.
#foreach($players as $player)
<tr>
<td>
<input type="checkbox" name="player[]" value="{{ $player->id }}">
</td>
<td>
{{ $player->name }}
</td>
<td>
{{ $player->category }}
</td>
<td>
{{ $player->team }}
</td>
</tr>
<tr class="table-borderless">
<td colspan="2">
<input type="radio" name="captain" value="{{ $player->id }}"> Captain
</td>
<td colspan="2">
<input type="radio" name="vicecaptain" value="{{ $player->id }}"> Vice-Captain
</td>
</tr>
#endforeach
I want to restrict user from selecting both 'Captain' and 'Vice-Captain' radio buttons for the same player and want to show a helpful message to change one of the selection to a different player.
I solved my problem by following suggestions in the following question's answer
[Compare radio button values using jquery
Thanks for looking.
Use Javascript to see checked value for captain. Use event listener to listen for value change on the captain group. Based on the checked value, disable that id from vicecaptain list.
Checking or querying dom elements will be easier if you gave the fields a data attribute or a unique class name or id.
Have the same backend validation too.

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.

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 to change running site content with JavaScript?

Assume that, there are many checkboxes in any site and they are unchecked. Site works in any server. I have not site code. I want to make checked some of those checkboxes. To find checkboxes by value of <td> Can I do this with JavaScript? How can I run JavaScript code in that site code? My aim is to show checkboxes as "checked".
<tr>
<td id ="id1" name"name1">value1</td>
<td><input id="checkid1" name="checkname1" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id2" name"name2">value2</td>
<td><input id="checkid2" name="checkname2" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id3" name"name3">value3</td>
<td><input id="checkid3" name="checkname3" type="checkbox" value="false"></td>
</tr>
If it is possible, I want to enter, value1, value2 and JavaScript will make checked related checkboxes.
You can achieve this with JQuery.
Check if a checkbox is checked and than set checked true for the desired other checkboxes.
http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html
To search by value you can do something like this:
$("input:checkbox[value=val]").attr("checked", true);

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.

Categories

Resources