Change multiple HTML inputs to different values

Question

I have a HTML form in which the user enters the amout of time he/she intends to spend on several tasks:

<form>
<div class='row radio-online'>
  <div class='col-xs-2'>
    <input type='radio' name='time' id='minutes' value='minutes' />Minutes
  </div>
  <div class='col-xs-2'>
    <input type='radio' name='time' id='hours' value='hours' />Hours
  </div>
</div>
<div>
  <div><input type='text' name='time_task1' id='time_task1' value='' /></div>
  <div><input type='text' name='time_task2' id='time_task2' value='' /></div>
  <div><input type='text' name='time_task3' id='time_task3' value='' /></div>
</form>

What I want is to convert the values entered to minutes or hours, depending on the option selected on the radio group 'time'. I tried this in jQuery:

$("input[name='time']:radio").change(function() {
  if($("input:checked[name='time']:radio").val() == 'minutes') {
// this attempts to get every input that has an id starting with time_task
    $("[id^='time_task']").val($("[id^=time_task]").val() * 60);
  }
  else {
    $("[id^='mins']").val($("[id^=mins]").val() / 60);
  }
});

The problem is when I tried that, it does make the conversion, but only the value of the first input is converted and in addition, its value is copied to all other inputs, but the correct would be each value will have its value converted individually. The examples I've found do just that, but it's not my case. Any suggestions?

Christoph · Accepted Answer · 2017-04-28 22:30:48Z

1

This is because when you do

$("[id^='time_task']").val($("[id^=time_task]").val() * 60);

the selector $("[id^='time_task']") returns multiple elements but as soon as you use .val() it takes the first element.

Instead, loop over each element in the collection like following:

$("[id^='time_task']").each(function(){ $(this).val( $(this).val() * 60) })

edited Apr 28, 2017 at 22:30

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Apr 28, 2017 at 22:27

Rhea

6441 gold badge5 silver badges15 bronze badges

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

1 Comment

Douglas Mendes Carmona Over a year ago

Thanks Rhea. Worked perfectly

NS0 · Accepted Answer · 2017-04-28 22:28:54Z

0

Try the following

$("input[name='time']:radio").change(function() {
  if ($("input:checked[name='time']:radio").val() == 'minutes') {
    $("[id^='time_task']").each(function(){
        $(this).val($(this).val() * 60);
    })
  }
  else {
    $("[id^='time_task']").each(function(){
        $(this).val($(this).val() / 60);
    })
  }
});

We loop over each field instead and set its value accordingly.

answered Apr 28, 2017 at 22:28

NS0

6,1361 gold badge18 silver badges15 bronze badges

1 Comment

Douglas Mendes Carmona Over a year ago

Thanks. Exactly what I wanted

Collectives™ on Stack Overflow

Change multiple HTML inputs to different values

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related