javascript - how to grab value from checkbox and input with jquery ajax - Stack Overflow

admin管理员组

文章数量:1395019

To echo the values from checked checkboxes , I am using this Ajax code:

HTML:

 <input type="checkbox" class="cb" value="PHP" /> PHP <br />  
 <input type="checkbox" class="cb" value="ASP" /> ASP <br />  
 <input type="checkbox" class="cb" value="JSP" /> JSP <br /> 

 <button type="button" class="values">Submit</button>

jQuery:

$('.values').click(function(){  
       var checkboxes_value = []; 

       $('.cb').each(function(){  
            //if($(this).is(":checked")) { 
            if(this.checked) {              
                 checkboxes_value.push($(this).val());                                                                               
            }  
       });                              
       checkboxes_value = checkboxes_value.toString(); 

       $.ajax({  
            url:"",  
            method:"POST",  
            data:{ checkboxes_value:checkboxes_value },  
            success:function(data){  
                 $('.echo').html(data);  
            }  
       });  
    });

PHP:

if(isset($_POST["checkboxes_value"])) {  
  $result = $_POST["checkboxes_value"];  
  echo  '<br />'.$result.'<br />';
} 

How can I echo the value of an input field according to the same procedure and in the same Ajax call?

So my HTML will be:

<input type="checkbox" class="cb" value="PHP" /> PHP <br />  
<input type="checkbox" class="cb" value="ASP" /> ASP <br />  
<input type="checkbox" class="cb" value="JSP" /> JSP <br />  
<input type="text" class="text" value="" />

<button type="button" class="values">Submit</button>

To echo the values from checked checkboxes , I am using this Ajax code:

HTML:

 <input type="checkbox" class="cb" value="PHP" /> PHP <br />  
 <input type="checkbox" class="cb" value="ASP" /> ASP <br />  
 <input type="checkbox" class="cb" value="JSP" /> JSP <br /> 

 <button type="button" class="values">Submit</button>

jQuery:

$('.values').click(function(){  
       var checkboxes_value = []; 

       $('.cb').each(function(){  
            //if($(this).is(":checked")) { 
            if(this.checked) {              
                 checkboxes_value.push($(this).val());                                                                               
            }  
       });                              
       checkboxes_value = checkboxes_value.toString(); 

       $.ajax({  
            url:"",  
            method:"POST",  
            data:{ checkboxes_value:checkboxes_value },  
            success:function(data){  
                 $('.echo').html(data);  
            }  
       });  
    });

PHP:

if(isset($_POST["checkboxes_value"])) {  
  $result = $_POST["checkboxes_value"];  
  echo  '<br />'.$result.'<br />';
} 

How can I echo the value of an input field according to the same procedure and in the same Ajax call?

So my HTML will be:

<input type="checkbox" class="cb" value="PHP" /> PHP <br />  
<input type="checkbox" class="cb" value="ASP" /> ASP <br />  
<input type="checkbox" class="cb" value="JSP" /> JSP <br />  
<input type="text" class="text" value="" />

<button type="button" class="values">Submit</button>

• javascript
• php
• jquery
• ajax
• input

Share Improve this question Follow edited Feb 22, 2019 at 16:35 G_real 1,15722 gold badges2020 silver badges2929 bronze badges asked Feb 22, 2019 at 15:38 mudraya katushamudraya katusha 17111 silver badge88 bronze badges 1

• Please clear your question. Do you want your input field value based on checked checkbox? e.g. if we select PHP checkbox, in Input field we will get PHP like that? – G_real Commented Feb 22, 2019 at 15:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

So you can do that in this way

<input type="text" class="text" value="" />

Your jquery

$('.values').click(function(){  
       var checkboxes_value = []; 
        var inputval=$(".text").val();//getting value of input field
       $('.cb').each(function(){  
            //if($(this).is(":checked")) { 
            if(this.checked) {              
                 checkboxes_value.push($(this).val());                                                                               
            }  
       });                              
       checkboxes_value = checkboxes_value.toString(); 

       $.ajax({  
            url:"",  
            method:"POST",  
            data:{ checkboxes_value:checkboxes_value,inputval:inputval},  
            success:function(data){  
                 $('.echo').html(data);  
            }  
       });  
    });

Your php code

if(isset($_POST["checkboxes_value"]) && isset($_POST["inputval"]) ) {  
  $result = $_POST["checkboxes_value"];  
  echo  '<br />'.$result.'<br />';
echo  '<br />'.$_POST["inputval"].'<br />';
} 

I am unsure why you are using AJAX, since you are only returning the value that is sent via AJAX. What about doing like this:

$('.values').click(function(){
    var checkboxes_value = []; 

    $('input').each(function(){
        if(this.checked) {
            checkboxes_value.push($(this).val());
        }else if($(this).hasClass('text')){
            checkboxes_value.push($(this).val());
        }
    });                              

    checkboxes_value = checkboxes_value.toString(); 
    $('.echo').html(checkboxes_value);
});

div.echo{margin-top:50px;background:wheat;padding:50px;border:1px solid red;}

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

<input type="checkbox" class="cb" value="PHP" /> PHP <br />  
<input type="checkbox" class="cb" value="ASP" /> ASP <br />  
<input type="checkbox" class="cb" value="JSP" /> JSP <br />  
<input type="text" class="text" value="" />

<button type="button" class="values">Submit</button>

<div class="echo"></div>

Notes:

1. Since the elements you wish to test are all input elements, you can just loop through all input elements.

2. There is no need for the AJAX, since it only echoes back what it received. You can do what you want just in javascript/jQuery.

A simpe foreach loop perhaps?

if(isset($_POST["checkboxes_value"])) {  
   foreach($_POST['checkboxes_value'] as $result){
       echo '<input type="checkbox" class="cb" value="' . $result . '" /> ' . $result . ' <br />';
   }
} 

本文标签： javascripthow to grab value from checkbox and input with jquery ajaxStack Overflow