Using Json how can I select a radio button based on value in my database?

Question

Hi I have a form that has a button used to prefill my form with data from my database. Using Json It works fine to populate text inputs but how do I get it to select a radio button based on the value returned from my database?

FORM

<form action="#">

<select id="dropdown-select" name="dropdown-select">
<option value="">-- Select One --</option>
</select>

<button id="submit-id">Prefill Form</button>

<input id="txt1" name="txt1" type="text">
<input id="txt2" name="txt2" type="text">

<input type="radio" id="q1" name="q1" value="4.99" />
<input type="radio" id="q1" name="q1" value="7.99" />

<button id="submit-form" name="Submit-form" type="submit">Submit</button>


</form>

SCRIPT

<script>
     $(function(){


        $('#submit-id').on('click', function(e){  // Things to do when 

.......

.done(function(data) {

    data = JSON.parse(data);
$('#txt1').val(data.txt1);
$('#txt2').val(data.txt2);
$('#q1').val(data.q1);

});
        });
     });
</script>

/tst/orders2.php

<?php

    // Create the connection to the database
    $con=mysqli_connect("xxx","xxx","xxx","xxx");


........


        while ($row = mysqli_fetch_assoc($result)) 
            {
     echo json_encode($row);
     die(); // assuming there is just one row
        }
    }
    ?>

jogesh_pi · Accepted Answer · 2015-02-04 09:27:40Z

1

Don't use ID because you have same ID of both radio buttons

done(function(data) {

  data = JSON.parse(data);
  $('#txt1').val(data.txt1);
  $('#txt2').val(data.txt2);

  // Don't use ID because the name of id is same
  // $('#q1').val(data.q1);
  var $radios = $('input:radio[name=q1]');
  if($radios.is(':checked') === false) {
    $radios.filter('[value='+data.q1+']').prop('checked', true);
  }

  });

answered Feb 4, 2015 at 9:27

jogesh_pi

9,7745 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lyndsey Browning · Accepted Answer · 2015-02-04 09:29:10Z

1

You currently have both radio buttons using the same ID. ID's should be unique.

You can use the [name] attribute to do this, or you can set a class on the element. Here is an example:

 $('input[name=q1][value="'+ data.q1 +'"]').prop('checked', true);

answered Feb 4, 2015 at 9:29

Lyndsey Browning

2211 silver badge6 bronze badges

Comments

Dale · Accepted Answer · 2015-02-04 09:27:21Z

0

You can do it based on the value of said input:

instead of

$('#q1').val(data.q1);

Try

$('input:radio[value="' + data.q1 + '"]').click();

On a side note, you have both radios with the same ID, the results of an id based selector are going to vary from browser to browser because an id should be UNIQUE

answered Feb 4, 2015 at 9:27

Dale

10.5k23 silver badges34 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:24:14Z

0

you can refer the following link to solve your problem. works fine for me

JQuery - how to select dropdown item based on value

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Feb 4, 2015 at 9:27

Frebin Francis

1,9151 gold badge12 silver badges19 bronze badges

1 Comment

Dale Over a year ago

Except that we're talking about radios

Collectives™ on Stack Overflow

Using Json how can I select a radio button based on value in my database?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related