JavaScript - Javascript Array Within Form Checkbox Elements

I am working on a page where the user will select a location from a dynamically generated dropdown list.

I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form.

For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields.

php array creation:
Code:

if ($row_locations) 
{ 
	while ($row_locations = mysql_fetch_assoc($locations))  
	{ 
		$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
	} 
}

javascript function - this should create the array and send variables to text fields.
Code:

function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}

Where is this breaking?
Thanks in advance.

Hi thier,

I am using PHP to generate a page with a list of checkbox's on it. Then I am using JavaScript to validate that the user has selected at lest 1 of the given box's before I do a post back.

But I cannot get my Javascript to see my CheckBox Array.

Any help you can offer would be very useful thank you all in advance.

Here is my PHP code used to build to Checkbox list.

Code:

			while ($row = mysql_fetch_array($data, MYSQL_ASSOC)) 
			{
				if(is_null($row['Team_Number']))
				{
					$str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']);
				}
				else if($row['Team_Number'] == $_REQUEST['T'])
				{
					str1 = sprintf('<input type="checkbox" name=\'People\' value="%s" checked>',$row['Member_ID']);
				}
				else
				{
					$str1 = sprintf('<input type="checkbox" name=\'People\' value="%s">',$row['Member_ID']);
				}
				
				$str = sprintf('%s,%s (%s)',$row['First'],$row['Last'],$row['Nick_Name']);
				echo('<tr><td width ="10%" align="center">');
				echo($str1);
				echo('</td><td width="90%" align="Left">');
				echo($str);	 
				echo('</td >');
				echo('</tr></td>');
			}

And here is my Javascript, I've added the whole function incase it's not clear just from a code segment.

Code:

function TeamSetup()
{
	var required = document.form1.BowlersPerTeam.value;
	var total = document.form1.People.length;
	var Tm = document.form1.TeamName.value;
	var cnt = 0;
	var peopleIDs = "";
	
	var test = document.getElementsByName('People');
	
	if(isArray(document.form1.People))
	{
		for(var i=0; i < total; i++)
		{
			if(document.form1.People[i].checked)
			{
				if(peopleIDs.length > 0)
				{
					peopleIDs = peopleIDs +",";
				}
				peopleIDs = peopleIDs + document.form1.People[i].value.toString();
				cnt++;
			}
		}
	}
	else
	{
		if(document.form1.People.checked)
		{
			cnt=1;
			peopleIDs = peopleIDs + document.form1.People.value.toString();
			
		}
	}
	
	  if(Tm.length > 0)
	  {
		  if(cnt == required || cnt > 0)
		  {
			  //Hand off to next step for completeing Processing.
			  var myForm = document.createElement("form");
			  myForm.action=window.location;
			  myForm.method="Post";
			  myForm.appendChild(createformInput("Process","PP"));
			  myForm.appendChild(createformInput("people",peopleIDs));
			  myForm.appendChild(createformInput("Team",GetQueryString("T")));
			  myForm.appendChild(createformInput("League",GetQueryString("L")));
			  myForm.appendChild(createformInput("TeamName",Tm));
			  document.body.appendChild(myForm);
			  myForm.submit();
		  }
		  else
		  {
			  alert('You need to Select at least 1 player');
		  }
	  }
	  else
	  {
		  alert('You need to enter the team name!');
	  }
}

Hello

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
http://www.watphotos.com/introductio...otography.html

And here is the code in question:

Code:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

I have two questions...

Question 1
How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2
The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

Thanks in advance!

I tried the following code based on a post I saw somewhere else about summing all the elements of an array together. When I tried it though I couldn't seem to get it working. Can someone please point out what I did wrong or tell me a different way to sum array elements together? Thanks.
Code:

<script type="text/javascript">

Array.prototype.sum = function() {
for (var i = 0, L = this.length, sum = 0; i < L; sum += this[i++]);
return sum;
}

