filling in an <input type=’text’>

@decibelMar 26.2005

thought this would be easier, but i guess not. all i want to do is click on a link, and call a function that fills in <input type=’text’> in a form. I seached, couldn’t find what i needed. Heres what i have so far:

to post a comment

JavaScript

36 Comments(s) _↴

@decibelauthorMar 26.2005 — #This didn't work:

document.patientedit.idnumber.textInput="test"

@FangMar 26.2005 — #The code works, do the variables contain data?

Please change the following

Replace [I]<script name="javascript">[/I] with [I]<script type="text/javascript">[/I] http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.1

and [I]cursor: hand[/I] with [I]cursor:pointer[/I] http://www.w3.org/TR/REC-CSS2/ui.html

Validate [URL=http://validator.w3.org/]html[/URL] and [URL=http://jigsaw.w3.org/css-validator/]css[/URL]

@decibelauthorMar 26.2005 — #<script type="text/javascript">

function preview(policyid){

document.patientedit.idnumber.value="test"

alert(policyid);

}

<input type='text' name='idnumber' value='".$idnumber."'>

<td><a style='cursor:pointer' onclick="preview('".$policy_id."')">fill in</a></td>

Thats what i have now, and it still doesn't work.

@FangMar 26.2005 — #What is the generated html?

@decibelauthorMar 26.2005 — #im not sure what you mean. I can post any code you want, but im not sure about "generated html". Do you mean without the PHP?

@CharlesMar 26.2005 — #It would be helpful if you would post a URL. You seem to have some strange things going on with your quatation marks.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 function preview (policyid) {
 document.patientedit.idnumber.value = policyid
 }
 // --&gt;
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 &lt;!-- 
 fieldset {padding:1em; width:10em}
 label {display:block} 
 --&gt;
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form name="patientedit" action="patupdate.php" method="post"&gt;
 &lt;fieldset&gt;
 &lt;label&gt;ID Number &lt;input type="text" name="idnumber"  value=".$idnumber."&gt;&lt;/label&gt;
 &lt;a style="cursor:hand" onclick="preview('.$policy_id.')"&gt;fill in text box&lt;/a&gt;
 &lt;/fieldset&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@decibelauthorMar 26.2005 — #guys, i would love to share the url with you, however right now the application is working for a doctors office. HIPPA laws prevent me from sharing it. What i need to do is make developement site to test on... i'll have to get around to that.

Sorry bout that. and i really appreciate the help.

Let me get back to reading your advice...

@decibelauthorMar 26.2005 — #well i have myself to blame. I have the code in the <body>, only works in the <head>. the thing that threw me off was that the alert works in the body...

sorry to waste our time!

@decibelauthorMar 26.2005 — #well while were on the subject, how do i check a checkbox when they all have the same name?

exaple:

$claimtype = "<input type='checkbox' name='ctype' value ='medicare' checked=''><i>(Medicare #)</i>

    

