one of the two buttons should not submit

[james438]

I couldn't think of a good title. Please feel free to rename it if you can think of something better.

I am trying to figure out how to create a form with a submit button and another button inside the form that merely performs a javascript function without doing the form action.

I could do two different forms, but when I do the non-submit button is placed before the form or after the form in some unintuitive place. I was thinking of trying a nested form, but to no surprise that does not work. The non submit button performs the form action just fine, but also performs the form action as well, which I do not want.

Any ideas?

[djr33]

There are a couple ways to fix this:
1. <input type="button"> is the easiest option-- it won't submit. That's just the standard "button" input.
2. <input type="submit" onclick="return false;"> should stop the form from being submitted via javascript-- so if javascript is disabled it WILL submit the form and this may be what you want since your action is javascript anyway (like maybe it's a button to check if the data is correct, so your server side backup will do it, just with a page load).

Those are the simple options anyway. If there is reason to pursue it farther you could try more drastic steps like using CSS to reposition the button somewhere into the form or some other complex way around it, but you shouldn't need that.
Another more advisable but still complex method would be to use javascript on the form itself (onsubmit=....) and check which button was pressed. This might keep the html a little cleaner and could even allow you more options with the buttons (like click one button twice, first time to check, second to submit).

[james438]

I would like to avoid the CSS repositioning if I can. I could do that, but it just sounds like it would be messy. I was not able to get your first two ways to work and tried them before posting. This may be an Opera browser thing.

...I just tested it and it is an Opera browser thing. Is there a way to get <input type="button"> to work with Opera (my browser of choice)? or how would I do your last suggestion where I check to see which button was pushed?

[djr33]

I'm not exactly sure about the most efficient way to check which button was pressed, so you may want to look that up. I'm not sure why opera isn't working, but of course you will want to be sure there is a valid input, so you might want to add name="" and/or id="" and perhaps a value. I think "button" is a valid type of input across browsers, so it may be something else related to opera. Perhaps return false; isn't working.

[james438]

It got somewhat frustrating. I tried many different things, but could not get the button to execute a function without also submitting the form unless it was outside the form entirely. I couldn't close the form and create the button and then recreate the form either. I went the CSS route and repositioned the button. I'll probably tweak it till I get it exactly where I originally intended it, but I need to take a bit of a break for now.

return false; appears to work fine every way I tried it. It is good to finally be getting my feet wet with javascript though.

[djr33]

Ah, I just realized something-- you don't need a form input. Maybe this will help:
<button>Some text here</button>
Regardless, glad it's working (somehow)

[james438]

After your last post I decided to give your suggestion a try as well as the other things I had tried. I don't know what happened, but it all works now.

<input type="button" onclick="newi();return false;">newer image</button> //works
<button onclick="newi();return false;">newer image</button> // works
<input type="button" onclick="newi();">newer image</button> // when placed outside the form works 

I know it didn't before, because I tested it many times earlier and in ie8 and it would not work in Opera even though it did in ie8. All I can say is that after taking a break from Opera my browser crashed and I restarted it and decided to try some late night scripting and the code that was not working before now works. Kinda frustrating earlier, but I am just glad it all works now and I don't have to use CSS to get it to work.