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ú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>
That variable "overall"
selecionados
Will you use it at another point? Kind of unnecessary it.– Sam