CODEWITHSUNDEEP
javascriptjqueryhtml
MariaL
MariaL

Reputation: 1242

Issue with input change event and input fields

I've got a radio button, a text field and a select field. This is the html code:

<div class="wb-success-delivery">
 <input type="radio" name="delivery" value="0" /><span> Now)</span>
</div>
<div class="success-delivery">
  <input type="radio" name="delivery" value="2"  />
   <input type="text"  class="test" id="del_time_rang2"  value="Tomorrow" name="delivery" />
     <select id="del_time_rang" >  
      <option value="11-12pm">11-12pm</option> 
      <option value="12-1pm">12-1pm</option> 
      <option value="1-2pm">1-2pm</option>
 </select>
</div>

I've then got some jQuery code with a change function to store the information that was selected by the user above. 

$j(document).ready(function(){
$j("input[name='delivery']").change(function(){
  var $jtime= $j('#del_time_rang').val();
  var $jdate= $j('#del_time_rang2').val();
  var $jresult=  $jdate + ' between ' + $jtime ;

    if($j("input[name='delivery']:checked").val()==0) {
        $j("#del_time_1").val('Now');
        $j("#del_time_2").val('Now');
    } else if($j("input[name='delivery']:checked").val()==2) {
        $j("#del_time_1").val($jresult);
        $j("#del_time_2").val($jresult);
    }
});

});

Now this works for #del_time_rang2 but for #del_time_rang it only works if the user selects the right option first and then clicks the radio button. Otherwise it shows the default (11-12pm). I assume this is because the change event is for the radio button input, but not sure how I can fix it? Any Ideas?

Upvotes: 0

Views: 46

Answers (1)

Alessandro
Alessandro

Reputation: 4472

I think you should attach onChange event to the select also, so:

  • I've added name="delivery" to the select
  • Attached onChange event to $("[name='delivery']")

See follow:

$(document).ready(function(){
$("[name='delivery']").change(function(){
  var $jtime= $('#del_time_rang').val();
  var $jdate= $('#del_time_rang2').val();
  var $jresult=  $jdate + ' between ' + $jtime ;

    if($("input[name='delivery']:checked").val()==0) {
        $("#del_time_1").val('Now');
        $("#del_time_2").val('Now');
    } else if($("input[name='delivery']:checked").val()==2) {
        $("#del_time_1").val($jresult);
        $("#del_time_2").val($jresult);
    }
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wb-success-delivery">
 <input type="radio" name="delivery" value="0" /><span> (Now)</span>
</div>
<div class="success-delivery">
  <input type="radio" name="delivery" value="2"  />
   <input type="text"  class="test" id="del_time_rang2"  value="Tomorrow" name="delivery" />
     <select id="del_time_rang" name="delivery" >  
      <option value="11-12pm">11-12pm</option> 
      <option value="12-1pm">12-1pm</option> 
      <option value="1-2pm">1-2pm</option>
 </select>
</div>
<input type="text" id="del_time_1">

Note: Anyway I think that selector should be used the "class" attribute instead the "name" attribute.

I hope it helps you, bye.

Upvotes: 2

Related Questions