Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kelvin Atawura
Front End Web Development Techdegree Student 19,022 Pointssending visitors to another page on clicking on the submit button
is it possible to send a user to another page after clicking on the submit button using jquery?
2 Answers
Thomas McCracken
13,591 Pointswith jQuery you just say either:
$('#buttonID').on('click', function(event) {
event.preventDefault();
window.location = "theNewPage.html"
});
or
$('#buttonID').click( function(event) {
event.preventDefault();
window.location = "theNewPage.html";
});
Like Marcus said you definitely want to say event.preventDefault() on the submit and if your button is nested in other elements you may also want to call event.stopPropagation to prevent the click event from bubbling up the DOM.
But when you say go to another page what I think you want to do is load a new html page in which case jQuery provides a .load method or (just like with a click event) there is the .on('load', event handler) method. Check out the jQuery API for more info: http://api.jquery.com/load-event/.
I don't usually load html pages and things like this with jQuery as <a href="link to newPage.html">...<a/> does this easily. You can style the a tag to appear as a button too so you don't necessarily have to use a submit button to accomplish what you want. Hope this helps, good luck!
Marcus Parsons
15,719 PointsAbsolutely. But, first, let's clarify what you mean by a submit button. Do you mean just a standard button where you've had the words "Submit" wired to it or an actual button that submits data to the server?
If it's just a button (that doesn't have a type of "submit"), then you all need to is load a click event handler for the button that sets the window location to your new page i.e.
//Get button with id of myButton
var myButton = document.getElementById("myButton");
//Add event listener for click event
myButton.addEventListener("click", function () {
// mynewpage.html should be the page you want someone redirected to.
window.location = "mynewpage.html";
}, false);
If we're talking about a button that has a type of submit, whether it is listed as
<button id="myButton" type="submit">Submit</button>
<!-- OR -->
<input type="submit" id="myButton" value="Submit">
You have to prevent the default action of submitting data. All we have to do is add in an extra variable and extra method call to the above code:
//Get button with id of myButton
var myButton = document.getElementById("myButton");
//Add event listener for click event and event variable (can be named to practically anything)
//I used "event" for simplicity's sake
myButton.addEventListener("click", function (event) {
//Prevent the default action of any event, but in this case, stop the form from submitting data
event.preventDefault();
// mynewpage.html should be the page you want someone redirected to.
window.location = "mynewpage.html";
}, false);
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsHey Thomas,
Good response! I edited your answer so that it would render better on the forums. Whenever you post code, you should wrap it in a 3 backtick block like the image below. Also, when you are putting the left and right angle brackets on the forum, they will not render at all unless you post them as their HTML entities such as & lt; and & gt; (no space in between the & symbol and lt/gt).