changing type

changing an input from hidden to text

Page 1 of 1

6 Replies - 1551 Views - Last Post: 06 March 2006 - 08:42 PM

#1 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 14
  • View blog
  • Posts: 602
  • Joined: 18-January 06

changing type

Posted 06 March 2006 - 09:44 AM

Ok the last one was kind of hard. How about this one?

How can I change the type for an element, depending on a condition

ie: if (variable1<1) the input field "one" would be hidden otherwise it would be a visible text field?
Is This A Good Question/Topic? 0
  • +

Replies To: changing type

#2 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: changing type

Posted 06 March 2006 - 10:43 AM

thats been talked about here a little. http://forums.dreami...wtopic14977.htm However the thing you need to do different is change the CSS style of the element to none, inline, or block depending on if it's visible and what kind of HTML tag it is.
Was This Post Helpful? 0
  • +
  • -

#3 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 14
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Re: changing type

Posted 06 March 2006 - 12:04 PM

I saw that, but they're not using php on the file that I'm working on.
Was This Post Helpful? 0
  • +
  • -

#4 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: changing type

Posted 06 March 2006 - 01:06 PM

PHP has nothing to do with HTML other then the fact you can use PHP to output HTML. Case in point, my PHPWinamp concept script.

The point I'm trying to make is that you can take out the PHP from gayatri's stuff, put it into any HTML, and if it's error free javascript, it will run.
Was This Post Helpful? 0
  • +
  • -

#5 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 14
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Re: changing type

Posted 06 March 2006 - 02:19 PM

Yea I'm an idiot. lol... i apparently don't understand the syntax of this quite yet. What about something like this?

<script language=Javascript>

function myfunction()

if (document.frm.test.value=="0")
{
document.write("Test Box:<input type=text>")
}

</script>

<form>
<SELECT name="test" onchange=myfunction()>
<OPTION value="0" selected>0</OPTION>
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
</select>

Was This Post Helpful? 0
  • +
  • -

#6 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: changing type

Posted 06 March 2006 - 02:46 PM

You forgot the opening and closing brackets for the function and the semi-colon at the end of the document.write...but yes, that is the general syntax.
Was This Post Helpful? 0
  • +
  • -

#7 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: changing type

Posted 06 March 2006 - 08:42 PM

Based on your last post, what you're looking for is something like this:

A text input box where its visibility is derived from the current value of a <select> box. In this example, if you choose a color with varying shades as your favorite, then you'll be presented with a box asking which shade; if you choose any color that's absolute, such as black or white, or a non-color option, this extra input area will not appear and if it has already appeared it will disappear. Resetting the form will also make it disappear as the <select> option returns to default.

It should also be noted that the appearance of the extra input box will cause all elements below it to move downward. If you want to leave a blank space where the box should go so that the elements on the page remain static, you should change all instances (4) of "display" to "visibility" (except "favShadeDisplay"); all instances (1) of "block" to "visible"; and all instances (3) of "none" to "hidden" in both the script and form.

Hope this helps.

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

if (colorValue >= 1 && colorValue <= 8) {
  document.getElementById('favShade').style.display = 'block';
  }
else if (colorValue = 0 && colorValue >= 9) {
  document.getElementById('favShade').style.display = 'none';
  }
else {
  document.getElementById('favShade').style.display = 'none';
  }

}
</script>

<form>

<div style="margin: 5px;">
What is your favorite color?
<select id='favColor' onchange="favShadeDisplay(document.getElementById('favColor').value);">
<option value='0'>Please Select</option>
<option value='1'>Blue</option>
<option value='2'>Green</option>
<option value='3'>Orange</option>
<option value='4'>Red</option>
<option value='5'>Violet</option>
<option value='6'>Yellow</option>
<option value='7'>Brown</option>
<option value='8'>Gray</option>
<option value='9'>Black</option>
<option value='10'>White</option>
</select>
</div>

<div id='favShade' style="margin: 5px; display: none;">
What shade of this color? <input type="text"/>
</div>

<div style="margin: 5px;">
<input type="submit" value="Submit Data"> 
<input type="reset" value="Reset Form" onclick="favShadeDisplay(0);">
</div>

</form>

For more information, I derived my code from here

Tested with XHTML 1.1 in Firefox 1.5 and Internet Explorer 6 SP2.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1