Javascript Help Please - Show/Hide Divs based on TEXT input

[mmh]

Basically, i have a form which needs to show/hide and change names upon input of various selections from other forms within the page.

so some are dropdowns and some are text variables.

how do i do this?

i get the logic involved, i.e.
IF
[fieldname]>0
then show div
Else
dont show div
End If

How would i get this to work with javascript?

say the fieldname is B4

where would i put the javascript to read the form input in order to show the div?

I've never really been big on client side varification, but im writing something currently that needs it and all the info i can find on the web relates to dropdowns, which i will be needing, but the text input is more important at the minute.

Thanks In Advance

Ste

[mmh]

function checkform ( form )
{
  if (int(form.B4.value) > 0) {
    document.getElementById("B5div").style.visibility = 'visible';
    document.getElementById("B6div").style.visibility = 'visible';
	alert("check");
    return false ;
  }
  if (form.B6.value > 0) {
    div.B7.style.visibility = 'visible'
    return false ;
  }
  // ** END **
  return true ;
}

what i have so far, but is not working

it is being called by

<form onchange="return checkform(this);">

any ideas?

the alert is there to show me when it works, or if it gets that far, which it isnt, nor are the divs showing up

[mmh]

Right, incase anyone wondered... it seems:

you will not able to make it visible again cause 'getElementById("")' will fail to find out the 'id' of hidden control, therefore, display = "none" and display = "" must be used as opposed to visibility = "hidden" and visibility = "visible".

its now working (somewhat... needs tweaking)

[tiggerai]

it shouldn't make a difference whether the id is hidden or not as the code is still in the page to be manipulated.

display will also hide the whole element (e.g closing up the space) but visibility only hides it (doesn't close up space on the page)

Where in your code are you hiding the div too? I can only see you making it visible.

[mmh]

sorry, its being hidden at the div:

		<div class="clear" style="display:none;" id="B5div">
			<span class="question">Is withdrawal based on fund value? Y/N</span>
			<span class="answer">
				<select name="B5">
					<option value="y">Yes</option>
					<option value="n">No</option>
				</select>
			</span>
		</div>

the problem i now seem to be having is that its reading the first part of the function:

function checkform ( form )
{
  if (form.B4.value > 0) {
    document.getElementById("B5div").style.display = "";
    document.getElementById("B6div").style.display = "";
	return;
  }{
    document.getElementById("B5div").style.display = "none";
    document.getElementById("B6div").style.display = "none";
	return;
  }

but it misses this next part totally, i think its because its being returned, but im not sure how to make it work through the checks, as this list will become quite long by the time i have programmed all the checks.

  if (form.B6.value > 0) {
    document.getElementById("B7div").style.display = "";
	return;
  }{
    document.getElementById("B7div").style.display = "none";
	return;
 }
 return false;
}

without returning, the page does not update and i am left with too little form inputs.

I realise that visibility sets the form with the space missing where the form will be and it gets filled in when visible, but that really doesnt concern me, it doesnt need the space there if the functionality is there.

[tiggerai]

try changing the display ="" to display ="block"

It should update without the returns, as mine does!

I know it can be done other ways, but shouldn't there be an else after the first if statement?

*** just checking this one out locally...***

[mmh]

haha, you beautiful tiggrrraaaiiii

spot on

i had missed out "else" totally.... (not using javascript much - if at all - i totally forgot to put else in the code, hence why it wasnt working properley... its working spot on now)

thanks

[tiggerai]

DOM manipulation can be a black art sometimes... only really been using it recently myself...

a programming background does come in handy sometimes!

My pleasure, happy to have been some help for once

I can recommend the Javascript book from O'Reilly too (got a rhino on the front) it's straight forward and explains things properly.

[mmh]

my collegue has the o'reilly javascript book, but alas, it is not in the office today, nor is he!

I do have a programming background, hence why i got the logic, but my primary problem is that i work mainly in asp with vb script as the languange, whereas javascript in my experience is more similar to C code, which i have only scratched the surface of

[tiggerai]

my collegue has the o'reilly javascript book, but alas, it is not in the office today, nor is he!

I do have a programming background, hence why i got the logic, but my primary problem is that i work mainly in asp with vb script as the languange, whereas javascript in my experience is more similar to C code, which i have only scratched the surface of

Java is my background... but I tend to think of javascript functions as little classes.

I failed my C module, so it can't be that! I suppose just having a very logical brain helps (I have no creativity... but give me a problem to solve and I can usually do it)

[mmh]

hehe, i also have no creativity, which is why i get projects like the one i am on... im just currently doing the easy bit with the javascript, trying to sort out the inputs so as the client side shows the correct inputs to pass to the next page which took me a while to get my head around...

the next page collects the data from the input form, sanitizes it, then copies a template excel file with some very complex formulas in it, inputs the passed data into selected fields in the excel file, opens said excel file and calculates all the formulae, then reads out selected pieces of information from the excel sheet and displays it on the page whilst deleting the excel file and (hopefully) eradicating any running instances of excel from the server to stop it getting bogged down.

as you can imagine, having never dealt with connecting to excel files (fairly easy, just sql connection) and then having to find out how to run the excel file - a little more difficult as its not very well documented on the net for classic asp) and then pulling out the correct data....

this whole project has given me a major headache, and im only about 50% of the way through

[tiggerai]

I've just been having some fun with Javascript to flash and back again...

Dynamically changing the text in flash using javascript... havning not really scripted in javascript before then doing DOM manipulation similar to what you're doing above, to show / hide divs dependent on which flash file is showing...

I'm quite proud of it actually!

[yamangman]

//jquery alt
$(document).ready( function() {
  var my_val = 0;
  $('#my_form').change( function() {
    if ($('#my_form_input').val() [==][!=][...] my_val) {
      $('#my_div').hide();
      $('#my_other_div').show();
    }
  });
});

/*you could also re-fire code from external DOM sources too which could be handy in your case*/
$(document).ready( function() {
  $('#my_ext_button').click( function() {
    $('#my_form').trigger('change');
  });
)};