2

I want to create radio buttons according to the elements of array that i am calling from database. and this elements should be use as label for each radio button. How i can code for it. I am calling 6 element as username suggestion. and when a guest select any of button then that label for particular button will replace the input name type by guest. Thank You

3
  • 2
    What are your attempts so far? Commented Sep 7, 2015 at 11:42
  • Show example of array from database and result that you expect. Commented Sep 7, 2015 at 11:45
  • I know how to create radio buttons dynamically. but i have no idea that how i can create it with different labels. Like I type a name in input "Michael".. so by change event.. this value is going to database where it is exist or not. If this value is exist then i will get array {"Michael5678" , "Michael5128", "Michael2278" , "Michael2345 , "Michael5611" , "Michael9856"}. And i have to display this values as username suggestion with radio buttion. So if a guest will select any of value then it will replace the input value in field. Commented Sep 7, 2015 at 11:55

1 Answer 1

4

function showSuggestions() {
  var usernames = [
    'test1', 'test2', 'test3', 'test4'
  ];
  
  var result = $('#result');
  result.html('');

  for (var i = 0; i < usernames.length; i++) {
    result.append('<label><input type="radio" name="usernames" value="' + usernames[i] + '" /> ' + usernames[i] + '</label>');
  } 
}
                      
$('button').click(showSuggestions);

$('#result').on('change', 'input', function() {
  var elem = $(this);
  if (elem.is(':checked')) {
    $('#search').val(elem.val());
  }
});
label {
  display:block;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="search" type="search" /><button>Search</button>

<div id="result"></div>

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

4 Comments

thank you Sir. i try it by implement it with my code. thanks again. Sir can you suggest me how i can display this element in vertical alignment
thank you. i almost done everything. But i dont know .. why i am getting problem to replacing the text. this last function is not working and not giving any check value on console the elem.val() .. i try this code in js fiddle where it is working and console all this array element on checked. But my code is not working on checked. what i am doing wrong ?
yeah but you will not able to see array. that i am calling from database. wait i should make a jsfiddle. And thank you for your concern
Sir sorry. I thought this is the method you are calling in showSuggestion function. But now i find that it was different function. i call it and now everything is working. thank you sir again

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.