Get checkbox insert input value in jQuery

Question

I have checkbox function that can only select one value. If user choose option of other they have to insert the value.

And now I'm trying to get the value of the inserted input by the user.

But I got this in my console.log it's not displaying any value that I have inserted before.

How do I fix the jQuery in order to get the input value if user choose others as the option ?

let subject_type = '';

$('input[name="web[]"]').change(function() {
  $('input[name="' + this.name + '"]').not(this).prop('checked', false);
  if (this.value != 'others') {
    subject_type = this.value;
  } else if (this.value == 'others') {

    subject_type = $("#subject_name").val();
 
  }
});

$("#subject").hide();
$("#oth_subject").change(function() {
  if ($("#oth_subject").is(':checked')) {
    $("#subject").show();
  } else {
    $("#subject").hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg-6 mb-30">
  <label>Pick A Subject</label>
  <div class="form-group">
    <ul>
      <li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
      <li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
      <li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
    </ul>
  </div>
</div>
<div class="col-lg-12 mb-30" id="subject" class="row">
  <label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
  <div class="input-group-prepend">
    <input class="from-control" type="text" id="subject_name">
  </div>
</div>

I'm checking the value in the formData entries.

 <div class="col-md-12">
<button type="button" sendForm ="submit()">SEND</button>
</div>

const sendForm = () =>{
 let formData  = new FormData();
//assuming I have another data just u show this
 formData.append('subject', subject_type);
           
 for (var pair of formData.entries()) {
       console.log(pair[0]+ ', ' + pair[1]); 
   }
}
}

"it's not displaying any value that I have inserted before." - and by "before", you actually mean before you clicked the "Others" checkbox? Because on the first time you are trying to read this field value, the user did not have a chance to add any yet ... — C3roe
– C3roe, Commented Aug 31, 2021 at 8:51
And why are you misusing checkboxes to do what radio buttons were explicitly made for? — C3roe
– C3roe, Commented Aug 31, 2021 at 8:52
@CBroe no I what i meant is I have clicked the others option and inserted the value in the input. when I tried to submit the form I checking the value and it did not show any value that has been inserted in the input — nonutt
– nonutt, Commented Aug 31, 2021 at 8:55
@CBroe I know there is the radio but I for some reason if I have to use checkbox style. — nonutt
– nonutt, Commented Aug 31, 2021 at 8:56
I ran your code I click on Others checkbox and then I start to type some text in subject_name textbox after that I can get the value of text box by $("#subject_name").val(); in console. So what is the problem? — Alireza Ahmadi
– Alireza Ahmadi, Commented Aug 31, 2021 at 9:03

fdomn-m · Accepted Answer · 2021-08-31 09:08:13Z

You need to check for a change in the other subject input:

let subject_type = '';

$('input[name="web[]"]').change(function() {
  $('input[name="' + this.name + '"]').not(this).prop('checked', false);
  if (this.value != 'others') {
    subject_type = this.value;
  } else if (this.value == 'others') {

    subject_type = $("#subject_name").val();
  }
});

$("#subject").hide();
$("#oth_subject").change(function() {
  if ($("#oth_subject").is(':checked')) {
    $("#subject").show();
  } else {
    $("#subject").hide();
  }
});

$('#subject').change(function() {
  subject_type = $("#subject_name").val();
  console.log(subject_type)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg-6 mb-30">
  <label>Pick A Subject</label>
  <div class="form-group">
    <ul>
      <li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
      <li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
      <li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
    </ul>
  </div>
</div>
<div class="col-lg-12 mb-30" id="subject" class="row">
  <label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
  <div class="input-group-prepend">
    <input class="from-control" type="text" id="subject_name">
  </div>
</div>

Daud Khan · Accepted Answer · 2021-08-31 09:16:16Z

@Mailme you simply do this by use change event on subject input:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg-6 mb-30">
    <label>Pick A Subject</label>
        <div class="form-group">
            <ul>
                <li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
                <li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
                <li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
            </ul>
        </div> 
</div>
<div class="col-lg-12 mb-30" id="subject" class="row">
    <label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
        <div class="input-group-prepend">
            <input class="from-control" type="text" id="subject_name">
        </div>
</div>

    let subject_type = '';

 $('input[name="web[]"]').change(function() {
    
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
    if (this.value != 'others'){
        subject_type = this.value;
    }
    else if (this.value == 'others'){
                
        subject_type = $("#subject_name").val();

    }
});

$("#subject").hide();

$("#oth_subject, #subject").change(function(){
    
    if ($("#oth_subject").is(':checked')){
        $("#subject").show();
    }else{
        $("#subject").hide();
    }

    subject_type = $("#subject_name").val();
    if(subject_type)
        console.log(subject_type);
});

Alireza Ahmadi · Accepted Answer · 2021-08-31 09:39:06Z

1

You don't need any change event just use ("#subject_name").val() everywhere you need the value of subject_name the text box:

$("#subject").hide();
$("#oth_subject").change(function () {
    if ($("#oth_subject").is(':checked')) {
        $("#subject").show();
    } else {
        $("#subject").hide();
    }
});

const sendForm = () => {
    let formData = new FormData();

    formData.append('subject', $("#subject_name").val());

    for (var pair of formData.entries()) {
        console.log(pair[0] + ', ' + pair[1]);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-lg-6 mb-30">
        <label>Pick A Subject</label>
        <div class="form-group">
            <ul>
                <li><label class="checkbox"><input type="checkbox" name="web[]" value="Science"> Science</label></li>
                <li><label class="checkbox"><input type="checkbox" name="web[]" value="Math"> Math</label></li>
                <li><label class="checkbox"><input type="checkbox" name="web[]" id="oth_subject" value="others">Others</label></li>
            </ul>
        </div>
    </div>
    <div class="col-lg-12 mb-30" id="subject" class="row">
        <label><b><span style="color:#e60000;">*</span> Insert the subject you wish </b></label><br>
        <div class="input-group-prepend">
            <input class="from-control" type="text" id="subject_name">
        </div>
    </div>


    <div class="col-md-12">
        <button type="button" onclick="sendForm()">SEND</button>
    </div>

answered Aug 31, 2021 at 9:39

Alireza Ahmadi

10.2k8 gold badges28 silver badges65 bronze badges

5 Comments

nonutt Over a year ago

that will be another case if user choose math/science then I wont be able to get the value of math/science

Alireza Ahmadi Over a year ago

@mailme this gives you the same result with above answers but without any change event!!

nonutt Over a year ago

i understand it nowwww. thank youuu for another knowledge

Alireza Ahmadi Over a year ago

@mailme I am glad it helped. let me know if there is a problem bro

nonutt Over a year ago

no no everything is good! i didnt realize it. upvote it back. im sorry.

Collectives™ on Stack Overflow

Get checkbox insert input value in jQuery

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related