var myArray=[1,2,3,4,5];

document.write(myArray.prototype.sum);

</script>

Hi again!!
This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate.

PHP Code:
<form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data">

<table width="100%" border="0" cellspacing="0" cellpadding="2">

<table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left">

<tr align="center">

<td width="10" class="forhead" style="white-space:nowrap;">&nbsp;</td>

<td width="92" class="forhead" style="white-space:nowrap;">Qty</td>

<td width="94" class="forhead" style="white-space:nowrap;">Rate</td>

<td width="94" class="forhead" style="white-space:nowrap;">Amount</td>

</tr>

</table>



<tr align="left">

<td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td>

<table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text">

<tr>

<td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td>

<td width="92" class="forhead" style="white-space:nowrap;">



<input type="text"  name="qty[]"  style="width:80px;" onblur="">



</td>

<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  name="rate[]" style="width:80px;" value=""></td>



<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td>



</tr>

</table>

<table border="0">

<tr>

<td>Total:</td>

<td><input type="text"  name="total[]" style="width:80px;" value=""></td>

</tr>



<tr>

<td colspan="2">

<input name="Submit" type="submit" value="Save" style="text-decoration:none" />

<input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">

</td>

</tr>

</form>

<script type="text/javascript">



    function getValues(objName,objName2,objName3)

    {    

        var var3 = "";

        var arr = new Array();

        arr = document.getElementsByName(objName);

        arr2 = document.getElementsByName(objName2);

        arr3 = document.getElementsByName(objName3);

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

        {

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

            {

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

            {

            

                var obj1 = document.getElementsByName(objName2).item(i);

                var var2 = obj1.value;



                var obj = document.getElementsByName(objName).item(i);

                var var1 = obj.value;



                var obj3 = document.getElementsByName(objName3).item(i);

                var var3 = obj3.value;

                var var4 = var1 * var2;

                document.getElementsByName(objName3).item(i).value=var4;



            }        

            }

        }    

        

    }

    

  function addRow(tableID) {

     var table = document.getElementById(tableID);

     var rowCount = table.rows.length;

     var row = table.insertRow(rowCount);

     var colCount = table.rows[0].cells.length;

           for(var i=0; i<colCount; i++) {

               var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;

                //alert(newcell.childNodes);

                switch(newcell.childNodes[0].type) {

                    case "text":

                            newcell.childNodes[0].value = "";

                            break;

                    case "checkbox":

                            newcell.childNodes[0].checked = false;

                            break;

                    case "select-one":

                            newcell.childNodes[0].selectedIndex = 0;

                            break;

                }

            }

        }

        

function deleteRow(tableID)

{

            try

                 {

                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;



                    for(var i=0; i<rowCount; i++) 

                        {

                        var row = table.rows[i];

                        var chkbox = row.cells[0].childNodes[0];

            

                        if (null != chkbox && true == chkbox.checked) 

                            {

                            if (rowCount <= 1) 

                                {

                                alert("Cannot delete all the rows.");

                                break;

                                }

                

                            table.deleteRow(i);

                            rowCount--;

                            i--;

                            }



                        }

                    } catch(e) 

                        {

                        alert(e);

                        }

}



</script>

I would like to know that how can I show the value of all the elements in array "amount" in total field??

I'm using the jquery plugin found here. I love the look but I have a form that uses functions like this:

Code:

function cascadeCountry(value) {
   if (document.getElementById("srchlookstate_province") != null) {
      http.open('get', 'cascade_search.php?a=country&v=' + value );
      document.getElementById('srchlookstate_province').innerHTML="  "+loadingTag;
      http.onreadystatechange = handleResponse;
      http.send(null);
   }
}

So, when you select a country and it retrieves the state/province text input, the jquery css is not applied to it. Is there something I need to add to the code above or to the jquery initialization code he

Code:

$(function() {
	$("form.jqtransform").jqTransform();
});

