Pass values from checkboxes to an element contained in a div

Asked

Viewed 50 times

2

The example below works as follows:

When providing all the data (name, phone, status and mark at least one checbox, a button is loaded inside the <div id="btnSubmit"></div>.

I can recover the name (in real time) and insert in this div.

The difficulty: I am unable to load this div the values of the checked checkboxes. I tried to use a function showSelectedValues() but it had no effect.

$(document).ready(function(){

function showSelectedValues()
{
selecionados =($("input[name=numero]:checked").map(
function () {return this.value;}).get().join(","));
}

$('form').validate({
  showErrors: function(errorMap, errorList) {

    var formSelector = '#' + this.currentForm.id;
    var formObject = $(formSelector);
    var validateObject = formObject.validate();
    var numberOfInvalids = validateObject.numberOfInvalids();
    		
    showSelectedValues();

    if(numberOfInvalids == 0)
      $("#btnSubmit").html('<button type="submit" class="btn btn-info btn-lg btn-block"><span class="reservar">Clique aqui para reservar rifa para <span style="color:black;"> '+$("#nome").val()+'</span></span>'+selecionados+'</button>');
    else
      $("#btnSubmit").html('');
          
  }
});
    
$("#form1").valid();
  
});
/questions/340517/wamp-mensagem-de-warning#
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<script src="http://kithomepage.com/inga/jquery.validate.min.js"></script>
    
<div id="pai" class="pai">

<form action="#" class="cmxform" id="form1">
<table class="table table-responsive"><tr><td colspan="10">

<span class="titulo2">Digite o nome, telefone, status (pago, deve etc..) e marque pelo menos um n&uacute;mero!</span></td></tr><tr><td colspan="10">

<div class="col-1">
	<input type="text" class="form-control input-lg" id="nome" name="nome" placeholder="nome" required>
</div>
<div class="col-1">
	<input type="text" class="form-control input-lg" id="telefone" name="telefone" placeholder="telefone" required>
</div>
<div class="col-1">
	<input type="text" class="form-control input-lg" id="status" name="status" placeholder="Pago / Deve" required>
</div><br><br>
		
<div id="btnSubmit"></div>
		
</td></tr><tr><td><input type="checkbox" value="01" name="numero[]" required> 01</td><td><input type="checkbox" value="02" name="numero[]" required> 02</td><td><input type="checkbox" value="03" name="numero[]" required> 03</td><td><input type="checkbox" value="04" name="numero[]" required> 04</td><td><input type="checkbox" value="05" name="numero[]" required> 05</td><td><input type="checkbox" value="06" name="numero[]" required> 06</td><td><input type="checkbox" value="07" name="numero[]" required> 07</td><td><input type="checkbox" value="08" name="numero[]" required> 08</td></tr></table></form></div></td></tr></table></div>

javascript jquery

  • That variable "overall" selecionados Will you use it at another point? Kind of unnecessary it.

2 answers

2


Your problem was time to get the name of the field, the name of your checkboxes contains "number" and are not just "number", follow the code, tested and working!

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<script src="http://kithomepage.com/inga/jquery.validate.min.js"></script>
    
<div id="pai" class="pai">

<form action="#" class="cmxform" id="form1">
<table class="table table-responsive"><tr><td colspan="10">

<span class="titulo2">Digite o nome, telefone, status (pago, deve etc..) e marque pelo menos um n&uacute;mero!</span></td></tr><tr><td colspan="10">

<div class="col-1">
	<input type="text" class="form-control input-lg" id="nome" name="nome" placeholder="nome" required>
</div>
<div class="col-1">
	<input type="text" class="form-control input-lg" id="telefone" name="telefone" placeholder="telefone" required>
</div>
<div class="col-1">
	<input type="text" class="form-control input-lg" id="status" name="status" placeholder="Pago / Deve" required>
</div><br><br>
		
<div id="btnSubmit"></div>
		
</td></tr><tr><td><input type="checkbox" value="01" name="numero[]" required> 01</td><td><input type="checkbox" value="02" name="numero[]" required> 02</td><td><input type="checkbox" value="03" name="numero[]" required> 03</td><td><input type="checkbox" value="04" name="numero[]" required> 04</td><td><input type="checkbox" value="05" name="numero[]" required> 05</td><td><input type="checkbox" value="06" name="numero[]" required> 06</td><td><input type="checkbox" value="07" name="numero[]" required> 07</td><td><input type="checkbox" value="08" name="numero[]" required> 08</td></tr></table></form></div></td></tr></table></div>
<script>
$(document).ready(function(){

function showSelectedValues()
{
//o problema estava aqui
selecionados =($("input[name*=numero]:checked").map(
function () {return this.value;}).get().join(","));
}

$('form').validate({
  showErrors: function(errorMap, errorList) {

  var formSelector = '#' + this.currentForm.id;
  var formObject = $(formSelector);
  var validateObject = formObject.validate();
  var numberOfInvalids = validateObject.numberOfInvalids();
    		
  showSelectedValues();

  if(numberOfInvalids == 0)
    $("#btnSubmit").html('<button type="submit" class="btn btn-info btn-lg btn-block"><span class="reservar">Clique aqui para reservar rifa para <span style="color:black;"> '+$("#nome").val()+'</span></span>'+selecionados+'</button>');
  else
    $("#btnSubmit").html('');
          
  }
});
    
$("#form1").valid();
  
});
</script>

  • Boy, for a mere * (asteristico) almost play out that script I sweated to elaborate!!

  • kkkk happens. good code for you! @Leocaracciolo

0

If you don’t like the * (asteristico) can use the ^ (little hat known as circumflex accent)!

attribute Starts With - Selects elements that have the specified attribute with a value that starts exactly with a given string input[name^=num], in the case in question, num, could be numero, or numer or etc....

Selects elements that have the specified attribute with a value that starts exactly with a given string, in the case in question, quantity.

I removed boostrap for better visualization when running the example.

$(document).ready(function(){

$('input[id^="num"]')

function showSelectedValues()
{
selecionados =($("input[name^=numero]:checked").map(
function () {return this.value;}).get().join(","));
}

$('form').validate({
  showErrors: function(errorMap, errorList) {

    var formSelector = '#' + this.currentForm.id;
    var formObject = $(formSelector);
    var validateObject = formObject.validate();
    var numberOfInvalids = validateObject.numberOfInvalids();
    		
    showSelectedValues();

    if(numberOfInvalids == 0)
      $("#btnSubmit").html('<button type="submit" class="btn btn-info btn-lg btn-block"><span class="reservar">Clique aqui para reservar rifa para <span style="color:black;"> '+$("#nome").val()+'</span></span> '+selecionados+'</button>');
    else
      $("#btnSubmit").html('');
          
  }
});
    
$("#form1").valid();
  
});
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://kithomepage.com/inga/jquery.validate.min.js"></script>
    
<div id="pai" class="pai">

<form action="#" class="cmxform" id="form1">
<table class="table table-responsive"><tr><td colspan="10">

<span class="titulo2">Digite o nome, telefone, status (pago, deve etc..) e marque pelo menos um n&uacute;mero!</span></td></tr><tr><td colspan="10">

<div class="col-1">
	<input type="text" class="form-control input-lg" id="nome" name="nome" placeholder="nome" required>
</div>
<div class="col-1">
	<input type="text" class="form-control input-lg" id="telefone" name="telefone" placeholder="telefone" required>
</div>
<div class="col-1">
	<input type="text" class="form-control input-lg" id="status" name="status" placeholder="Pago / Deve" required>
</div><br><br>
		
<div id="btnSubmit"></div>
</td></tr><tr>
<td><input type="checkbox" value="01" name="numero[]" required> 01</td>
<td><input type="checkbox" value="02" name="numero[]" required> 02</td>
<td><input type="checkbox" value="03" name="numero[]" required> 03</td>
<td><input type="checkbox" value="04" name="numero[]" required> 04</td>
<td><input type="checkbox" value="05" name="numero[]" required> 05</td>
<td><input type="checkbox" value="06" name="numero[]" required> 06</td>
<td><input type="checkbox" value="07" name="numero[]"  required> 07</td>
<td><input type="checkbox" value="08" name="numero[]" required> 08</td>
</tr></table></form></div></td></tr></table></div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.