Get Selected Value of radio input

by Faisal Khan Janjua

HTML

<form> 
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
           name="contact" value="email">
    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice2"
           name="contact" value="phone">
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice3"
           name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre id="log"></pre>

<hr>


<select>
  <option value="A" data-valueItem="a">This is A</option>
  <option value="B" data-valueItem="b">This is B</option>
  <option value="C" data-valueItem="c">This is C</option>
  <option value="D" data-valueItem="d">This is D</option>
</select>
<p>Value: <span id="val">A</span></p>
<p>Data value: <span id="dat">a</span></p>

JavaScript

$(function(){
  $(document).on('submit', 'form', function(e){
  	e.preventDefault();
  	$('#log').html($("input[name='contact']:checked").val());
  });
  $(document).on('change', 'select', function(){
  	$('#val').html($(this).find(':selected').val());
  	$('#dat').html($(this).find(':selected').attr('data-valueItem'));
  });
});