/    Sign up×
Community /Pin to ProfileBookmark

Need Javascript drop-down assistance…

Copy linkTweet thisAlerts:
Dec 01.2004

This to me seemed simple, but it hasn’t worked. Currently all it’s doing is when an option is changed in the drop-down menu, it writes “Stipulations” on another page. I can’t get it to find the correct name from the drop-down and then relay it to match the call names at the placeholder Options. Like I said, it seems simple but it’s frustrating the hell out of me, LoL. Thanks for any help given.

Here is what I want instead of the crap I’ve done so far, LoL:
Where 1st Option is, I need “Stipulations” to appear if “Match” is selected in the drop-down menu.
If either “Angle” or “Interview” is selected, I need “Settings” to appear where 1st Option is.
Where 2nd Option is, I need “Outcome” to appear if “Match” is selected in the drop-down menu.
If either “Angle” or “Interview” is selected, I need “Reason” to appear where 2nd Option is.

Here is what I’ve done:
[java.js]
function getMatch() {
if (!document.write)
return
var reason;
reason = “Stipulations”;
document.write(reason);
}

[dirtsheet2.html – header]
<select name=”select” class=”optional” id=”select” onChange=”getMatch();”>
<option selected>What type of segment?</option>
<option name=”Angle”>Angle</option>
<option name=”Interview”>Interview</option>
<option name=”Match”>Match</option></select>

[dirtsheet2.html – body]
<a name=”stips” id=”stips”>1st Option</a>
<a name=”outcome” id=”outcome”>2nd Option</a>

Here are the files if you want to take a gander and see what my jibberish means, LoL…
[url]http://www.pwfzone.com/jabroni/dirtsheet2.html[/url]
[url]http://www.pwfzone.com/jabroni/java.js[/url]

I guess I want a specific thing written to the current page realtime. Depending on the option you select, it writes over the option spots on the page with the appropriate text. Please let me know if my rambling does not make any sense and I will try and explain it a little better. If you want to, you can IM me or email me for more quick responses. I would appreciate any help or advice given. As you can probably tell, I am a newbie slowly learning javascript and all I’ve done so far are little one-line scripts.

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorDec 02.2004 — Detail please... You want to write something on the same page? Or open another page with that wortds written (what use? ). If so, the new page should be open blank or self?
Copy linkTweet thisAlerts:
@thegametbauthorDec 02.2004 — If I'm not mistaken, currently I have it where it opens a new window, which I DON'T want. Where the placeholders Option 1 and Option 2, I want the information to be dropped in to those spots of the table in realtime. I don't want new pages or anything, because when finalized, every little segment will have that inserted at the top. The thing is I don't know if having that write or print to the web page would work without a textbox displayed. If that were the case, I could just create a textbox that basically looks nearly invisible unless you tabulate your way down to the bottom or click on the text. To me or when I thought it up, it didn't seem that hard to do. LoL, I regret ever saying that! Thanks for any help! While I wait for help though, I'm going to take a look at the vbcode used for the text buttons (bold, italic, font size, font face, etc.) and see if that helps me any.
Copy linkTweet thisAlerts:
@Warren86Dec 02.2004 — <HTML>

<Head>

<Script Language=JavaScript>

function getMatch(isVal){

switch(isVal)
{
case(isVal = "1"):
document.getElementById('stips').innerText = "Settings";
document.getElementById('outcome').innerText = "Reason"
break
case(isVal = "2"):
document.getElementById('stips').innerText = "Settings";
document.getElementById('outcome').innerText = "Reason"
break
case(isVal = "3"):
document.getElementById('stips').innerText = "Stipulations";
document.getElementById('outcome').innerText = "Outcome"
break
}
}

</Script>

</Head>

<Body>

<select name="select" onChange="getMatch(this.value)">

<option selected value=null>What type of segment?</option>

<option value="1">Angle</option>

<option value="2">Interview</option>

<option value="3">Match</option>

</select>

<br>

<Table cellspacing='0' style='border:solid black 1px;font-size:14pt;width:200px;height:24pt'>

<TR>

<TD align='center' id='stips' style='border-right:solid black 1px'></TD>&nbsp<TD align='center' id='outcome'></TD>

</TR>

</Table>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@thegametbauthorDec 02.2004 — Dude, you rock! That was really worth the wait. When I get home later, I'll post the final product. Thanks a lot!
Copy linkTweet thisAlerts:
@Warren86Dec 02.2004 — You're welcome. Good luck with your project.
Copy linkTweet thisAlerts:
@KorDec 02.2004 — I dare to insert some notes:

  • 1. innerText is a IE only method. Moz&NS users will see nothing.

  • 2. &nbsp between rows is not quite an orthodox HTML coding

  • 4. there is no need to overload script with options values or cells id's, selectedIndex value and loop through childs will do the job:

  • 5. [b]type[/b] is a w3c present and, for future I believe, the unique way to mark the javascript as a script code, not [b]language[/b]. You may use for safety both


    • So, I strongly advice you, thegametb, to use this DOM crossbrowser solution:
    [code=php]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script language="JavaScript" type="text/JavaScript">
    var txt= new Array()
    txt[0] = ['','']
    txt[1] = ['Settings','Reason']
    txt[2] = ['Settings','Reason']
    txt[3] = ['Stipulations','Outcome']
    function getMatch(s){
    var roots = document.getElementById('tab').getElementsByTagName('td');
    for(var i=0;i<roots.length;i++){
    while(roots[i].hasChildNodes()){
    roots[i].removeChild(roots[i].childNodes[0])
    }
    var oTxt = document.createTextNode(txt[s][i]);
    roots[i].appendChild(oTxt)
    }
    }
    </script>
    </head>
    <body>
    <select name="select" onchange="getMatch(this.selectedIndex)">
    <option selected>What type of segment?</option>
    <option>Angle</option>
    <option>Interview</option>
    <option>Match</option>
    </select>
    <table id="tab" style="border:solid black 1px;font-size:14pt;width:200px;height:24pt">
    <tbody>
    <tr>
    <td align="center" style="border-right:solid black 1px"></td>
    <td align="center"></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    [/code]
    Copy linkTweet thisAlerts:
    @thegametbauthorDec 02.2004 — I haven't used the second yet, but the first works fine. Granted I'm on IE, but this is for personal use and not really online publiishing. I will have it online in a backdoor directory to just let friends use the format if they want to and none of them are really techie enough to use different browsers other than IE or IE plugin browsers. I will though make a mirror copy using the second javascript to see if I can tweak the coding to fit my needs. I have to tweak the id and names because this'll be inserted in to a preset table and I'd have to use unique names so the HTML doesn't get confused. As for the first one, I finished the finalized product here if anyone cares to look...

    [URL=http://www.pwfzone.com/booking/]booking sheet[/URL]

    [URL=http://www.pwfzone.com/booking/java.js]javascript external file[/URL]

    I think it turned out well and I just lowered the pixels for the header text so it would still fit 7 segments on page-1 with the remaining 3 segments on page-2, which if needed would be printed on the back. Thanks for all this help and advice given here. It will all be put in to good use.
    Copy linkTweet thisAlerts:
    @KorDec 03.2004 — As you wish.
    ×

    Success!

    Help @thegametb spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...