CODEWITHSUNDEEP
javascriptjqueryforms
aha364636
aha364636

Reputation: 363

Naming html optionfields and checkboxes to use it properly in jquery

I'm trying to get a value in array and then display it. This works well for the one I have html:
<input id="email" type="email" name="email" required="required" />
jquery:

    $('#email').on('keyup', updateStatus);
    person[0] = $('#email').val();

but when I do this with optionfields or checkboxes, this doesn't work: I always get the value female in the optionfields and the value 1 in the checkboxes. How do I have to name them to get it working?

  <input type="radio" id="gender" name="gender" value="Male">Male</input>
  <input type="radio" id="gender" name="gender" value="Female">Female</input>

                <label>        
                    <input type="checkbox" id="chbx1" name="sportart" value="1" />1</label>
                <label>
                    <input type="checkbox" id="chbx1" name="sportart" value="2" />2</label>
                <label>
                    <input type="checkbox" id="chbx1" name="sportart" value="3" />3</label>
                <label>
                    <input type="checkbox" id="chbx1" name="sportart" value="4" />4</label>

And the jquery:

 $('#gender').on('blur', updateStatus);
    $('#chbx1').on('blur', updateStatus);

     person[3] = $('#gender').val();
        person[4] = $('#chbx1').val();

This is my updateStatus function:

 function updateStatus() {
    var person = [];
    person[0] = $('#email').val();
    person[1] = $('#passwort').val();
    person[2] = $('#passwortwd').val();
    person[3] = $('#gender').val();
    person[4] = $('#chbx1').val();
    person[5] = $('#hobby').val();


    $('#status').text(JSON.stringify(person));
}

Upvotes: 0

Views: 199

Answers (2)

user2575725
user2575725

Reputation:

Try using change handler and use name attribute selector:

$('input[name=gender], input[name=sportart]').on('change', updateStatus);

person[3] = $('input[name=gender]:checked').val();
person[4] = $('input[name=sportart]:checked').val();

Example:

var pushStatus = function() {
  var o = {};
  o.gender = $('input[name=gender]:checked').val();
  o.sportart = $('input[name=sportart]:checked').map(function() {
    return this.value;
  }).get().join(',');
  $('#status').html(JSON.stringify(o));
};
$(function() {
  $('input[name=gender], input[name=sportart]').on('change', pushStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female

<label>
  <input type="checkbox" name="sportart" value="1" />1</label>
<label>
  <input type="checkbox" name="sportart" value="2" />2</label>
<label>
  <input type="checkbox" name="sportart" value="3" />3</label>
<label>
  <input type="checkbox" name="sportart" value="4" />4</label>

<div id="status"></div>

Upvotes: 1

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34244

HTML ID should be unique. Several items cannot have the same ID.

Selection by ID (#...) will always return one item.

For example, check this snipper out: 

document.write("By name:" + $("[name='gender']").length + "<br/>");
document.write("By ID:" + $("#gender").length + "<br/>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" id="gender" name="gender" value="Male"/>Male
<input type="radio" id="gender" name="gender" value="Female"/>Female
<br/><br/>

You should assign event to all elements with name sportart this way: 

$("input[name='sportart']").on('change', function() {
  alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="sportart" value="1" />1<br/>
<input type="checkbox" name="sportart" value="2" />2<br/>
<input type="checkbox" name="sportart" value="3" />3<br/>
<input type="checkbox" name="sportart" value="4" />4

You can always get the selected radio or checkbox value using the :checked selector:

var arr = $("input[name='sportart']:checked"); // for checkbox it is array
alert(arr.length); // count of selected items
alert(arr[0].value); // value of the first one

$("input[name='gender']:checked").val();

Upvotes: 1

Related Questions