Changing text content depending on button clicked

问题

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?

回答1:

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.

回答2:

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).

回答3:

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.

回答4:

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?

来源：https://stackoverflow.com/questions/29582174/changing-text-content-depending-on-button-clicked

标签

html

server-side