Submit radio form without javascript

Question

I have the following code :

<div id="choices">
    <div>
       <input type="radio" name="question-answers" id="question-answers-A" value="A" onclick="this.form.submit();" />
       <label for="question-answers-A">$c[0] </label>
       </div>
       <div>
       <input type="radio" name="question-answers" id="question-answers-B" value="B" onclick="this.form.submit();"/>
  <label for="question-answers-B">$c[1]</label>
  </div>
  </div>

The form is submitted when a radio is selected.

Is there a way to do it without javascript? (without onClick)

Thanks.

No. Maybe you should use a regular submit button or even a link. — Pavel Strakhov, May 28 '13 at 17:51
you can submit with jquery although it's nearly javascript innit. Here is the info: http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery — Head, May 28 '13 at 17:52
I'm not saying it's a good user face but here's an idea, have an image of a radio button that links to the next page `` — Celeritas, May 28 '13 at 18:00
Ian, what's up? I just meant if he didn't want to use javascript to use jquery but it's practically the same. — Head, May 28 '13 at 18:15
Cross browsers example, no images or javascript. http://jsfiddle.net/DCHaT/8/ Thanks Jocelyn. — Brandon Bissoon, May 28 '13 at 18:50

maazza · Answer 1 · 2013-05-28T18:44:26.870

2

Why not the traditional submit input ?

<form>
    <input type="radio" name="r1">
    <input type="radio" name="r2">
    <input type="submit" value="send" />
</form>

The form is submitted when a radio is selected.

Javascript is the way to go or plain old html but it will not be submitted on change.

edited May 28 '13 at 18:44

answered May 28 '13 at 17:51

maazza

7,016
15
63
96

so I have to create 2 submit button and make them with CSS or so on look like radio button? – user2409399 May 28 '13 at 17:55

score 1 · Answer 2 · answered May 28 '13 at 17:51

1

There is no way to detect when a radio button is clicked without using Javascript.

answered May 28 '13 at 17:51

Jocelyn

11,209
10
43
60

I think you're right. This was my best idea, and it doesn't appear to work: http://jsfiddle.net/trevordixon/FNzhb/ – Trevor Dixon May 28 '13 at 17:55

Brandon Bissoon · Answer 3 · 2013-05-28T18:53:41.453

Here's an example of getting it to work without Javascript http://jsfiddle.net/DCHaT/8/

You rely on CSS and labels.

CSS:

button.transparent{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    visiblity:hidden;
    border:none;
    z-index:2;
    background-color:transparent;
}

div.radio{
    position:relative;
}

div.radio > label > input[type="radio"]{
    position:relative;
    z-index:1;
}

Code:

<form action="http://www.yahoo.com" method="GET">
    <div class="radio">
        <label for="radio_1">
    <button type="submit" class="transparent" name="radio" value="1"></button>
        <input type="radio" value="1" name="radio" id="radio_1"/>
        Radio 1</label>
    </div>
    <div class="radio">
        <label for="radio_2">
    <button type="submit" class="transparent" name="radio" value="2"></button>
     <input type="radio" value="2" name="radio" id="radio_2"/>
            Radio 2</label>
    </div>
</form>

Original idea, but not working properly when I click on the right of the label: the radio button gets selected, but the forum is not submitted. I'm using Firefox 22. — Jocelyn, May 28 '13 at 18:24

score 0 · Answer 4 · answered May 28 '13 at 17:54

You could use php

    <div class="field form-inline radio">
  <label class="radio" for="txtContact">Preferred Method of Contact</label>
  <input class="radio" type="radio" name="contact" value="email" checked /> <span>Email</span>
  <input class="radio" type="radio" name="contact" value="phone" /> <span>Phone</span>
</div>


   $contact = $_POST['contact']
//Will return either "email" or "phone".

Trevor Dixon · Answer 5 · 2013-05-28T18:09:08.190

Use two submit buttons, and optionally style them to look like radio buttons. http://jsfiddle.net/trevordixon/FNzhb/3/

<form method="POST">
    <button type="submit" name="question-answers" value="A">A</button>
    <button type="submit" name="question-answers" value="B">B</button>
</form>

<style>
button {
    border: none;
    background: none;
    padding-left: 10px;
    cursor: pointer;
}

button:before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #999;
    border-radius: 50%;
}

button:active:before { content: '•'; }
</style>

Submit radio form without javascript

5 Answers5