1

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>
1
  • What if you use <button type="submit">Click</button>? Nov 22, 2012 at 7:55

6 Answers 6

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;
}
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.

3
  • 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" Nov 22, 2012 at 20:38
  • 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? Nov 22, 2012 at 20:43
  • 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 Nov 23, 2012 at 2:03
1
 <div onclick="document.forms[0].submit();"></div> 
1
  • Will be exact answer for limited scenario. What if there are different forms?
    – mtk
    Nov 22, 2012 at 8:07
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?

2
  • 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 Nov 22, 2012 at 8:08
  • Not sure if there is such a thing as button type submit. They have opening and closing tags.
    – HMR
    Nov 22, 2012 at 8:11
1

jQuery submit method could be useful to you:

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

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

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();
});
1
  • 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) Nov 22, 2012 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.