J'ouvre un div avec une table à l'intérieur en cliquant sur un bouton. Dans ce tableau, il existe un certain nombre de champs de saisie. Si tous les champs d'entrée sont remplis, le bouton doit modifier la couleur.
J'ai un certain nombre de divs avec table avec des champs de saisie. L'un d'eux fonctionne, mais ne réussit pas avec Seccond Div. P>
<p><br></p>
<!-- The Next Button Plates -->
<button id = "buttonP" onclick="showOrHide('Plates')" class="button1" name= "Plates" ><b>Plates</b></button>
<!-- Insert a table in a div, so this can be hide -->
<div id="Plates">
<br>
<div id="CompoundPlates_button">
<table style="width:20%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<!--<col style="background-color:yellow"> -->
</colgroup>
<tr>
<td width="20%"><input type="button" id = "button" class="buttonsmall" style="height:20px;width:60px" onclick="showOrHide('CompoundPlates')">
</td>
<td width="40%"><b>CompoundPlates</></td>
<td width="15%"></td>
<td width="15%"></td>
<td width="10%"></td>
</tr>
</table>
</div> <!-- Close Div CompoundPlates_button -->
<!-- Insert a table in a div, so this can be hide -->
<div id="CompoundPlates">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
</colgroup>
<tr>
<td width="10%">
</td>
<td width="20%">Number of Plates:</td>
<td width="30%"><input type="text" name="Number of plates" size="35"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td>
</td>
<td>Plate/Tip type :</td>
<td><input type="text" name="Plate/Tip type" size="35"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Lid : </td>
<td><input type="text" name="Lid" size="35"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Storage device :</td>
<td><input type="text" name="Storage device" size="35"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
</td>
<td>Position :</td>
<td><input type="text" name="Position" size="35"></td>
<td></td>
<td></td>
</tr>
</table>
</div> <!-- Close div CompoundPlates -->
</div> <!-- Close div Plates -->
3 Réponses :
Je pense que c'est utile pour vous
$("input[type=text]").change(function() {
var filled = true;
$( "input[type=text]" ).each(function( index ) {
if($( this ).val() == ""){
filled = false;
});
if(filled === false){
//change color
}
});
Should do the trick.
Il ne sais pas grand chose sur JavaScript et il n'est pas clair pour moi HOWTO Ajuster votre code pour le faire faire le travail. Pouvez-vous regarder mon code et me faire savoir où ajuster le JavaScript de vous
Ce que j'ai fait est que j'ai utilisé jQuery pour vérifier et changer la couleur du bouton et pour les champs de saisie que j'ai utilisés CSS car il était difficile pour moi de changer plus d'un champ de saisie. Ceci est mon Fiddle
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<input type="text" class="form-control" id="name" name="user_name" placeholder=" Full Name" required>
</div>
<div>
<input type="text" class="form-control" name="user_mail" placeholder=" Email Address" required>
</div>
<div>
<textarea type="text" class="form-control" name="user_message" id="message" cols="30" rows="10" placeholder=" Let me know what's on your mind" required></textarea>
</div>
</div>
<div class="sendButton">
<button class="btn" type="submit" disabled="disabled">Send</button>
</div>Il ne sais pas grand chose sur JavaScript et il n'est pas clair pour moi HOWTO Ajuster votre code pour le faire faire le travail. Pouvez-vous regarder mon code et me faire savoir où ajuster le JavaScript de vous
@Orca Vous devez d'abord inclure JQuery comme dans le code (doit être dans la tête) et ci-dessus dans l'utilisation du corps
Pouvez-vous partager le code que vous avez essayé d'exécuter ce comportement (je devine un script JS)? Cela aiderait à voir où vous pourriez avoir commis une erreur