Jump to content

Change HTML content by dropbox


Andy17

Recommended Posts

Hey guys,

 

I have this script where one dropbox (sel1) changes the content of another dropbox (sel2), plus HTML content. I was wondering if anyone could please help me adjusting this to just changing HTML content from one dropbox? Like the HTML changes depending on what the user selected in the dropdown box. Here is the JavaScript part:

 

<script type="text/JavaScript">

<!--

var categoryAry = new Array("Jokes", "Pictures", "Poems", "Videos");
var subCatAry = new Array ();
subCatAry['Jokes']  = new Array('Adult', 'Alcohol', 'Bar', 'Blonde', 'Brunette', 'Classic', 'Men', 'Sports', 'Women');
subCatAry['Pictures'] = new Array('Alcohol', 'Animals', 'Babies', 'Genders', 'Sports');
subCatAry['Poems']  = new Array('Fun & Humor', 'Friendship', 'Life', 'Love & Romance', 'Nature', 'Sadness');
subCatAry['Videos'] = new Array('Alcohol', 'Animals', 'Babies', 'Genders', 'Sports');

function changeCategoryOptions()
{
  sel1Obj = document.getElementById('sel1');
  changeOptions(sel1Obj, categoryAry);
  changeSubCatOptions(sel1Obj);
}

function changeSubCatOptions(sel1Obj)
{
  changeOptions(document.getElementById('sel2'), subCatAry[sel1Obj.value]);

  for (var i=0; i<categoryAry.length; i++)
  {
    if (inputDiv = document.getElementById(categoryAry[i]+'_Input'))
    {
      inputDiv.style.display = (categoryAry[i]==sel1Obj.value)?'inline':'none';
    }
  }
}

function changeOptions(fieldObj, valuesAry)
{
  fieldObj.options.length = 0;

  for (var i=0; i<valuesAry.length; i++)
  {
    fieldObj.options[i] = new Option(valuesAry[i], valuesAry[i]);
  }
}
//-->

</script>

 

And the HTML part:

 

<body onload="changeCategoryOptions();";>

<form name="sform" method="post">

Category: <br>
<select name="sel1" id="sel1" tabindex="1" onchange="changeSubCatOptions(this);"></select>

<br><br>

Sub-category: <br>
<select name="sel2" tabindex="2" id="sel2"></select>

<br><br>

<div id="Jokes_Input">
Joke Title: <br><input type="text" name="joketitle" tabindex="3" maxlength="35" size="24"<br><br>
Joke Text: <br><textarea name="joketext" tabindex="4" maxlength="1500" style="width: 400px; height: 200px;"></textarea>
</div>

<div id="Pictures_Input">
Picture Title: <br><input type="text" name="picturetitle" tabindex="3" maxlength="35" size="24"><br><br>
Picture URL: <br><input type="text" name="pictureurl" tabindex="4" maxlength="100" size="40">
</div>

<div id="Poems_Input">
Author: <br><input type="text" name="author" maxlength="35" tabindex="3" size="24" value="Unknown"><br><br>
Poem Title: <br><input type="text" name="poemtitle" maxlength="35" tabindex="4" size="24"><br><br>
Poem Text: <br><textarea name="poemtext" style="width: 400px; height: 200px;"></textarea>
</div>

<div id="Videos_Input">
Video Title: <br><input type="text" name="videotitle" maxlength="35" tabindex="3" size="24"><br><br>
Video code: <br><textarea name="videocode" tabindex="4" style="width: 400px; height: 200px;"></textarea>
</div>

<br><br>

<input type="submit" value="Submit"> 

</form>

 

Thanks A LOT in advance! :)

Link to comment
https://forums.phpfreaks.com/topic/128022-change-html-content-by-dropbox/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.