PDA

Click to See Complete Forum and Search --> : input type image issue

raghu
10-10-2003, 03:42 AM
Hi,

I have a small question.
I have my test code with this mail.

I have a requirement where in my current code, i need to display a text box when the combo-box value is "7".I am able to do that successfully.Now i try to enter some-thing in the text -box and press enter key, the form gets submitted,
i want to prevent the form getting submitted.


any ideas.


//////////////////////////////////code/////////////////////////////

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-us">
<head>
<script>
function jsOnChange()
{

var sSelectedAttr = document.f1.cmbAttribute.options[document.f1.cmbAttribute.selectedIndex].value;

if (sSelectedAttr == "7")
{
alert(sSelectedAttr);
document.getElementById('imgClear').disabled = false;
document.getElementById('imgAdd').disabled = false;
document.f1.txtValue.style.display = "block";
document.f1.cmbValue.style.display = "none";
}
else
{
document.getElementById('imgClear').disabled = true;
document.getElementById('imgAdd').disabled = true;
}

}
</script>
</head>

<body>
<form name=f1 name=f1 method="post">
<table border="0" cellspacing="0" cellpadding="4" width="560" ID="Table1">
<tr>
<td align="left" width="11%">
<label for="cmbAttribute">Attribute &nbsp;</label>
</td>
<td>
<select name="cmbAttribute" id="cmbAttribute" size="1" tabindex="6" style="width: 150px" onchange="javascript:jsOnChange();">
<option value="anytime" selected>anytime</option>
<option value="7" >last 7 days</option>
<option value="30">last 30 days</option>
<option value="60">last 60 days</option>
<option value="90">last 90 days</option>
</select>
</td>
</tr>

<tr>
<td align="left" width="11%"><label for="cmbValue">Value &nbsp;</label></td>
<td>
<select name="cmbValue" id="cmbValue" size="1" tabindex="8" style="width: 150px">
</select>
<input name="txtValue" type="text" style="display:none;width: 146px;" maxlength="100" />
</td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="560" ID="Table2">
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
<tr>
<td align="center" width="35%">
<input type="image" name="imgClear" id="imgClear" src="/tl/images/clear_attributes_button.gif" value="clear" width="101" height="20" alt="clear attributes" title="clear attributes" tabindex="9" border="0" onclick="javascript:return jsOnClickClear();" />
</td>
<td align="center" width="30%">
<input type="image" name="imgAdd" id="imgAdd" src="/tl/images/add_attribute_button.gif" value="Add" width="94" height="20" alt="add attributes" title="add attributes" tabindex="10" border="0" onclick="javascript:return jsOnClickAdd();" />

</td>
</tr>
<tr>
<td colspan="2">
<img src="/img/s.gif" height="1" width="1" alt="" />
</td>
</tr>


</table>

</body>
</form>
</html>
<!--20021218-->

////////////////////////////////code////////////////////////////////
raghu
10-10-2003, 06:57 AM
Can some-body help me on this.
requestcode
10-10-2003, 07:38 AM
This will work for specific form fields:
<html>
<head>
<title>Test</title>
<script language="JavaScript">
IE=document.all? 1:0
function stopkey(e)
{
whKey = IE?event.keyCode:e.which // grab the ascii code of key pressed
window.status=whKey // Display ascii code in status bar
if(whKey=='13') // check for ascii enter key (ascii code 13)
{return false;}
}
</script>
</head>
<body>
<center>
<form name="myform">
<textarea name="txta" cols="30" rows="4" WRAP="hard" onKeyPress="return stopkey(event)">Enter your response here</textarea>
</form>
</center>
</body>
</html>
raghu
10-10-2003, 11:45 PM
Based on your reply, i just took your function and added it to my code, it works fine in IE,but does not work in Netscape 7.0.
The form is getting submitted when the enter key is clicked.

My Main idea is to prevent the form submission when enter key is clicked on the text box.The Text box becomes visible when Attribute dropdown has a value ="7"
////////////////////code//////////////////////////////

<html lang="en-us">
<head>
<script>
function jsOnChange()
{

var sSelectedAttr = document.f1.cmbAttribute.options[document.f1.cmbAttribute.selectedIndex].value;

if (sSelectedAttr == "7")
{
document.getElementById('imgClear').disabled = false;
document.getElementById('imgAdd').disabled = false;
document.f1.txtValue.style.display = "block";
document.f1.cmbValue.style.display = "none";
}
else
{
document.getElementById('imgClear').disabled = true;
document.getElementById('imgAdd').disabled = true;
}

}


IE=document.all? 1:0

function stopkey(e)
{
whKey = IE?event.keyCode:e.which // grab the ascii code of key pressed

window.status=whKey // Display ascii code in status bar
if(whKey=='13') // check for ascii enter key (ascii code 13)
{return false;}
}

</script>
</head>

<body>
<form name=f1 name=f1 method="post">
<table border="0" cellspacing="0" cellpadding="4" width="560" ID="Table1">
<tr>
<td align="left" width="11%">
<label for="cmbAttribute">Attribute &nbsp;</label>
</td>
<td>
<select name="cmbAttribute" id="cmbAttribute" size="1" tabindex="6" style="width: 150px" onchange="javascript:jsOnChange();">
<option value="anytime" selected>anytime</option>
<option value="7" >last 7 days</option>
<option value="30">last 30 days</option>
<option value="60">last 60 days</option>
<option value="90">last 90 days</option>
</select>
</td>
</tr>

<tr>
<td align="left" width="11%"><label for="cmbValue">Value &nbsp;</label></td>
<td>
<select name="cmbValue" id="cmbValue" size="1" tabindex="8" style="width: 150px">
</select>
<input name="txtValue" type="text" style="display:none;width: 146px;" maxlength="100" onKeyPress="return stopkey(event)" />
</td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="560" ID="Table2">
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
<tr>
<td align="center" width="35%">
<input type="image" name="imgClear" id="imgClear" src="/tl/images/clear_attributes_button.gif" value="clear" width="101" height="20" alt="clear attributes" title="clear attributes" tabindex="9" border="0" />
</td>
<td align="center" width="30%">
<input type="image" name="imgAdd" id="imgAdd" src="/tl/images/add_attribute_button.gif" value="Add" width="94" height="20" alt="add attributes" title="add attributes" tabindex="10" border="0" />

</td>
</tr>
<tr>
<td colspan="2">
<img src="/img/s.gif" height="1" width="1" alt="" />
</td>
</tr>


</table>

</body>
</form>
</html>
//////////////////code/////////////////////////////////