Topic: input type radio does not change value when clicked

Everton Gabriel pro asked 7 years ago


I copied the form radio button example but when I click on the items I can see the visual change but the input is not checked/uncheked so when I submit my form the field is never sent although visually checked I also tested using Chrome inspect tool and in the website example it also does not change the input. How can I have the visual state reflect a change in the related input field?

Michal Szymanski staff answered 7 years ago


Dear Everton, I don't understand what do you mean by "it works for checkboxes". It works the same in both cases. If you want to save a value of checked radio (or checkbox or any other input) you need some javascript like this:
    <form>
            <div id='type'>
                <p>
                    <input type='radio' id='radio_1' name='radio1' value='1' />
                    <label for="radio_1">Red</label>
                </p>

                <p>
                    <input type='radio' id='radio_2' name='radio1' value='2' />
                    <label for="radio_2">Red</label>
                </p>

                <p>
                    <input type='radio' id='radio_3' name='radio1' value='3' />
                    <label for="radio_3">Red</label>
                </p>
            </div>
        </form>
 $("input").on('change', function () {
            var s = $(this).val();
            alert(s);
        });
When you click any of the radio button it will alert the value of it. That proves radio works as expected and you can save a value in your form to submit it.

Everton Gabriel pro answered 7 years ago


All I want is for the related input field to be checked after I click in the radio button. So I can submit a form and the input fields have the checked attribute if they are visually checked, just like standard input fields. In this example:

    <p>
      <input name="group1" type="radio" id="test1" value="1" />
      <label for="test1">Red</label>
    </p>
When I click the Red radio in the screen I need the input to be checked:

    <p>
      <input name="group1" type="radio" id="test1" value="1" checked />
      <label for="test1">Red</label>
    </p>
This already works for checkboxes, why not for radio buttons? Tks

Michal Szymanski staff answered 7 years ago


Dear Everton, I'm sorry for so late answer. We have been working hard on new update. Now we are going to come back fast, daily support. About your question - what result do you want to achieve? Our example is simple html markup. To make any computing or to you save any value you need a javascript. So the question is - what exactly do you want to do? If you add "checked" to your input and you will see that it changes visually your button. Do you want to write a script which set a "true" or "false" value when button is checked or unchecked?

Everton Gabriel pro answered 7 years ago


Still waiting for answer..

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags