...

View Full Version : Dynamically showing field based on text value from another field



s_martin
11-18-2009, 07:51 PM
I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work.

Can I do this?

Help

ckeyrouz
11-18-2009, 07:52 PM
Show some code please to help you.

s_martin
11-18-2009, 07:57 PM
This is what I have been messing with, What I need is a function to show or hide the second field, what I can't figure out is how to get the value from the first field into the javascript to determine whether to show/hide the second field. Hope this makes sense.



<tr>
<td>
<table border="0" cellpadding="1" cellspacing="0" align="left" width="575" summary="">

<tr>
<td width="40%" align="left" class="display">*Additional Income<span class="smallBlack"></span>:</td>
<td><input name="addIncome" type="text" size="12" maxlength="12" value="<? echo $_SESSION["addIncome"]; ?>"

onBlur="showField(addIncSource)"
>

</td>
<td>&nbsp;</td>
</tr>


</table>
</td>
</tr>
<tr>
<td>
<div id="addIncSource" style="<? if ($_SESSION["addIncome"] > "0"){echo "display: block;";}else {echo "display: none;";}?>">
<table border="0" cellpadding="1" cellspacing="0" align="left" width="575" summary="">
<tr>
<td width="40%" align="left" class="display">*Source of Additional Income:</td>
<td><input name="addIncSource" type="text" size="30" maxlength="25" value="<? echo $_SESSION["addIncSource"]; ?>" /></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>

gusblake
11-18-2009, 08:24 PM
It might be easier to do it all with JS.



<input type="text" name="field1" onkeypress="toggleField(this.value,'field2')">
<input type="text" name="field2" id="field2">




function toggleField(value, id) {
document.getElementById(id).style.display=(value>0)?"block":"none";
}


Edit: just tested that code, if you use it use onkeyup instead of onkeypress (onkeypress toggles based on the value before the key press, onkeyup uses the most recent value)

Philip M
11-18-2009, 08:36 PM
Try this (includes some validation code):-


<form name = "myform">
INCOME <input type = "text" name = "income" id = "income" onblur = "showNextBox()">
<div id = "div1" style="display:none">
NEXT TEXT BOX <input type = "text" name = "nextTextBox" id = "nextTextBox" >
</div>
</form>

<script type = "text/javascript">
function showNextBox() {
var val = parseFloat(document.myform.income.value);
if (!val) {return false}
if ((isNaN(val)) || (val<0)) {
alert ("Please enter a positive numeric value for Income")
document.myform.income.value = "";
document.myform.income.focus();
return false;
}
document.getElementById("div1").style.display="block";
}
</script>

"Of course mistakes are made. Some of them are even accidental". - Spokesman for Royal Mail

s_martin
11-18-2009, 09:19 PM
GUSBLAKE,

Thank you, that seems to work perfectly. I am doing the actual validation with php, so I just needed a way to toggle the second field according to the value in the first.

Sweet.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum