Simplest way to create a submit button with html and js?

Question

The main trouble with inputs is that you can't use either :before or :after. I have to match the CSS of my input buttons with other s and it's almost impossible to do with just css.

I was thinking it would be a lot easier to use a simple with an onclick="" attribute that functions as a submit button but I'm not sure if this is a good or bad idea. For example I was thinking a used as an input might be perceived as something bad by SEO or browsers on the other hand I'm submitting forms with javascript every day.

Would using elements like for submit buttons not be recommended?

Also how do I tell JS to submit the form around the div so I can create one snippet that works on all forms? Would this work?

<div onclick="this.submit()"></div>

What if you use <button type="submit">Click</button>?

Ron van der Heijden
– Ron van der Heijden

2012-11-22 07:55:21 +00:00
Commented Nov 22, 2012 at 7:55 — Ron van der Heijden
– Ron van der Heijden, Commented Nov 22, 2012 at 7:55

Teemu · Accepted Answer · 2012-11-22 09:48:51Z

2

If you don't want to use jQuery, this does the trick with pure JS:

HTML:

<div onclick="submitButton(this)"></div>

script:

function submitButton (element) {
    while(element.parentElement !== document.body) {
        if (element.parentElement.tagName.toLowerCase() === 'form') {
            element.parentElement.submit();
            return;
        } else {
            element = element.parentElement;
        }
    }
    return;
}

edited Nov 22, 2012 at 9:48

answered Nov 22, 2012 at 8:27

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rink.attendant.6 · Accepted Answer · 2012-11-22 08:12:00Z

1

There is also <button type='submit'>Submit</button>, I'm not sure whether that works with CSS :before and :after. You should look into jQuery if you want to do more powerful things with JavaScript, it seems perfect for your situation here.

answered Nov 22, 2012 at 8:12

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

3 Comments

lisovaccaro Over a year ago

I'm really liking this solution. I had never heard about the button tag. Is it going to be deprecated or is not supported across al browsers? It seems a little redundant since it's the same as the input type="submit"

lisovaccaro Over a year ago

From W3schools:

Note: If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.

What is this suppose to mean?

rink.attendant.6 Over a year ago

W3Schools is inaccurate (see w3fools.com). The <button> element is completely fine as long as you include the type attribute like I did there. The element is not going to be deprecated, as it is included in HTML5. developer.mozilla.org/en-US/docs/HTML/Element/button

Talha · Accepted Answer · 2012-11-22 07:57:12Z

1

 <div onclick="document.forms[0].submit();"></div>

answered Nov 22, 2012 at 7:57

Talha

19.3k8 gold badges53 silver badges66 bronze badges

1 Comment

mtk Over a year ago

Will be exact answer for limited scenario. What if there are different forms?

HMR · Accepted Answer · 2012-11-22 08:03:02Z

1

Also how do I tell JS to submit the form around the div so I can create one snippet that works on all forms? Would this work?

this.parentNode.submit();

The other stuff I don't know. You would like to not use JavaScript at all and only use css :before and :after to insert content but button and input or button type submit don't have those css properties?

answered Nov 22, 2012 at 8:03

HMR

39.5k26 gold badges99 silver badges175 bronze badges

2 Comments

lisovaccaro Over a year ago

yeah, I'd rather just use an input type="submit" but they don't have those properties only elements with opening and closing tags do

HMR Over a year ago

Not sure if there is such a thing as button type submit. They have opening and closing tags.

mjimcua · Accepted Answer · 2012-11-22 08:25:20Z

1

jQuery submit method could be useful to you:

$('element').onclick(function(){
$('form:first').submit();
});

http://api.jquery.com/submit/

answered Nov 22, 2012 at 8:25

mjimcua

2,7993 gold badges30 silver badges48 bronze badges

Comments

Bruno · Accepted Answer · 2012-11-22 09:40:26Z

1

You can use

<div onclick="document.myform.submit()"></div>

If your div is a child of the form element you can use

 <div onclick="this.parentNode.submit()"></div>

However, you could also use a framework like jQuery to handle the submit

$('#divId').onclick(function(){
    $('#formId').submit();
});

edited Nov 22, 2012 at 9:40

answered Nov 22, 2012 at 7:50

Bruno

5,8222 gold badges29 silver badges44 bronze badges

1 Comment

lisovaccaro Over a year ago

that would only work in a form with name=myform I believe I was asking if there was a way to make it work like submit buttons. (submit the form wrapping the element)

Collectives™ on Stack Overflow

Simplest way to create a submit button with html and js?

6 Answers 6

Comments

3 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related