Hey guys. I need a little help with checking elements in my array. I created an array of size 50 and initialized all elements to 1. What i want to do is if the user types in the number "1" into the prompt box, i want it to check the first 15 elements and increase only one of the elements by 1, and if the element has already been increased by 1 then i want it to check the next element and see if its been increased, if the element has been increased then it needs to move on to the next one and check that. If the element is 1, then it can be increased by "1", if the element is 2 then i need it to check the next element. If all elements within the first 15 have increased by 1, it should just alert the user that all slots have been assigned. Is there a way to do this? Thanks for your time

Hey All,

I have completed most of a homework assignment that I am working on. I am able to .push desired elements into an array:

Code:

//Insert variable into the Array
function insertElem(){
	//Insert and sort first array, but not second array
	if(nameInput.value != ""){
		studName2.push(nameInput2.value);
	}
	else{
		alert("Value to be inserted cannot be Null");
	}
	
	//Refresh display area
	clearAndShow2();
}

What I would like to do is be able to store and display the created array "permanently" until I decide to remove the elements. My current method to hold the elements, until the page is refreshed, is:

Code:

//Refresh second array
function clearAndShow2(){
	nameInput2.value = "";
	messageBox2.innerHTML = "";
	messageBox2.innerHTML += "Groups: " + "<br />" + studName2.join("<br />") + "<br />";
}

I appreciate the assistance.

Hello

I am trying to find a way to use the check all javascript code to select all my checkboxes within a while...loop.

Codes goes as follows:

within the header on the top of page 1:
<SCRIPT LANGUAGE="JavaScript">
function CheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}

