CODEWITHSUNDEEP
phpjavascripthtml
user2409399
user2409399

Reputation: 267

Submit radio form without javascript

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.

Upvotes: 1

Views: 1836

Answers (5)

Brandon Bissoon
Brandon Bissoon

Reputation: 131

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>

Upvotes: 1

maazza
maazza

Reputation: 7193

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.

Upvotes: 2

Trevor Dixon
Trevor Dixon

Reputation: 24392

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>

Upvotes: 0

Head
Head

Reputation: 568

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".

Upvotes: 0

Jocelyn
Jocelyn

Reputation: 11413

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

Upvotes: 1

Related Questions