Changing text content depending on button clicked

Question

I am sort of a beginner at this, but my objective is to have the header of my webpage changing, depending on what button was clicked on another page.

More precisely, I have a webpage with 7 buttons on it coded like this:

<form action="contribution.html">
    <input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>

All of the buttons lead to the same "contribution.html" page, but I would like the header of that page to be different depending on what button the user clicked. There must be a way to do this without creating 7 different "contribution.html" pages for each button... I assume.

Can anyone help, please?

Are you planning on using a server sided Language such as PHP? — Odis Harkins, Apr 11 '15 at 19:44
You could use something like JQuery to load new content into the header when the button is clicked. — an earwig, Apr 11 '15 at 19:45
Reason I ask is your question implicates loading another another page based on button clicked, Passing the variable. — Odis Harkins, Apr 11 '15 at 19:51

score 2 · Answer 1 · answered Apr 11 '15 at 19:50

When you do form submission server receives HTTP post request that contains button clicked. Having that request server side can generate proper content of <title> element. Browser will render that text in <title> as a caption of tab/page.

Thus you will need something like PHP or the like on your server. In this case you can have single contribution.php file (but not static html).

score 1 · Answer 2 · answered Apr 11 '15 at 19:42

Using javascript is the easiest solution. If you spend a little time learning jQuery, you could use something like this:

// A reference to your "header" element
var header = $('.header');

// When the submit button is clicked
$('[type=submit]').click(function(){
  // Update the header with the button's text
  header.text( $(this).value() );
});

Though I'd recommend using a more specific selector for the buttons you want this to work for, [type-submit] is too generic but I used it because you did.

I think the OP meant changing the header on `contribution.html`, not the page leading to it. — Matanya, Apr 11 '15 at 20:00

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

Depending on your application and if you want to be SEO Friendly you should look into this answer How to dynamically change a web page's title?

edited May 23 '17 at 10:24

Community

1
1

answered Apr 11 '15 at 19:47

Odis Harkins

292
2
13

Matanya · Accepted Answer · 2015-04-11T20:03:00.637

0

Use a server-side language and <a> tags instead of a form. In PHP it will look something like this:

<a href="/contribution.php?sum=10">10$</a>
<a href="/contribution.php?sum=20">20$</a>
<a href="/contribution.php?sum=30">30$</a>

etc.

Then on contribution.php you can get the request data from $_GET['sum'] and act accordingly.

edited Apr 11 '15 at 20:03

answered Apr 11 '15 at 19:57

Matanya

5,911
7
43
75

Changing text content depending on button clicked

4 Answers4

Linked