function UnCheckAll(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
</script>

The code that displays the checkboxes, which is a page included onto page 1:
echo "<a class='comp' onclick='singleHideandShow({$row['pr_id']})' style='cursorointer'>{$row['propname']}</a><p>";
$propqry = mysql_query("SELECT * FROM users WHERE propid={$row['pr_id']}");
//using the hide and show id number, once clicked it will display the below contents
echo "<div id={$row['pr_id']} style='display:none;'>";
while($propf = mysql_fetch_assoc($propqry)) {
if($propf['uactive'] == "yes") {
$pactive = "active";
} else {
$pactive = "deactivated";
}
//displays the information from the DB with a checkbox
echo "<form name='myform' id='formmsg' method='post' action='profile.php?paction=edit&find=none' >";
echo "&nbsp;&nbsp;&nbsp;&nbsp;<input type='checkbox' name='check_list' value='{$propf['us_id']}'>&nbsp;&nbsp;<a href='profile.php?paction=edit&pid={$propf['us_id']}' /><img src='../images/secure/edit.png' name='Edit' border='0' /></a>&nbsp;<a href='profile.php?paction=delete&pid={$propf['us_id']}' /><img src='../images/secure/delete.png' name='Delete' border='0' /></a><label class='cuser'>&nbsp;&nbsp;{$propf['fname']} {$propf['lname']}, &nbsp;&nbsp; ({$propf['uname']}), &nbsp;&nbsp; {$pactive}</label><br>";

}
echo "</form>";
echo '<p><input type="button" name="Check_All" value="Check All" onClick="CheckAll(document.myform.check_list)"> <input type="button" name="Un_CheckAll" value="Uncheck All" onClick="UnCheckAll(document.myform.check_list)"> <p>';
echo "</div>";


I receive the following error message when I click on the Check All button.

Message: 'length' is null or not an object
Line: 15
Char: 13
Code: 0
URI: http://www.domainname.com/profile.ph...edit&find=none



Can anyone help me figure this out?

Hello,

I've a checkbox validation script to check for at least one ckeck.
Code:

<script type="text/javascript">

function chkChecks(){
isChecked=false
alert(document.forms["form1"]["checked[]"].length);
for(var i=0;i<document.forms["form1"]["checked[]"].length;i++){
if(document.forms["form1"]["checked[]"][i].checked){
isChecked=true
}
}

if(isChecked){
document.forms["form1"].submit()
}
else{
alert('Please select a checkbox')
}

}

</script>

for the form Code:

<form name="form1" action="test.php">
<input type="checkbox" name="checked[]" value="1">
<input type="checkbox" name="checked[]" value="2">
<input type="checkbox" name="checked[]" value="3">
<input class="button_140" type="button" value="Check" onclick="chkChecks()">
</form>

It works well for more than one checkboxes, but these are generated dynamically by PHP and if there is only one checkbox, document.forms["form1"]["checked[]"].length returns 'undefined'.

Can I modify this to work in all cases?

thanks,
art.

Hi Guys

I am new to javascript programming and I am trying to get elements from one array to another, here is an example of what I am trying to do;

Code:

oneArray[0] = anotherArray[10];

Essentially, moving the data in index 10 of anotherArray to the index 0 of oneArray. I have tried using a variable as a place holder such as;

Code:

placeHolder = anotherArray[10];
oneArray[0] = placeHolder;

I know i'm doing something idiotic somewhere along the line, I just can't figure out what I need to do.

Hi All,

Simple newbie question here - I want to initialize an array with "myString.length" elements, and I want every element to be prepopulated with "*" instead of blank. Is there any way of doing this? Code:

 

var myString = '123456';

var trialVar = new Array[myString.length]
	
document.write('TEST ' + '<BR><BR>' + trialVar);

(I want every element of trialVar to be "*", I cant just manually add them as myString.length will vary)

Any help would be mega appreciated - thank you

Hi all,

I have a form where I want a single checkbox to toggle the selected/unselected status based on the status of that master checkbox.

I have a working script that accomplishes this, but I'm having a problem now that I'm submitting the checkbox as an array.

Here is the JS :

Code:

function checkAll()
{
if(document.resultForm.master.checked== true)
{
for(var i=0; i < document.resultForm.choices.length; i++)
{
document.resultForm.choices[i].checked=true;
}
}
else
{
for(var i=0; i < document.resultForm.choices.length; i++)
{
document.resultForm.choices[i].checked=false;
}
}
}

Here is the form that it currently works with :

Code:

<input type="checkbox" name="master">

<input type="checkbox" name="choices" value="choice 1">
<input type="checkbox" name="choices" value="choice 2">
<input type="checkbox" name="choices" value="choice 3">
<input type="checkbox" name="choices" value="choice 4">

And this is the form that I want it to work with instead :

Code:

<input type="checkbox" name="master">

<input type="checkbox" name="choices[]" value="choice 1">
<input type="checkbox" name="choices[]" value="choice 2">
<input type="checkbox" name="choices[]" value="choice 3">
<input type="checkbox" name="choices[]" value="choice 4">

Any help would be greatly appreciated!

Years ago I created HTML that employs checkboxes and textboxes. I am now writing JS with the intention of adding flexibility and limiting redundancy. I am not sure I truly understand how to correctly interact the two though. For example, one of my scripts have arrays that contain the names of the checkboxes and textboxes, with a 'for' loop to document.write() them to references within the HTML code. This does not seem to be working for me though. Here is what I have thus far (in short):

Code:

<script language="javascript"> 
var teamNames = new Array(3);
 
teamNames[0]="South Africa";
teamNames[1]="Mexico";
teamNames[2]="Uruguay";

for (i=0; i<=31; i++) {
document.write("<p>" + teamNames[i] + "<\/p>");
}
</script>
</head>
<body>
<tr><td>Jun 11</td><td><input type="checkbox" 
name="teamNames[0]" value="teamAbbr[0]"></td>
</body>

I've left out a lot of the code (to include the teamAbbr array, but you get the points. I've tried moving the JS within the HTML body and playing with the reference syntax, but nothing so far. Any help would be great!