Passing values from checkboxes to an element contained in a div

Question

Passing values from checkboxes to an element contained in a div

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

The example below works as follows:

By supplying all the data (name, phone, status, and marking at least one checbox, a button is loaded within <div id="btnSubmit"></div> .)

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

The difficulty: I am not able to load for this div the values of checked checkboxes. I tried to use a showSelectedValues() function but it did not work.

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

https://pt.stackoverflow.com/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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<script src="http://kithomepage.com/inga/jquery.validate.min.js"></script><divid="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

asked by anonymous 01.11.2018 / 15:48

2 answers

1

If you do not like * (asteristico) you can use ^ (little hat known as a caret)!

Starts With attribute - Selects elements that have the specified attribute with a value that begins exactly with a certain 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 begins exactly with a given string, in the case in question, quantity.

I removed the boostrap for a better view 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><scriptsrc="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>

02.11.2018 / 00:26

Overloading operators in C # Help with SqlQuery in context Entity Framework

score 3 · Accepted Answer

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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><linkrel="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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
<script src="http://kithomepage.com/inga/jquery.validate.min.js"></script><divid="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>