<input type='checkbox' name='ctype' value ='medicaid' checked=''><i>(Medicaid #)</i>

    

<input type='checkbox' name='ctype' value ='Champus' checked=''><i>(Sponsors SSN)</i>

    

<input type='checkbox' name='ctype' value ='champva' checked=''><i>(VA File #)</i>

    

<input type='checkbox' name='ctype' value ='group' checked=''><i>(SSN or ID)</i>

    

<input type='checkbox' name='ctype' value ='feca' checked=''><i>(SSN)</i>

    

<input type='checkbox' name='ctype' value ='other' checked=''> <i>(ID)</i>";

@CharlesMar 26.2005 — #well i have myself to blame. I have the code in the <body>, only works in the <head>. the thing that threw me off was that the alert works in the body...

sorry to waste our time![/QUOTE]Then you are doing something terribly wrong. A script works anywhere. Is it possiible that you have droped a tag?

I can see from your posts that your HTML is a little ... untidy. Start with valid HTML.

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">[/font]

Put that at the very start of your page and then run the thing through [url=http://validator.w3.org/]The Validator[/url], ridding yourself of any and all errors that are flagged.

And please note, that if you are in the USA and if some employee will be using this and if the employeer has fifteen or more employees then the Americans with Disabilities Act, Title I applies. Read, mark, learn and inwardly digest the [url=http://www.w3.org/TR/WCAG10/]Web Content Accessibility Guidelines 1.0[/url].

@CharlesMar 26.2005 — #well while were on the subject, how do i check a checkbox when they all have the same name? [/QUOTE]They shouldn't have the same name. You can, however, address all a form's elements as elements of an array just like each form is an element of an array: [font=monospace]document.forms[0].elements[3].checked[/font]

I'd give you a more concrete example but I need something with which to work. Once you have your page passing the validator, and using the LABEL element but not using the TABLE element for just layout, then post a copy of the form.

@decibelauthorMar 26.2005 — #droped a tag? not sure what you mean.

notice my form has 7 checkboxes all with: name='ctype'

is that a problem?

i have this at the top of my page:

<?xml version='1.0' encoding='iso-8859-1' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

any example you can provide will be fine, i can change the "escapes" if i have to, thanks in advance.

@CharlesMar 26.2005 — #droped a tag? not sure what you mean.

notice my form has 7 checkboxes all with: name='ctype'

is that a problem?

i have this at the top of my page:

<?xml version='1.0' encoding='iso-8859-1' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

any example you can provide will be fine, i can change the "escapes" if i have to, thanks in advance.[/QUOTE]
If that is at the top of your page then you are using XHTML and not HTML and there are some problems associated with that. Stick with HTML unless you have read the [url=http://www.w3.org/TR/xhtml1/]XHTML 1.0 Specification[/url] [i]and[/i] the [url=http://www.w3.org/TR/html401/]HTML 4.01 Specification[/url]. And don't use HTML unless you have read the [url=http://www.w3.org/TR/html401/]HTML 4.01 Specification[/url].

By "dropped tag" I mean that I suspect that you have omitted a required closing tag somewhere. But don't worry about it. [url=http://validator.w3.org/]The Validator[/url] will catch it for you.

And yes, giving all of your check boxes the same name might just cause a problem. You've already discovered one problem.

@decibelauthorMar 26.2005 — #thanks for the help charles. ok, ill will do the reading and try to validate my stuff better. But for now, anybody have a solution? should i change the name of each checkbox?

if i do change the name of each checkbox, how do i set it as check dynamically?

document.patientedit.checboxname. < not sure what goes here...

@JPnycMar 26.2005 — #Names should be unique, like IDs. You can reference all of them via the elements array.

@js_prof_consMar 26.2005 — #Names should be unique, like IDs. You can reference all of them via the elements array.[/QUOTE]Not necessarily. Actually, for radio buttons, names are the same so they work as a group. That is the purpose for DOM's document.getElementsByName, which returns a HTMLCollection. However, for unique elements, your point is well taken.

@CharlesMar 26.2005 — #thanks for the help charles. ok, ill will do the reading and try to validate my stuff better. But for now, anybody have a solution? should i change the name of each checkbox?

if i do change the name of each checkbox, how do i set it as check dynamically?

document.patientedit.checboxname. < not sure what goes here...[/QUOTE]Perhaps if you more clearly and more fully explaind just what it is that you are up to we could be of more help.

Each checkbox has a read/write booloean property, checked.

if (document.patientedit.checboxname.checked) {alert ('Yes, it's checked') else {alert ('No, it's not')}
 
 document.patientedit.checboxname.checked = true

@Willy_DuittMar 26.2005 — #FWIW: Checkboxes can and often are grouped...

However, if you are going to group the checkboxes and wish to target a particular checkbox within the group you will need to either reference it thru its place in the group collection or its value...

<i>
 </i>  function check(input,value){
 for(var i=0; i&lt;input.length; i++){ 
 if(input[i].value.match(value)){
 input[i].checked = true;
 }
 }
 }
 
 // EXAMPLE USAGE:
 onclick="check(this.form.ctype,'feca')"

However, looking at the little bit of code the O/P has provided, I would assume that checkboxes, grouped or otherwise are not what is required in this instance... I would suggest using radio buttons instead since I can not envision a user being qualified for medicais and champus at the same time... I would assume it is either one or the other... A radio group will only allow the choice of one where checkboxes, grouped or not will allow multiple choices...

Just my two cents...

Carry on;

.....Willy

@decibelauthorMar 26.2005 — #first thing i'll do: use html DOCTYPE instead of xhtml

What im up to: this html form looks exactly like a CMS1500 claim form used for billing insurance companies.

Well you can have a Medicare and Medicaid patient at the same time. That is called Medi/Medi . there are many of them. You can also have an HMO (group) and Medicaid patient. So they have to be checkboxes, not radio's, (but i'll have some radio's in other places).

However guys, after reading all your advice, i dont think it will be a problem to give each checkbox a different name.

document.patientedit.uniquecheckboxname.checked = true // <- that should work, thanks charles.

// this is a great example:

function check(input,value){

for(var i=0; i<input.length; i++){

if(input[i].value.match(value)){

input[i].checked = true;

}

}

}

// EXAMPLE USAGE:

onclick="check(this.form.ctype,'feca')"

i have to study it a little more though before im comfortable with it.

thanks for the replies.

@decibelauthorMar 27.2005 — #hey guys, one more question:

how bout a selection box?

document.patientedit.selectname. < not sure what goes here

thanks for all the help.

@CharlesMar 27.2005 — #document.patientedit.selectname.options[document.patientedit.selectname.selectedIndex].value

@FangMar 27.2005 — #or [I]text[/I] instead of [I]value[/I]

@CharlesMar 27.2005 — #And there is an easier way to address a FORM:

&lt;script type="text/javascript"&gt;
 &lt;!--
 function checkOut (theForm) {
 if (theForm.selectname.options[theForm.selectname.selectedIndex].value == '')  return false [i]// to stop the form from submitting [/i]}
 // --&gt;
 
 &lt;form action="some-script.pl" onsubmit="return checkOut (this)"&gt;

@decibelauthorMar 27.2005 — #ok this is what i have:

// the onclick stuff

month = '12'

document.patientedit.subbdaym.options[document.patientedit.subbdaym.selectedIndex].month

// the html

echo "

<form method='post' action='url'>

<select name='month'>

<option value=''> ";

for ($i = '1'; $i <= '12'; $i++) {

echo "<option value='".$i."'>".$i;

}

echo "</select>

</form>";

Im not exactly sure what im missing. thanks again charles

@FangMar 27.2005 — #Assuming it's the first form in the document:

document.forms[0].month.options[document.forms[0].month.selectedIndex].value

@decibelauthorMar 27.2005 — #im sorry fang, thats what i meant to put. here is it corrected (the subbdaym should have been month)

// the onclick stuff

mon = '12'

document.patientedit.month.options[document.patientedit.month.selectedIndex].mon

// the html

echo "

<form method='post' action='url'>

<select name='month'>

<option value=''> ";

for ($i = '1'; $i <= '12'; $i++) {

echo "<option value='".$i."'>".$i;

}

echo "</select>

</form>";

that code doesn't work, so im not sure whats missing still.

@FangMar 27.2005 — #That does not reference the form in the html. That form has no [i]name[/i]

what are you trying to do with [i]mon[/i]?

@decibelauthorMar 27.2005 — #on the real page, the form is named, sorry bout the confusion. here it is fixed (again)

// the onclick stuff

mon = '12'

document.patientedit.month.options[document.patientedit.month.selectedIndex].mon

// the html

echo "

<form name='patientedit' method='post' action='patientupdate.php'>

<select name='month'>

<option value=''> ";

for ($i = '1'; $i <= '12'; $i++) {

echo "<option value='".$i."'>".$i;

}

echo "</select>

</form>";

mon - is a variable set up in my example so we can have a month to insert when we call the function. its real value comes from a database call that is correctly working for text boxes and checkboxes, but not the select element yet..

@decibelauthorMar 27.2005 — #my goal is go get mon to be shown in the select box, and have mon be set to the selected value as well.

@FangMar 27.2005 — #Where are you inserting [i]mon[/i]? As a value, text, selectedIndex or something else?

@CharlesMar 27.2005 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 onload = function () {
 document.getElementById ('month').selectedIndex = new Date().getMonth()
 }
 // --&gt;
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;
 &lt;select id="month"&gt;
 &lt;option&gt;January&lt;/option&gt;
 &lt;option&gt;February&lt;/option&gt;
 &lt;option&gt;March&lt;/option&gt;
 &lt;option&gt;April&lt;/option&gt;
 &lt;option&gt;May&lt;/option&gt;
 &lt;option&gt;June&lt;/option&gt;
 &lt;option&gt;July&lt;/option&gt;
 &lt;option&gt;August&lt;/option&gt;
 &lt;option&gt;September&lt;/option&gt;
 &lt;option&gt;October&lt;/option&gt;
 &lt;option&gt;November&lt;/option&gt;
 &lt;option&gt;December&lt;/option&gt;
 &lt;/select&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@decibelauthorMar 27.2005 — #hmm maybe i dont understand the selectedindex that well.

what i want is for the page to load with a select box called 'month'. I would like 12 options in the select box, one for each month. There is also a link on the page that when clicked, calls a function preview() this function passes variables from a database call in php into the javascript so the data can be dynamically fill the form out. text boxes and radio/checkboxes are working fine, but the select box called "month" does not get dynamically filled with the month i pass it. i set varialbe mon in the example just to have something to work with.

so when we click on the link that calls the function, select box mon would look in theory like this:

<option value='mon'>mon

perhaps i need to do as charles is showing, to use the <option></option> method instead of <option value='mon'>mon ?

charles gets mon by using javascripts date function. i will get it from passed varialbes into the called function. it can only be 1 - 12

@FangMar 27.2005 — #Using [B]Charles[/B] example replace [i]new Date().getMonth()[/i] with 2

The select index begins at zero, so you would need to subtract 1 from the database value.

@decibelauthorMar 27.2005 — #got it to work, thanks for the help, heres what i had to change:

mon = '12'

document.patientedit.month.selectedIndex = mon

echo "

<select name='month'>

<option></option>";

for ($i = '01'; $i <= '12'; $i++) {

echo "<option>".$i."</option>";

}

echo "</select>";

@decibelauthorMar 27.2005 — #i cant emphisize enough how gratefull i am for the help charles and fang.

@FangMar 27.2005 — #Remember the index begins at zero!

Also in #JavaScript _↴

web design using javascript how to count down then up in javascript?BgColor of a textbox

Success!

Help @decibel spread the word by sharing this article on Twitter...

Tweet This

filling in an <input type=’text’>

36 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

filling in an <input type=’text’>

36 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

36 Comments(s) _↴

Also in #JavaScript _↴