Message to user not selecting size and color with select

Question

Message to user not selecting size and color with select

Navigation

#1 by (1 votes)

1

I need to change a script I have and I'm having some difficulty, I need to give a Alert to the user if he tries to go to the cart without selecting the Tamanho and Cor option, but always falls into the first message, the size.

The form is this:

$(document).ready(function () {
    $('#Finaliza').click(function () {
        if (!$("input[type='select'][name='Tamanho']").is(':selected')) {
            jAlert("TAMANHO\nPor favor, selecione o tamanho para o modelo.");
            //alert("COR\nPor favor, selecione a cor para o modelo.");
            return false;
        } else if (!$("input[type='select'][name='Cor']").is(':selected')) {
            jAlert("COR\nPor favor, selecione a cor para o modelo.");
            //alert("TAMANHO\nPor favor, selecione o tamanho para o modelo.");
            return false;
        } else {
            var $cod = $("#cod").val();
			var $categoria = $("#categoria").val();
			var $tam = $("input[name='Tamanho']:selected").val();
			var $cor = $("input[name='Cor']:selected").val();					
        }
    });
});

<form action="#" class="row variable">
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Tamanho">Size</label>
			<select name="Tamanho" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>TAMANHO</option>
				<?php foreach ($ResTamanho as $ResTamanhoSel) { ?>
				<option value="<?php echo $ResTamanhoSel->IdTamanho ?>"><?php echo $ResTamanhoSel->Nome; ?></option>
				<?php } ?>
			</select>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Cor">Color</label>
			<select name="Cor" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>COR</option>
				<?php foreach ($ResCor as $ResCorSel) { ?>
				<option value="<?php echo $ResCorSel->IdCor ?>"><?php echo $ResCorSel->NomeCor; ?></option>
				<?php } ?>
			</select>
		</div>
	</div>
</form>

<div class="buttons">
<button class="btn btn-theme btn-cart btn-icon-left" type="submit" id="Finaliza"><i class="fa fa-shopping-cart"></i>CARRINHO</button>
</div>

jquery css jalert

asked by anonymous 26.09.2018 / 15:48

1 answer

JWT and Identity MVC 5 Embedded iframe from another site - 100% screen

score 1 · Accepted Answer

Change the selectors of if s to check if any option was selected other than the first one:

!$("select[name='Tamanho'] option").not(":first").is(":selected")

and

!$("select[name='Cor'] option").not(":first").is(":selected")

You do not need to use input[type='select'] , just select[name=NOME] .

Example:

$(document).ready(function () {
    $('#Finaliza').click(function () {
        if (!$("select[name='Tamanho'] option").not(":first").is(":selected")) {
            alert("TAMANHO\nPor favor, selecione o tamanho para o modelo.");
            return false;
        } else if (!$("select[name='Cor'] option").not(":first").is(":selected")) {
            alert("COR\nPor favor, selecione a cor para o modelo.");
            return false;
        } else {
            alert("ok");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction="#" class="row variable">
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Tamanho">Size</label>
			<select name="Tamanho" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>TAMANHO</option>
				<option value="1">32</option>
			</select>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Cor">Color</label>
			<select name="Cor" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>COR</option>
				<option value="1">Verde</option>
			</select>
		</div>
	</div>
</form>
<div class="buttons">
<button class="btn btn-theme btn-cart btn-icon-left" type="submit" id="Finaliza"><i class="fa fa-shopping-cart"></i>CARRINHO</button>
</div>