2
votes

comment récupérer la valeur de la case à cocher et la saisir avec jquery ajax

Pour faire écho aux valeurs des cases à cocher cochées, j'utilise ce code Ajax:

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 />  
<input type="text" class="text" value="" />

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

jQuery:

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

$('.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);  
            }  
       });  
    });

Comment puis-je reprendre la valeur un champ de saisie selon la même procédure et dans le même appel Ajax?

Donc mon HTML sera:

 <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>

php javascript jquery ajax input

1 commentaires

Veuillez clarifier votre question. Voulez-vous que votre valeur de champ de saisie soit basée sur la case à cocher cochée? par exemple. si nous sélectionnons la case PHP, dans le champ de saisie, nous obtiendrons PHP comme ça?

3 Réponses :

0
votes

Une simple boucle foreach peut-être?

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

3 commentaires

Je peux déjà faire écho aux valeurs des cases à cocher choisies. Mais je veux ajouter la valeur du champ de saisie supplémentaire

vous voulez que la valeur de l'entrée de texte contienne toutes les valeurs des cases à cocher affichées? Je ne comprends pas tout à fait ce dont vous avez besoin.

non, je voulais juste la valeur de l'entrée supplémentaire. Faites donc écho aux valeurs des cases à cocher et font écho à la valeur de l'entrée

3
votes

Vous pouvez donc le faire de cette manière

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

Votre 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);  
            }  
       });  
    });

Votre code php

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

2 commentaires

Exactement ce que je voulais réaliser! Thnx pour la solution. Fonctionne très bien!

Extrêmement utile!

1
votes

Je ne sais pas pourquoi vous utilisez AJAX, car vous ne renvoyez que la valeur envoyée via AJAX. Que diriez-vous de faire comme ceci:

<script src="https://cdnjs.cloudflare.com/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>

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

$('.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);
});

Notes:

Comme les éléments que vous souhaitez tester sont tous des éléments input , vous pouvez simplement parcourir tous les éléments d'entrée.
Il n'y a pas besoin de l'AJAX, car il ne fait que renvoyer ce qu'il a reçu. Vous pouvez faire ce que vous voulez simplement en javascript / jQuery.

2 commentaires

Je suis d'accord s'il ne renvoyait que les valeurs. Mais j'ai besoin des valeurs en php, donc je l'ai testé uniquement avec l'écho si cela fonctionne. Maintenant, je peux lier les valeurs à une variable php et faire d'autres choses avec elle. Mais, vous avez raison, pour simplement sortir du HTML, je n'avais pas besoin d'ajax.

Ah, je vois. Merci pour cette réponse - je pensais que ça pourrait être quelque chose comme ça, mais on n'est jamais sûr alors j'ai pensé que je devrais le mentionner, jic.