JavaScript - Combo Box Enable Disable

Hello.

I have a for loop, that automatically creates textfields and checkboxes.
These of course have the same name and I am using request.getParameterValues to retrieve them.

However, I am struggling on this rather simple issue. I am no javascript guru, so maybe you guys could help me out. I have tried googling for this answer, but havent found anything that can help my problem exactly.


I have three text fields on each row and one checkbox.
I would like for each checkbox I click, that the textfields to be enabled.
A sample code he


Code:

<td><input type="text" size="10" name="pris" disabled="disabled"></td>
		<td><input type="text" size="10" name="toppfart" disabled="disabled"></td>
		<td><input type="text" size="10" name="motorinstallasjon" disabled="disabled"></td>
		
		<td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>" 
			onclick="(pris.disabled=!this.checked)&
			(toppfart.disabled=!this.checked)&
			(motorinstallasjon.disabled=!this.checked)">
		</td>

However this doesnt quite work :-)
I have tried with document.Form.pris but that didnt help either.

How can I make this code disable the submit button once it has been pressed, then if the user hits back or GOES back, it will re-enable it again?

Code:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/JavaScript">
 
function formControl(submitted) 
{
   if(submitted=="1") 
    {
   commentForm.Submit.disabled=true
   alert("Thanks for your comments!")
    }
}
 
</SCRIPT>

Thanks!

ShadowIce~

Hi guys, it's been a while since I've been here

Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.

I googled it but didn't find anything too useful except for this:

http://www.aHappyDeal.com/wj_r.asp?lid=2109

but I'm not sure how to edit it for the toggle.

Thanks!

Hi guys, it's been a while since I've been here

Anyways, I'm wondering if it's possible for a script to enable/disable all input elements on the page with some sort of toggle button.

I googled it but didn't find anything too useful except for this:

http://www.codetoad.com/javascript/e...rm_element.asp

but I'm not sure how to edit it for the toggle.

Thanks!

Within my project, using PHP/HTML/Javascript, I am trying to set up a page where a corresponding submit button is enabled when a given checkbox is checked. What complicates my attempt is that the checkboxes and submit buttons are in the form of arrays. Here is a snippet of my code:

Code:

<form name="myform4" id="list_apps" method="post">
<?php
for ($i=0; $i<$num_rows;$i++)
{
  ?>
  <p>
  <input type="checkbox" name="app[]" id="app[]" onclick="enable_perm()">
  <input name="set_perm[]" type="submit" id="set_perm[]" value="Set Permissions">  
  </p>      
  <?php
}
</form>

Here is my attempt at using Javascript to disable the first submit button after clicking any check box:

Code:

function enable_perm()
{
  document.myform4.set_perm[0].disabled = true;
}

What am I missing here, or, how do I enable/disable submit buttons that are part of an array?

Hi
I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question.

The code is in Jquery and Javascript and i'm still learning.

I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too....


Code:

//Next Page Function
	$('.next').click(function() {
		if (current_page == no_pages){
			//do nothing
		}
		else{

			if (flag==false)
			{
				try {
					checkAnswer(document.getElementById('quizForm'))
					flag=true;
					return false;
				}
				catch(err)
				{
					if (err.number !=-2146823281)
					{
						alert(err.description);
					}
				}
			}
			next_page = (current_page + 1);
			$("#content").fadeOut("slow",function(){
				$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}		  
			);
			current_page ++;
			$("#current_page").html(current_page);
			progress_bar();
		}
	
	});

This is what the code looks like now without the changes....

Code:

//Next Page Function
	$('.next').click(function() {
		if (current_page == no_pages){
			//do nothing
		}
		else{
			next_page = (parseInt (current_page) + 1);
			$("#content").fadeOut("slow",function(){
				$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}		  
			);
			current_page ++;
			$("#current_page").html(current_page);
			progress_bar();
		}
	
	});

I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing.

I put this bit together but it doesn't do anything....


Code:

else{    

                        

        if (document.getElementById('quizForm')){

 

            if (document.quizForm.cc.disabled==true)

                      document.quizForm.cc.disabled=false

 

else

 

{return true;}

Any advise? Thanks.

Hi, I am having a problem with my script used to disable my submit button. I want the button to disable upon correct submission of the form, and the button to be kept enabled if the required fields are not filled in. I have the following code at the moment (which only does the first if statement).

Code:

SCRIPT CODE: 

<script type="text/javascript" >
function validateForm()
{

var amount=document.forms["expenserecord"]["amount"].value;
var picker=document.forms["expenserecord"]["picker"].value;
var desc=document.forms["expenserecord"]["description"].value;

if (amount==null || amount=="" || picker==null || picker=="" || desc==null || desc=="") {
  alert("All required fields must be filled out.");
  document.getElementById("sub").disabled = false;
  return false;
}
 
else {
 	document.getElementByID("sub").disabled = true;	
}

}

</script>

BUTTON CODE:

<p><input type="submit" value="Submit" onClick="return validateForm()" id="sub"></p>

Guys Need Help here...

here i send attach my script.

i need combine 2 function script into . but i can figure it out.

can everyone helps me.


Code:

<?php

require_once('../Connections/koneksi.php');

?>

<!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>
<script>
 
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;

        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("Cant delete all rows");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
    }catch(e) {
        alert(e);
    }
}

function selectnama()
	{
		var i = 0;
		i = document.form1.txtcustomer.value;
		i= i.replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]{2,}/,' ');
		//alert(cust[i]);
		document.form1.select2.value = i;
	}
	
function change2()
{
	document.form1.txtcustomer.value = document.form1.select2.value;
		
}	


function enable_text(status)
{
status=!status;
document.form1.qty_material.disabled = status;
}
 
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form name="form1" method="post" >
<table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="6">
                        <tr>
                            <td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
                            
                            <td> <input type="text" name="txttipe[]"  placeholder="Tipe"  id="txttipe" size="40"/> /
                            
                            <input name="txtcustomer" type="text" id="txtcustomer" onkeyup="selectnama()" size="10" maxlength="10"/>
                         <select name="select2" style="color:blue;" onchange="change2()" >
                         <option></option>
                      <?php
                        $query = mysql_query("select right(KUNNR,6), NAME1 from kna1 order by NAME1") or die(mysql_error());
                        $query3 = mysql_query("select * from spg_kna1_exception order by NAME1") or die(mysql_error());
                        while($row = mysql_fetch_array($query))
                        {
                            echo "<option value=".$row[0].">$row[1] - $row[0]</option>";
                        }
                        while($row3 = mysql_fetch_array($query3))
                        {
                            echo "<option value=".$row3[0].">$row3[1] - $row3[0]</option>";
                        }
                        
                      ?>
                      </select>;
                          
                          	  <input type="checkbox" name="qty_matnr" onClick="enable_text(this.checked)" > Qty <input type="text" name="qty_material">
                                    
                          </td>                           
                        </tr>
                        </table>
                        <INPUT type="button" value="Add Model" onclick="addRow('dataTable')" />
                        <INPUT type="button" value="Delete Model" onclick="deleteRow('dataTable')" />
                        </form>
</body>
</html>

I found this script, and it works great:
Code:

<script type="text/javascript">
  function disable(element)
  {
    var input = document.getElementById(element).getElementsByTagName("input");
    for(var i = 0; i < input.length; i++)
    {
      input[i].setAttribute("disabled","true");
    }
  }
</script>

I tried to make the inverse by simply reversing the setAttribute() like so:
Code:

<script type="text/javascript">
  function enable(element)
  {
    var input = document.getElementById(element).getElementsByTagName("input");
    for(var i = 0; i < input.length; i++)
    {
      input[i].setAttribute("disabled","false");
    }
  }
</script>

But that didn't do it.
Can someone show me why, and how to fix it?

Here's the sample form which I'm trying to test it on:
Code:

<form>
  <input type="radio" name="test" onclick="disable('D1')" /> disable<br/>
  <input type="radio" name="test" onclick="enable('D1')" /> enable<br/>
  <fieldset id="D1">
    <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/>
    <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/>
    <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/>
  </fieldset>
</form>

Edit:
The ultimate goal which I'm working toward now (step by step =) is to have a form more like:
Code:

<form>
  <input type="radio" name="test" onclick="disable('D1')" />
  <fieldset id="D1">
    <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" />
  </fieldset>
  <input type="radio" name="test" onclick="disable('D2')" />
  <fieldset id="D2">
    <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" />
  </fieldset>
  <input type="radio" name="test" onclick="disable('D3')" />
  <fieldset id="D3">
    <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" />
  </fieldset>
</form>

And have the fieldsets enable and disable according the selection of the radio buttons.

Also, the fieldsets (and their ID's) will be dynamically generated via PHP



Thanks-a-bunch,
~ Mo

Hello

I'm using the combo box selection menu by Elviro Mirko from this site (http://www.javascriptkit.com/script/...plecombo.shtml)

I have made amendments to show my own data, however what I would like to happen is if the user selects from the top combo only, then all the records would be shown, whereas selecting from the second combo merely 'drills down' and shows the records required. - Hope that makes sense.

The code is as follows:

Code:

// first combo box

	data_1 = new Option("Douglas - DIS", "$");
	data_2 = new Option("Douglas - COE", "$$");
	data_3 = new Option("Peel - DIS", "$$$");
	data_4 = new Option("Peel - COE", "$$$$");
	data_5 = new Option("Ramsey - DIS", "$$$$$");
	data_6 = new Option("Ramsey - COE", "$$$$$$");
	data_7 = new Option("Castletown - DIS", "$$$$$$$");
	data_8 = new Option("Castletown - COE", "$$$$$$$$");		
// second combo box

	data_1_1 = new Option("Registry Office Douglas", "-");
	data_1_2 = new Option("Broadway Baptist Church Douglas", "-");
	data_1_3 = new Option("Finch Hill Congregational Church Douglas", "-");
	data_2_1 = new Option("St Thomas's Church", "--");
	data_2_2 = new Option("St Barnabas Church", "--");
	data_2_3 = new Option("St George's Church", "--");

The HTML code is as follows:

Code:

<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">	
			
			<option value="">Select a Register...</option>
			<option value="Douglas - DIS">Douglas - DIS</option>
			<option value="Douglas - COE">Douglas - COE</option>
			<option value="Peel - DIS">Peel - DIS</option>
			<option value="Peel - COE">Peel - COE</option>
			<option value="Ramsey - DIS">Ramsey - DIS</option>
			<option value="Ramsey - COE">Ramsey - COE</option>
			<option value="Castletown - DIS">Castletown - DIS</option>
			<option value="Castletown - COE">Castletown - COE</option>
			

			</select>
<BR><BR>
			<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
			<option value="">Select a venue...</option>
			
			</select>

the link for the actual site is

http://www.manxbmd.com/cgi-bin/db.cg...m;db=marriages

If you choose Douglas-COE and search, then 0 records are found, if you choose Douglas-COE followed by St Thomas's then still 0 records are found but if you search the surname Allitson you'll see that there is a record there.

I'm not sure where I've gone wrong - I'm completely new to Javascript.

Any suggestions welcomed.

regards

Pendle

Hi Everybody

This is probably a very commonly asked question, however after much searching online I can't seem to find a straightforward answer. If anyone knows the code or a link to a place with a simple example it would be great.

What I have got is a form that a user has to fill out and submit (when validated all variables are stored in a session and emailed after multiple forms are completed), currently I have radio buttons, text boxes and a combo box/ drop down list (for location). All parts are working fine and validating fine. My problem is to do with the combo box//ddl. I have successfully validated the ddl so the user must select a location onsubmit and it is added to session and passed fine.

At the moment the ddl only has cities or towns in it however as I would like to include different states and possibly different countries I need a code that validates the state first and then only gives the cities/towns that are in that state (otherwise my ddl would be to large). I can do this with links however I can't seem to do it in a form.

I am trying to do it this way

DDL has list of all states that on mouseover/ onclick the list is revealed. onclick of a specific state populates another ddl with only the cities cities/ towns that are in that state and onclick of specific city selects the location whereby onsubmit the location is stored in the the session for submission by email

Thanks in advance for your help

I still have the following two major issues. 1) Firstly I need to be able to send the selection from the second combo box by php. 2) secondly I need the combo box to appear within the table. (I thought this should be easy, but for the life of me cannot figure out how to get the dynamic combo into my table inside the form)

