|
JavaScript - Accessing The Array Index Of An Input Field
Hi,
I'm struggling with all this DOM stuff so I hope someone can help. I have a form with multiple input fields and I'm trying to identify the specific input field that is in focus so that I can display a relevant status bar message. I have a message array with various entries in it and I'm calling a showStatus() function with an onfocus function from the form itself e.g. The code in the input form = Code: <input type="text" name="first" size="31" maxlength="20" class="entry" onfocus="showStatus()"/> The showStatus() function so far is = Code: function showStatus()
{
var message = ['Please provide your First Name.',
plus loads of other properley formatted status messages......]
var x=document.getElementById().focus();
window.status = message[x];
}
I'd like to access the array variable of the item that is in focus not only for the message but also for an onblur function to validate input. Any ideas? My thanks R Similar TutorialsHello, I have a simple form with simple validation. I am just playing around a bit with forms and don't really have concrete knowledge. What I have done is created a form. Asking for first name, last name, age and email. When the user clicks the submit button I want 2 functions to run, the first checking the input is correct and also making sure all fields have a value. Once everything is checked and is O.K I want to go into another function which sends all this information to an array one by one. I am having difficulty accessing each individual input tag. I could achieve what I want to do, but it will take double the lines of code because each input has a different 'name'. So, what I am trying to do is access the input tags the same as you would do an array. Here is my code: HTML: Code: <form name="regForm" id="form"> <fieldset> <legend>Real Heroes - Registration Form</legend> <p>First Name:<input type="text" size="30" maxlength="20" name="txtFirstName" /></p> <p>Last Name:<input type="text" size="30" maxlength="20" name="txtLastName" /></p> <p>Age:<input type="text" size="30" maxlength="3" name="txtAge" /></p> <p>Email Address:<input type="text" size="30" maxlength="50" name="email" /></p> <p><input type="button" value="Submit Registration" name="butChkForm" onclick="callFuncs_onclick()" /> <input type="reset" value="Reset" name="resetForm" /></p> </fieldset> </form> JavaScript: Code: //CALLING THE FORM SCRIPTS//
function callFuncs_onclick()
{
chkForm_onclick();
creatingDatabase_onclick();
}
//**************FORM VALIDATION***************//
function chkForm_onclick()
{
var theForm = document.regForm;
if (theForm.txtFirstName.value == "" || theForm.txtLastName.value == "" || theForm.txtAge.value == ""
|| theForm.email.value == "")
{
alert("Please complete all of the form.");
if (theForm.txtFirstName.value == "")
{
theForm.txtFirstName.focus();
}
if (theForm.txtLastName.value == "")
{
theForm.txtLastName.focus();
}
if (theForm.txtAge.value == "")
{
theForm.txtAge.focus();
}
if (theForm.email.value == "")
{
theForm.email.focus();
}
}
else if (isNaN(theForm.txtAge.value))
{
alert("That is not valid input for this field. Please re-enter your age.");
theForm.txtAge.focus();
}
else
{
alert("Thank you for completing the form, " + theForm.txtFirstName.value);
}
}
function creatingDatabase_onclick()
{
var form = document.regForm;
var index = form.input[0].value;
alert(index);
}
I'm not quite sure where I am going wrong. Please note that these functions really labour the point, I know I have way too many lines of code but I am still very amateur with JS. Thank you for any help/information. Kind Regards, LC. I've been playing around with a madlibs exercise while trying to learn simple javascript. I have three input boxes and a button display an alert containing the input from the boxes. Am I right to be assigning variable names to the values from the text boxes and then referencing those variables in my alert? I'm sorry if this is a dumb question but I've been working on it for hours and can't get past this point. Inset a name: <input type="text" id="textbox1" size="10"/> </br> Insert a verb : <input type="text" id="textbox2" size="10"/> </br> Insert a place: <input type="text id="textbox3" size="10"/> <input type="button" value="CLICK WHEN FINISHED" onClick="name = document.getElementById('textbox1').value; verb = document.getElementById('textbox2').value; place = document.getElementById('textbox3').value; alert('Mad Lib :' + name + " " + verb + " " + place);" /> I created an array, whose entries looks like this: [41, "The bird flew into it's cage"] [33, "He drew fire from Joe"] [33, "Roger asked her her name"] [2, "I am awfully happy"] . I want to pull the sentence item out of some array entries. E.g., in the second entry, namely, arrayName[1], what I thought was the second item (the sentence), I could manage by invoking arrayName[1][1] . But to my dismay, this doesn't do the trick. arrayName[1][1] actually delivers up the second CHARACTER of the entry (the number "3"). I thought the comma between the number and the sentence would separate the items, although I "pushed" each entry into the array as one single entry. How do I "grab" the whole sentence? How do I push both items separately to achieve "one entry"? I've read through the past threads and did not find anything that quite matched my problem, which surprises me because I thought it would be fairly common. Anyway, I have a script where I define an array and populate the array. In the same script is a function that tries to scan the table looking for a match with the value in a global primitive. In the HTML, a button click invokes the function. But while the function can correctly access the global primitive, it simply stops running when it encounters the reference to the global array. Here's a shortened, simplified snippet of the code: [code] <script type="text/javascript"> var len = 2; var course_code = new Array(); course_code[0] = "A010"; course_code[1] = "A500"; function runcodes() { alert('In runcodes'); alert('len = '+len); alert('course_code.length = '+course_code.length); for (i = 0 ; i < course_code.length ; i++) {alert(course_code '+i+' = '+course_code[i]);} } </script> <body> <button type="button" name="runc" id="runc" onclick="runcodes()"; > Click to display course codes table. </button> </body> [ICODE] When I bring this up in a browser and click the button, I get the following alerts: In runcodes len = 2 and then the script simply stops. So it stops on the first reference to the array. Clearly I am getting to function, and the function is able to handle the global primitive 'len', but it stops on encountering the global array. I've tried a lot of variations on the the theme, but nothing gets past this restriction. How do I access elements in a global array from inside a function? Hi, i have an input value array for customer ids, i also need to make a copy of that array into another input element on submit to use for another process. So far here is what i have come up with regarding the js the current html is this Code:
<!-- original input -->
<input id="cb<?php echo $i;?>" name="cid[]" value="<?php echo $commissions[$i]['id'];?>" onclick="isChecked(this.checked);" type="checkbox" />
<!-- this is new html input which is outside the $i loop that i need a copy of cid[] stored on submit
<input type="hidden" name="ids[]" onsubmit="valueTovalue();" />
<!-- here is the js so far -->
<script type="text/javascript">
function valueTovalue()
{
var valin = document.adminForm.cid.value; //cid is the array cid[]
document.adminForm.ids.value = valin; //copy the array to the new input element array ids
}
</script>
so basically if they click 1 cid then ids will also show 1, if they click all cid then ids will show all as well. will that work the way i have it, am i even close here.. thanks update: what i have seems to work fine for text values or string values but not for arrays, what am i missing that it wont copy an array? Array ( [cid] => Array ( [0] => 1 ) [task] => remarksonly [remark] => hhhyyy [boxchecked] => 1 [ids] => Array ( [0] => ) ) am i getting closer lol Code:
function valueTovalue()
{
var valin = cid.concat;
document.adminForm.ids.value = valin.concat;
return(true);
this has to be close i hope Code: document.adminForm.ids.value = [].concat(document.adminForm.cid); I am very new to javascript. I have a problem getting to any element from this form generated by the jsp page using struts. Please show me how to get to item[0].totalAmount for example, so that I can create a function to calculate the calculateTotal(). So far, when I do the alert, it is only valid up to document.myForm.item; the document.myForm.item[0] is invalid according to the alert. Any help is very much appreciated. function calculateTotal(){ alert(document.myForm.item); } <form name="myForm" method="post" action="/myAction.do"> <table id="display" border="1"> <tr> <th scope="col" id="totalAmount">Total Amount</th> <th scope="col" id="adjustmentAmount>Adjustment Amount</th> <th scope="col" id="newAmount">NewAmount</th> </tr> <tr> <td><input type="text" name="item[0].totalAmount" id="totalAmount" value="100" readonly="readonly"></td> <td><input type="text" name="item[0].adjustmentAmount" id="adjustmentAmount" value="" onblur="javascript:calculateTotal();" readonly="readonly"></td> <td><input type="text" name="item[0].newAmount" id="newAmount" value="" readonly="readonly"></td> </tr> <tr> <td><input type="text" name="item[1].totalAmount" id="totalAmount" value="350" readonly="readonly"></td> <td><input type="text" name="item[1].adjustmentAmount" id="adjustmentAmount" value="" onblur="javascript:calculateTotal();" readonly="readonly"></td> <td><input type="text" name="item[1].newAmount" id="newAmount" value="" readonly="readonly"></td> </tr> </table> </form> Hello i am using a simple calendar date picker in which when u click a date is displayed in an input field. Using a javascript i am trying to retrieve data from a second page using this value but probably i am doing something wrong. 1st page: Code: <script type="text/javascript">
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","check6.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
Check in:
<input onchange="showCustomer(this.value)" size="22" id="f_date1" /><button id="f_btn1">...</button>
<script type="text/javascript">//<![CDATA[
var cal = Calendar.setup({
onSelect: function(cal) { cal.hide() },
showTime: true
});
cal.manageFields("f_btn1", "f_date1", "%Y-%m-%d");
//]]></script>
</form>
<br />
<div id="txtHint">here...</div>
</body>
</html>
and in second one i am trying to get date like this: Code: sql_cmd.CommandText = "SELECT dbo.rooms.id, type, image, price,details FROM dbo.rooms, dbo.transactions WHERE dbo.rooms.id=dbo.transactions.roomid and '" & request.querystring("q") & "' not between checkin and checkout"
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="javascript/text">
<!--
function clearInputField( input, def )
input = document.getElementById( input );
if ( input.value == def ) {
input.value = '';
}
}
-->
</script>
</head>
<body>
<b>Testing Input</b>
<input id="input" onclick="JavaScript: clearInputField('input', 'Enter Text');" type="text" size="31" value="Enter Text" />
<body>
</html>
This gives me a "Uncaught ReferenceError: clearInputField is not defined" error and I'm not sure why...? I'm new in web-development. I've searched it but it's not found. I make a input then how i get value of it for javascript value?
i was wondering what event would clear an input field that has a value in it... so a user can type their own value.... any examples? How do I insert this javascript: <script language="JavaScript" type="text/javascript" src="http://www.ABC.com/members/display.php?token=email"></script> Into the values of this: <input id="Email" name="Email" type="text" size="30" /><input name="emailagent" type="HIDDEN" class="textfield" id="emailagent" value=''INSERT JAVASCRIPT" /> Hi all, I have a complicated (well to me it is!) problem with a form I am creating for my site. The form has three sections with the ability to add another field unlimited times. There is one for adding ingredients, one for equipment and one for steps The name and id does increment on all 3 however the problem is they seem to all be using the same count, by this I mean that if I add 2 steps (which brings the count to 3) and then add an ingredient, the ingredient id goes to ingredient4 - obviously because it is taking the count that step has set. I am no javascript guru, I am more a designer so I'm really struggling, Ive been working on this one for days.. There is also another problem in that if I create say 3 steps bringing the count up to step4 and then remove the second step, I cant see how I can bring the other steps after step2 count down by one, at the moment step4 and step3 are staying as step3 and step4 but because step2 was removed they should drop down to becoming step2 and step3. My php that inserts the data into my db isnt working because the ids keep getting messed up I have a demo URL up on ajburchell.com/form.html If anyone can help me with this I will be extremely grateful Thank you in advance I'm building a template editor and need some help changing some of the variables. Part 1. Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s I need to be able to fill out two fields to change DEALERNAME and 00/00/00. I found a way to do this but it required the output to be in a field. I need it the output to look no different than before. Part 2. I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3. Head Code: <script language="javascript" type="text/javascript">
function detail1a(){
document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
}
function detail1b(){
document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
}
function detail1c(){
document.getElementById("detail1").innerHTML = "Lube Chassis";
}
function detail2a(){
document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
}
function detail2b(){
document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
}
function detail2c(){
document.getElementById("detail2").innerHTML = "Lube Chassis";
}
function detail3a(){
document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
}
function detail3b(){
document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
}
function detail3c(){
document.getElementById("detail3").innerHTML = "Lube Chassis";
}
</script>
Body Code: <span style="font-weight: bold;">Offer Details</span><br /> <p style="margin: 8px 10px"> Detail 1<br /> <input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 2<br /> <input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 3<br /> <input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br /> </p> Output Code: <ul> <li><span id="detail1">Detail 1</span></li> <li><span id="detail2">Detail 2</span></li> <li><span id="detail3">Detail 3</span></li> </ul> I have a script where I move randomly users from one multiple selectfield to another and that part works perfectly, but... When I want to submit the form I don't get any users passed along, course they are not "selected". I have then read around on the net and I need to create an elemet with a hidden input field where all the randomly selected users is inserted to with comma separation, but dont know how?!?! This is what I got: Code: function randomusers(){
var given = 3, used = {}, randnum, opts = $('#select1 option'), olen = opts.length;
function ran() { // generate a unique random number
randnum = Math.floor(Math.random() * olen);
return used['u'+randnum] ? ran() : randnum;
}
for (var i = 0; i < given; i++) { // get the correct quantity of randoms
used['u'+ran()] = true;
}
opts.filter(function(index) { // remove all options that are not one of the randoms
return !!used['u'+index];
}).appendTo('#select2');
}
I have tryied to insert this: appendTo('#select2' + '<input type="hidden" name="test[]" value="" />'); but that didn't seem right... Please help :-) Below is my previous code I had working in the manner it would change the price, sub_total, tax, sh, total, and total_paid input fields to 0. There are two problems with this... 1. When it outputs to the input fields, the value displays as 0 instead of 0.00. 2. I need to have it only react when the value typed into the input field "trees_sold" is "0". If any higher, I would like it to ignore the statement. Code: <!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
var trees_sold = 0.00;
function InitSaveVariables(form) {
price = form.price.value;
sub_total = form.sub_total.value;
tax = form.tax.value;
sh = form.sh.value;
total = form.total.value;
total_paid = form.total_paid.value;
}
function CompPrices(form) {
if (trees_sold == 0.00) {
InitSaveVariables(form);
form.price.value = 0.00;
form.sub_total.value = 0.00;
form.tax.value = 0.00;
form.sh.value = 0.00;
form.total.value = 0.00;
form.total_paid.value = 0.00;
}
}
</script>
Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Below is my current code I'm working with that I can't seem to get to function properly. I've modified the first two lines of code here, and am attempting to pull any data that is typed in and automatically take into consideration if it is a "0" value, it reacts as my code below says "if (trees_sold == 0.00)" and if anything else, it will not do anything. This is not working unfortunately. Code: <!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
form.trees_sold.value = "";
trees_sold = form.trees_sold.value;
function InitSaveVariables(form) {
price = form.price.value;
sub_total = form.sub_total.value;
tax = form.tax.value;
sh = form.sh.value;
total = form.total.value;
total_paid = form.total_paid.value;
}
function CompPrices(form) {
if (trees_sold == 0.00) {
InitSaveVariables(form);
form.price.value = 0.00;
form.sub_total.value = 0.00;
form.tax.value = 0.00;
form.sh.value = 0.00;
form.total.value = 0.00;
form.total_paid.value = 0.00;
}
}
</script>
Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Anyone have any ideas? Thank you. hey friend i am trying to use automatic html input creation using java script for my new project .... my problem is the field "type propositon 1:is it answer? ignore this one:" not come into input variable such as $_POST['prop1'] i used PHP Code: pint_r($_POST) and the result was Code: Array ( [radio1] => on [cid] => 65 [desc] => dfdfdfdfd [submit] => Submit ) why my javascript created input field come into role? my php html code is PHP Code: <table> <form action="new.php" method="post"> <tr><td> question type:<br /> True or False:<input type="radio" name="radio1"> Objective:<input type="radio" name="radio2"> Other:<input type="radio" name="radio3" > </td></tr> <textarea name="desc" rows="6" cols="35" ></textarea> <br /> <a href="javascript:add()" ><b>add proposition</b></a> <div id="cat"></div> <div id="num" style="display:none;"></div> <br> </table> and the java script is ... PHP Code: <script language="javascript" type="text/javascript"> function add() { k=document.getElementById("num").innerHTML k=parseInt(k); if(!k) {document.getElementById("num").innerHTML=1; k=1;} else{ document.getElementById("num").innerHTML=k+1; k++; } document.getElementById("cat").innerHTML+="<tr><td>type propositon "+(k)+":<input type=\"text\" name=\"prop"+k+"\"><td>is it answer? </td> <td> <input type=\"checkbox\" name=\"ans"+k+"\"></td><td><td> ignore this one:</td><input type=\"checkbox\" name=\"ign"+k+"\"></td></td></tr><br>" } </script> can someone help me isolate this input script to 1 designated input field? it just removes any pre-existing value in the field but does so to all input text types now. Code: // Home Page Search Box Input Clear
function initInputs () {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++ ){
if(inputs[i].type == "text" ) {
inputs[i].valueHtml = inputs[i].value;
inputs[i].onfocus = function (){
this.value = "";
}
inputs[i].onblur = function (){
this.value != ""? this.value = this.value: this.value = this.valueHtml;
}
}
}
}
if (window.addEventListener){
window.addEventListener("load", initInputs, false);
}
else if (window.attachEvent){
window.attachEvent("onload", initInputs);
}
Hi everyone, im new to javascript and I have created two forms.. a value will be put in the first field and the second field should display either $20 or $35 depending on the value of the first field. Im doing something wrong here.. but I cant see what. Any help is appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Distance from Depot</title> </head> <body> <form id="distanceform"> <ul> <li> <label for="Distance from EverWarm Depot">Distance from Depot (km):</label> <input type="text" id="distance" class="large"/> </li> </ul> </form> <input name="Button1" type="button" value="calculate" onclick="deliverycost()"/> <form id="deliverycostform"> <ul> <li> <label for="Delivery Cost" >Delivery Cost:</label> <input type="text" id="deliverycost" class="large"/> </li> </ul> </form> <script> function deliverycost() { /* Here is the delivery cost: less than or equal to twenty kilometres is $20.00 greater than twenty kilometres is $35.00 */ var distance = document.forms["neworder"]["distance"].value; if(distance<20) { document.getElementById('deliverycost').innerHTML="$20"; } else { document.getElementById('deliverycost').innerHTML="$35"; } } </script> </body> </html> Hi! I want to insert flash player on my page, that user can change flv source. But I dont know how to make input field that change flv source. I tried to insert input field and button but dont know how to make it working, please help me Here is my flvplayer embed code: <script type="text/javascript" src="http://flvplayer.com/free-flv-player/flvplayer/swfobject/swfobject.js"></script> <div id="embed_player"> <h1>Please Upgrade Your Flash Player</h1> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div> <script type="text/javascript"> var flashvars = { flvpFolderLocation: "http://flvplayer.com/free-flv-player/flvplayer/", flvpVideoSource: "http://flvplayer.com/media/audi_tdi_commercial.mp4", flvpWidth: "640", flvpHeight: "375", flvpInitVolume: "50", flvpTurnOnCorners: "true", flvpBgColor: "#FFFFFF" }; var params = { bgcolor: "#FFFFFF", menu: "true", allowfullscreen: "true" }; swfobject.embedSWF("http://flvplayer.com/free-flv-player/FlvPlayer.swf", "embed_player", "640", "375", "9.0.0", "http://flvplayer.com/free-flv-player/flvplayer/swfobject/expressInstall.swf", flashvars, params); </script> Hi, my first question on this forum is I hope a simple one. I have an input text field that I would like to have either the user fill out but also I would like to be able to fill it with text, which I can do, via javascript or a variable which I don't seem to be able to manage. I have tried lots of options, converting to a string first and much more but it will not work, maybe it is a syntax error or maybe I am just doing it plain wrong. I think it should be simple but I have only been using javascript for a few weeks so who knows, hopefully one of you! Here is my code for displaying a variable which does not work: Code: <html>
<head>
<script type="text/javascript">
function myfunction()
var mynumber = 101;
document.getElementById("myinput").value = mynumber;
</script>
</head>
<body>
<p id="demo">Web Page 1</p>
<button type="button" onclick="myfunction()">JS</button>
<input type="text" value="00000000" id="myinput">
</body>
</html>
I would be very grateful for any help. Thanks Simon |
|||||||