CODEWITHSUNDEEP
phphtmltwitter-bootstrap
gnsb
gnsb

Reputation: 326

Radio button input not working in bootstrap

I am submitting a form containing radio button inputs. It works if I remove the 'class' attribute from the radio button inputs (or display without the bootstrap template), but not otherwise.

If you click any star here and submit, rating is null. Corresponding PHP code to generate HTML form (same in both links): test_ratings_curl.php

 <? php
 print('       <form method="post" action="rating_curl.php">
              <span class="rating">');
 $rating = 4;
 $inp_no = 1;
 print('<input type="hidden" name="Name" value="arya" />');
 for ($k = 1; $k <= $rating; $k++) {
   $inp_no = $k;
   $to_print = '<input type="radio" class="rating-input" id="rating_input_'.strval($k).
   '" name="rating_input_'.strval($k).
   '" value="rating_input_'.strval($k).
   '" >
                <label for="rating_input_1_'.strval($k).
   '" class="rating-star1"></label>';
   print($to_print);
 }
 for ($j = $inp_no + 1; $j <= 5; $j++) {
   $to_print = '<input type="radio" class="rating-input" id="rating_input_'.strval($j).
   '" name="rating_input_'.strval($j).
   'value="rating_input_'.strval($k).
   '" >
                <label for="rating_input_1_'.strval($j).
   '" class="rating-star"></label>';
   print($to_print);

 }

 print('  </form>
                &nbsp;');
 print('    
        <input type="submit" name="rating_submit">
        </span>'); ?>

But here rating is returned.

(Both have the same HTML): 

<form method="post" action="rating_curl.php">
  <span class="rating">
              <input type="hidden" name="Name" value="arya">

              <input type="radio" class="rating-input" id="rating_input_1" name="rating_input_1" onclick="check(this.id)" value="rating_input_1">
                <label for="rating_input_1_1" class="rating-star1"></label><input type="radio" class="rating-input" id="rating_input_2" name="rating_input_2" onclick="check(this.id)" value="rating_input_2">
                <label for="rating_input_1_2" class="rating-star1"></label><input type="radio" class="rating-input" id="rating_input_3" name="rating_input_3" onclick="check(this.id)" value="rating_input_3">
                <label for="rating_input_1_3" class="rating-star"></label><input type="radio" class="rating-input" id="rating_input_4" name="rating_input_4" onclick="check(this.id)" value="rating_input_3">
                <label for="rating_input_1_4" class="rating-star"></label><input type="radio" class="rating-input" id="rating_input_5" name="rating_input_5" onclick="check(this.id)" value="rating_input_3">
                <label for="rating_input_1_5" class="rating-star"></label>
          <input type="hidden" id="answer" name="answer">
          
                &nbsp;       (43)         
        <input type="submit" name="rating_submit">
        </span>
</form>

Code for extracting POST variables (rating_curl.php):

<? php
extract($_POST);

$rating = null;
if (isset($rating_input_1)) {
  $rating = "1";
}
elseif(isset($rating_input_2)) {
  $rating = "2";
}
elseif(isset($rating_input_3)) {
  $rating = "3";
}
elseif(isset($rating_input_4)) {
  $rating = "4";
}
elseif(isset($rating_input_5)) {
  $rating = "5";
}
print('Inside rating_curl.php<br/>');
print("rating= ".$rating);
print('<br/>');
print('hidden: '.strval($answer));
print('<br/>');
print("name of product = ".$Name);
$ch = curl_init();
$post = 'name='.$Name.
'&rating='.$rating;
curl_setopt($ch, CURLOPT_URL, 'gurnoors.com/rating.php');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$contents = curl_exec($ch);

print('<br/>Curl Results: <br/>');
print($contents);


?>

Conclusion: As stated by the accepted answer, value of label's attribute for must be the same as id of input. Thank you.

Upvotes: 1

Views: 3053

Answers (2)

Banzay
Banzay

Reputation: 9470

Following code works:

<form method="post" action="rating_curl.php">
              <span class="rating">
              <input type="hidden" name="Name" value="arya">
                <input type="radio" value="rating_input_1" class="rating-input" id="rating_input_1" name="rating_input_1">
                  <label for="rating_input_1_1" class="rating-star1"></label>
                <input type="radio" value="rating_input_2" class="rating-input" id="rating_input_1_2" name="rating_input_2">
                  <label for="rating_input_1_2" class="rating-star1"></label>
                <input type="radio" value="rating_input_3" class="rating-input" id="rating_input_1_3" name="rating_input_3">
                  <label for="rating_input_1_3" class="rating-star"></label>
                <input type="radio" value="rating_input_4" class="rating-input" id="rating_input_1_4" name="rating_input_4">
                  <label for="rating_input_1_4" class="rating-star"></label>
                <input type="radio" value="rating_input_5" class="rating-input" id="rating_input_1_5" name="rating_input_5">
                  <label for="rating_input_1_5" class="rating-star"></label>
          &nbsp;
        <input type="submit" name="rating_submit">
        </span></form>

You need to check how input's attributes are generated on the page.

Now it looks some weird:

<input type="radio" class="rating-input" id="rating_input_1_1" name="rating_input_" 1"="" onclick="check(this.id)" value="rating_input_1">

Attribute name="rating_input_" 1"="" looks strange.

also value of label's attribute for must be the same as id of input.

Upvotes: 1

skav3n
skav3n

Reputation: 180

If you want radio button (only one select), you need to add every input the same name.

<input type="radio" class="rating-input" id="rating_input_1" name="rating_input" onclick="check(this.id)" value="rating_input_1">

<input type="radio" class="rating-input" id="rating_input_2" name="rating_input" onclick="check(this.id)" value="rating_input_2">

<input type="radio" class="rating-input" id="rating_input_3" name="rating_input" onclick="check(this.id)" value="rating_input_3">

Upvotes: 1

Related Questions