/    Sign up×
Community /Pin to ProfileBookmark

Chained Select + Show Hidden DIV

Copy linkTweet thisAlerts:
Jan 31.2006

Hi Everyone,

I am building a little Music Charts script and what I am wanting to do is to allow for the charts to be added in (from an admin page) the following way.

1.a Artists Listed from pulldown list

2.a If Artist exists select and go to 3a.
2.b If Artist does not exist select “ADD ARTIST” then show a text field to enter artist name. Go to 3.c.

3.a If Artist existed list all the Previously entered songs in a pulldown.
3.b If song doesnt exist then select “ADD SONG” then show text field to enter song title.
3.c If Artist didnt exist then assume song doesnt either and only show “ADD SONG” so text field shows to enter song title

So there are 3 scenarios

  • 1. Existing Artist > Existing Song

  • 2. Existing Artist > New Song

  • 3. New Artist > New Song

    • I will be using PHP in the backend to populate the Javascript but need some help with this. Is there a way to have a pulldown that has a “IF “ADD ARTIST” SELECTED SHOW DIV.

    Chris

    to post a comment
    JavaScript

    1 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @bathurst_guyJan 31.2006 — Ok, this is a simple yet complicated task. The simple part is the hide and show of the fields, the hard part is the population of the select boxes using JavaScript. I have this code that I use on a website to populate car Makes and Models, so when they choose a Make for example, Nissan, it uses AJAX to run a query on the server and return all Models that have the makeid of Nissan. Ive adapted it a bit and changes Makes to Artists and Models to Songs.

    A couple of things this scripting requires. Your database is set up like so:

    table | field | field:

    artists | id | name

    song | id | artistid | name

    Then you need to tweak this script for your page:[code=php]<script language="text/javascript">
    <!--
    function update(which, option){
    if(option.value=="add"){
    show(which);
    }else{
    fetchSongs(option);
    }
    }
    function show(which){
    document.getElementById("addartist").style.display = 'none';
    document.getElementById("songtitles").style.display = 'none';
    document.getElementById("addsong").style.display = 'none';
    if(which)
    document.getElementById(which).style.display = 'block';
    }
    function fetchSongs(artist) {
    /* Set up the request */
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open('POST', 'getsongs.php', true);
    /* The callback function */
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
    if (xmlhttp.status == 200){
    var song = xmlhttp.responseXML.getElementsByTagName('song');
    var id = xmlhttp.responseXML.getElementsByTagName('songid');

    oldLength = document.getElementById("songtitles").length;
    for (i = oldLength; i >= 0; i--)
    document.getElementById("songtitles").options[i] = null;

    for($i=0; $i <= song.length;$i++){
    var opts = song[$i].firstChild.data;
    var vals = id[$i].firstChild.data;
    document.getElementById("songtitles").options[$i] = new Option(opts,vals);
    }
    }
    }
    }
    /* Send the POST request */
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send('artistid=' + artist.value);
    }
    //-->
    </script>
    <select name="artist" onChange="update(addartist, this);">
    <option value="add">--Add New Artist--</option>
    #populate other options using a php for loop
    </select>
    <input type="text" name="addartist" id="addartist">
    <select name="songtitles" onChange="update(addsong, this);" id="songtitles">
    <option value="add">--Add New Song--</option>
    #populate other options using a php for loop
    </select>
    <input type="text" name="addsong" id="addsong">
    <input type="submit" name="submit" value="Continue">
    <script type="text/javascript">
    <!--
    show();
    //-->
    </script>[/code]    AND you will also have to create a seperate file named getsongs.php that is similar to this[code=php]// Connect to the db

    header('Content-type: text/xml');

    $artistid = $_POST['artistid'];

    $sql = mysql_query("SELECT * FROM songs WHERE artistid = $artistid");

    ?>
    <xmlresponse>
    <?
    for($i=0; $i<mysql_num_rows($sql);$i++){
    $song = mysql_fetch_array($sql);
    echo "<song>".$song['name']."</song><songid>".$song['id']."</songid>n";
    }
    mysql_close();
    ?>
    </xmlresponse>[/code]    Hope I've helped and not just confused you
    ×

    Success!

    Help @chrislive 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 5.19,
    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: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

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