CODEWITHSUNDEEP
javascriptjquery
user2460718
user2460718

Reputation: 55

Load different html page on button click

I want to load different html page at button click Here is my main page code

<body>

<div id="header">    
<div id="radio">
  <input type="radio" id="navmenu1" name="radio"><label for="navmenu1">Home</label>
  <input type="radio" id="navmenu2" name="radio"><label for="navmenu2">Contact</label>
  <input type="radio" id="navmenu3" name="radio"><label for="navmenu3">Resume</label>
</div>

</div><!--head-->

<div id="content-area">
<div id="content"></div>    
</div>

<div id="footer-row">
  <footer>
     <div id="footer-row-1">
        <ul id="footer">
            <li>&copy 2013 by Han Chang</li>
        </ul>
    </div>
    <div id="footer-row-2">        
    </div>
</footer>
</div>

</body>

my home.js code as below

$(function () {
$("#radio").buttonset();   
$("#radio :radio").click(function (e) {
    var $val = $("#" + $(this).attr("for")).val();
    alert($val);
});

I want to know which button I choose, then load its html page. How can I do this ? Thank you

Upvotes: 0

Views: 8613

Answers (6)

Karo
Karo

Reputation: 744

To get the value of the radio button, you need to have a value attribute.

http://jsfiddle.net/TpmTt/

then, you can check and redirect the user using window.location, window.navigate

Upvotes: 0

ZSH
ZSH

Reputation: 661

You can use jquery template plugin or get html by jquery and httphandler

Upvotes: 0

user1588572
user1588572

Reputation: 83

You can load new HTML into your page using AJAX. You could have a set page of HTML and load it into your page.

Upvotes: 0

ArrayKnight
ArrayKnight

Reputation: 7356

You can use window.location. Assuming the input/anchor/button has the context to create the desired url.

window.location = 'http://your.url.com'

Upvotes: 1

bbill
bbill

Reputation: 2304

Now that you have the value, you can add the logic, for example:

if (val === "Option 1") {
    // Action here
}

It sounds like you want to change some content on the page, which is a simple JQuery function:

$("body").replaceWith(//HTML here);

More info on that function: http://api.jquery.com/replaceWith/

So the complete example would be something like:

if (val === "Option 1") {
    $("body).replaceWith("<body><h2>Option 1</h2></body>");
}

or whatever you fancy.

Upvotes: 0

taylorc93
taylorc93

Reputation: 3716

Use the onclick event for each button to call a js function. 

<input type="radio" id="navmenu1" name="radio" onclick="someFunction()"><label for="navmenu1">Home</label>

You could send in a string or something to that function to determine which button was clicked. The function that you call can redirect to a different html page by using window.location

Upvotes: 0

Related Questions