I have managed to send the selection from the first combo box with the form and also I can send a selection from the second combo, however onsubmit regardless of what is selected in the second combo box it simply sends the last option not the one selected. I have spent many hours trying to figure out why this is the case to no avail.

I have included my code for anyone who may be able to help. Lastly when I have figured out these 2 (with a little help) I should be able to sort out the validation by myself. Please ignore any code that is not relevant

<html>
<head>

<script type="text/javascript">

var this1;

window.onload = function() {
if (!document.all) document.captureEvents(Event.CHANGE);
document.getElementById('myddl').onchange = readDDL1; }

function readDDL1() {
var ddlobj = document.getElementById('myddl');
var currentSelection = ddlobj.options[ddlobj.options.selectedIndex].value;
if (currentSelection == '') currentSelection = ddlobj.options[ddlobj.options.selectedIndex].text;
doDDL2(currentSelection);
}

function doDDL2(ddl1Selection) {

var existingDDL2;
if ((existingDDL2 = document.getElementById('myddl2')) != null) existingDDL2.parentNode.removeChild(existingDDL2);

var ddl2Options;
switch (ddl1Selection) {
case "Western Australia":
ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break;
case "Queensland":
ddl2Options = ["Please Select A Location", "Brisbane", "Gold Coast"]; break;
}

if (typeof ddl2Options == "object") {
ddl2 = document.createElement('select');

ddl2.id = "myddl2";
var forVar;
for (forVar in ddl2Options) {
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode(ddl2Options[forVar]));
ddl2.appendChild(newOption);


}
document.body.appendChild(ddl2);

}

document.testform.this1.value = ((ddl2Options[forVar]));

}



function checkFrequency() {
return ShowResults();

}


function validate(){
var digits="0123456789"
var temp

if (document.testform.location.selectedIndex == 0) {
alert("Please Select a State");
return false
}

if (document.testform.location2.selectedIndex == 0) {
alert("Please Select a Location");
return false
}

return true
}




</script>

<style type="text/css">
.td_freq { background-color:yellow;
height:40px;
text-align:center;
}
.td_sev { background-colorink;
height:40px;
text-align:center;
}
.td_wi { background-color:lightgreen;
height:40px;
text-align:center;
}
</style>

</head>
<body>

<FORM name="testform" action='./emlapd.php' method='post' onsubmit="return checkFrequency()">

<input type='hidden' name='this1'>

<table align="center" border="1" width="40%">

<tr><td><b>Current Worksite State:</b><font color="red">*</font></td>
<td>
<select name="location" width='53' id="myddl">
<option value="0">--- Please Select Your State --- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="Western Australia">Western Australia</option>
<option value="Queensland">Queensland</option>

</select>

</td></tr>
<tr><td><b>Location:</b><font color="red">*</font></td>
<td>

</td></tr>

</table>


<tr>
<th colspan="2">
<input type="submit" name='submit' value="Submit" onclick= "return validate()">
</th>
<td colspan="10">&nbsp;</td>
<th>
<input type='reset' name='reset' value='Clear Form'>
</th>
</tr>
</table>

</FORM>
</body>
</html>


Thankyou very much to everyone that may help


So I can place the DDL inside the form, however it places it at the end of the form. I want it somewhere in the middle (immediately following first combo box)

My other main issue is irregardless of the selection it simply posts the last option from the DDL not the one selected. Therefore I still want the second combo box to appear immediately below the first combo box and whatever option is selected from the second combo box I want to be posted with the rest of the form data.

If you have any other ideas that would be great

Obviously the reason I am still getting the same incorrect post is because the variable posted is still this1 from my code which reads the last value from the DDL. I have tried with all other variables to send as well ie ddl2 however still can't seem to send the selection.

So in its current state how can I send the selection and place the second DDL within the form??


Thank you

can we enable javascript through code

I am trying to make it so if a PHP session entity exists, then JavaScript will enable a button.

I am having trouble getting this to work and wondering if anyone knows what I am doing wrong?

Code:

function purchaseEnable() {
	if ($_SESSION['order']['paymentmethod']) {
		document.getElementById("purchase").disabled = false;
	}
}

Code:

<INPUT disabled id="purchase" type="submit" value="PURCHASE">

i am making a registration page for my website and for validation using javascript...is there any way to know on my client side javascript enable or not....