0

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages. Below is my code

<form action="MyPage">
    <button type="submit" value="More Options">
</form>

redirect to an other page.What I can do?

Frank Visaggio
  • 3,642
  • 9
  • 34
  • 71
F.N.B
  • 1,539
  • 6
  • 23
  • 39
  • 2
    First of all, spell `button` right. Then, you can use JavaScript to insert more contents into your HTML. – Raptor May 20 '14 at 02:48
  • What kind of options? – Seth May 20 '14 at 02:53
  • the options are over the plot (example, plot a mid-point) and different format to download the data of the plot. In general, the kind of options are float – F.N.B May 20 '14 at 02:59
  • you should check this SO. will help you understand why not to use `type="submit"`. http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use – Kheema Pandey May 20 '14 at 03:00

2 Answers2

1

First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!

<form action="MyPage">
    <button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>

<script type="text/javascript">
function addMoreStuff(button) {
    /* your code here */
}
</script>
-1

Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.

HTML

<button type="submit" value="More Options" id="more">

JavaScript (jQuery)

// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)

function add_options() {
    //code here to add more options
}
T0xicCode
  • 4,583
  • 2
  • 37
  • 50
  • I put this in my code, but don't work.... I don't know you understand my. What I need is similar to button `add comment` of this page. When you click here, you have a texbox.... Thanks – F.N.B May 20 '14 at 11:37