Catto
Catto

Reputation: 528

Set next element value based on clicked element value using jquery (or javascript)

I have two input, first is checkbox and the other is input hidden. I also have multiple input on 1 page

<input type="checkbox" class="comp-checkk" value="45164c0b-fc92-4f93-9c62-ea61336130eb">
<input type="hidden" class="comp-id" name="component_id[]" value="45164c0b-fc92-4f93-9c62-ea61336130eb"> 

<input type="checkbox" class="comp-checkk" value="45164c0b-fc92-4f93-9c62-ea61336130eb">
<input type="hidden" class="comp-id" name="component_id[]">

<input type="checkbox" class="comp-checkk" value="45164c0b-fc92-4f93-9c62-ea61336130eb">
<input type="hidden" class="comp-id" name="component_id[]">

I want to set the value of input with comp-id class using value from comp-checkk class value. And if the value of comp-id is not null, I want to set comp-id to null, else if the value of comp-id is null, I want to set comp-id value with value from comp-check

I've tried like this:

$(document).on('change','.comp-checkk',function(){
    if ($(this).next().val() != null) {
       $(this).next().val(null);
    } else {
       $(this).next().val($(this).val());
    }
});

It's working if the comp-id is not null, but when the value is null it's not working (nothing happened). I don't know what is wrong with my code.

I also made JsFiddle here

Upvotes: 0

Views: 62

Answers (1)

H.S
H.S

Reputation: 124

You have to check for both not null and also for not empty

if ($(this).next().val() != null && $(this).next().val() != '') {
   $(this).next().val(null);
} else {
   $(this).next().val($(this).val());
}

Upvotes: 1

Related Questions