0

I am working on a website and am planning on having it so that certain links will have a value set, this will change what container is displayed when the page loads. How would I have it so the link passes a value that would be used for the onload functions?

Here is a mockup of my HTML code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lunch</title>
        <link rel="stylesheet" type="text/css" href="style.css">
                <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="script.js"></script>
    </head>
<body onload="navBar(); dateChange(); tabulate(0);">
    <nav>
        <ul>
            <li><a href="appy.html">Appitizers</a></li>
            <li><a href="break.html">Breakfast</a></li>
            <li><a href="lunch.html">Lunch</a></li>
            <li><a href="dinner.html">Dinner</a></li>
            <li><a href="dessert.html">Dessert</a></li>
            <li><a href="special.html">Ten-Course Dinner</a></li>
            <li><a href="share.html">Send in your Recipes!</a></li>
        </ul>
    </nav>
    <div class="main">
    <div class="box">
        <ul>
            <li><a onclick="tabulate(this.id);" id="1">Chicken Clubhouse Sandwiches</a></li>
            <li><a onclick="tabulate(this.id);" id="2">Smokey Tomato Soup</a></li>
        </ul>
    </div>

    <div id="0" class="recipe" style="display: block;">
        <div class="tabs">
            <a class="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        </div>
        <div class="page">
            <p>The recipes you'll find here are ones you can use to impress guests at your next get together</p>
        </div>
    </div> <!--recipe card end-->
    <div class="recipe" id="1">
        <h1>Chicken Clubhouse Sandwiches</h1>
    </div> <!--recipe card end-->   
    <div class="recipe" id="2">
        <h1>Smokey Tomato Soup</h1>
    </div> <!--recipe card end-->

    </div>
</body>
</html>

And here is my tabulate function:

function tabulate(tabNum){
$('.recipe').each(function() {
    if(tabNum==this.id){
        this.style.display="block";
    }
    else{
        this.style.display="none";
    }
});

}
Jessica P
  • 37
  • 9

2 Answers2

1

You would need to make use of the URL's GET parameters:

lunch.html?item=2

In conjunction with passing the variable into the JavaScript function:

// Set up an object for GET parameter
var $_GET = {};

// Find and extract the various GET parameters
if(document.location.toString().indexOf('?') !== -1) {
    var query = document.location.toString().replace(/^.*?\?/, '').replace(/#.*$/, '').split('&');
    for(var i=0, l=query.length; i<l; i++) {
       var aux = decodeURIComponent(query[i]).split('=');
       $_GET[aux[0]] = aux[1];
    }
}

// Target a specific get parameter, given the GET parameter name
var tabNum = $_GET['item']; // Comes through as '2' in this example

// Pass the parameter into the function
function tabulate(tabNum){
  $('.recipe').each(function() {
    if(tabNum==this.id){
        this.style.display="block";
    }
    else{
        this.style.display="none";
    }
  });
}

See this post and this post for further reference.

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • This helped a lot! However, I didn't need the $_GET portion, I instead assigned aux[1] to tabNum directly. – Jessica P Jun 13 '17 at 22:18
  • It depends on how many parameters you pass through in GET, but yes, that will work if there is only one parameter. Glad to hear it helped you :) – Obsidian Age Jun 13 '17 at 22:24
  • That's perhaps my bad. I simply called a **JavaScript** variable `$_GET`. You can call it anything, even 'thing', and it will work the same. I just used `$_GET` to symbolise that it will return essentially the same thing as PHP would. The above script doesn't rely on PHP at all -- only JavaScript. If you're using PHP as well, there **may** be some sort of conflict, so it may be worth changing the variable name. – Obsidian Age Jun 14 '17 at 01:30
  • It seems that it might have something to do with the site. I will ask there and see what could be the issue – Jessica P Jun 14 '17 at 01:45
0

I haven't tested this, but you should be able to get by with passing a GET variable via PHP into tabulate(), in a way like this:

function tabulate(tabNum){
    $('.recipe').each(function() {
        if(tabNum==this.id){
            this.style.display="block";
        }
        else{
            this.style.display="none";
        }
    });
}
window.addEventListener('DOMContentLoaded', function(evt) {
    var id = <?php echo htmlspecialchars($_GET['id'], ENT_COMPAT, 'utf8'); ?>;
    tabulate(id);
});
hRdCoder
  • 579
  • 7
  • 30