[英]Image should show when input fields are filled in
ive been stuck a couple days on writing my code for a school project. 我在写我的学校项目代码时被困了几天。 this is my code:
这是我的代码:
**HTML**
<fieldset id="step1">
<legend>Step 1</legend>
<p1>How many people will be attending?</p1>
<div id="selected_form_code">
<select id="select_btn">
<option value="0">Please choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div class="Attendees" id="form1">
<h2 id="infoNames">Please provide full names:</h2>
<form action="#" id="form_submit" method="post" name="form_submit">
<div class="Attendees" id="Attendee1" name="a">
<label>
Attendee 1 name:
<input>
</label>
</div>
<div class="Attendees" id="Attendee2" name="b">
<label>
Attendee 2 name:
<input>
</label>
</div>
<div class="Attendees" id="Attendee3" name="c">
<label>
Attendee 3 name:
<input>
</label>
</div>
<div class="Attendees" id="Attendee4" name="d">
<label>
Attendee 4 name:
<input>
</label>
</div>
<div class="Attendees" id="Attendee5" name="e">
<label>
Attendee 5 name:
<input>
</label>
</div>
</form>
</div>
</div>
<p class="vinkje"><img src="vinkje.png" height="100" width="100"></p>
</fieldset>
this is a selector which will drop down the forms as which input u choose. 这是一个选择器,它将下拉您选择的输入形式。 But now i have to get an image when all of these inputs are filled in. here is my jq code:
但是现在我必须在所有这些输入都填满时获取图像。这是我的jq代码:
function checkInput() {
if (!$('Attendee1').val())
$('.vinkje').hide();
}
this is the code that i have used for the dropdown menu, where u can choose the amount of forms u want to append 这是我用于下拉菜单的代码,您可以在其中选择要附加的表格数量
$(document).ready(function() {
var isEmpty = true;
$('.vinkje').hide();
hideInput();
$('#select_btn').change(function() {
hideInput();
var sel_value = $('option:selected').val();
if (sel_value == 0) {
hideInput();
} else {
$("#infoNames").show();
for (var i = 1; i <= sel_value; i++) {
$("#Attendee" + i).show();
}
}
checkInput();
});
$('.Attendees input').blur(function()
{
checkInput();
});
});
Create an event-handler for keyup
event for inputs inside the form
为
form
输入的keyup
事件创建事件处理程序
$("form input").on( "change keyup", function(){
$(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set
$('.vinkje').toggle( $("form input[data-hasvalue='true']").length > 0 ); //if there is even one input with value, show the image
});
Edit 编辑
In case you want to show image only when all the inputs are filled in, then change it to 如果您只想在所有输入均已填写时才显示图像,则将其更改为
$("form input").on( "change keyup", function(){
$(this).setAttribute( "data-hasvalue", this.value.trim().length > 0 ); //setting this boolean value to track if value of any input has been set
$('.vinkje').toggle( $("form input[data-hasvalue='true']").length == $("form input").length ); //if there is even one input with value, show the image
});
Here, is the updated code that you need. 这是您需要的更新代码。 Changes made in the below code are :
在以下代码中进行的更改是:
Hope, it helps. 希望能帮助到你。
$(document).ready(function() { $(".Attendees > :input").keyup(function() { var $emptyFields = $('.Attendees :input').filter(function() { return $.trim(this.value) === ""; }); if (!$emptyFields.length) { $(".vinkje").show(); } else { $(".vinkje").hide(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="step1"> <legend>Step 1</legend> <p1>How many people will be attending?</p1> <div id="selected_form_code"> <select id="select_btn"> <option value="0">Please choose</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select> <div class="Attendees" id="form1"> <h2 id="infoNames">Please provide full names:</h2> <form action="#" id="form_submit" method="post" name="form_submit"> <div class="Attendees" id="Attendee1" name="a"> <label> Attendee 1 name: </label> <input type="text"> </div> <div class="Attendees" id="Attendee1" name="a"> <label> Attendee 2 name: </label> <input type="text"> </div> <div class="Attendees" id="Attendee1" name="a"> <label> Attendee 3 name: </label> <input type="text"> </div> </form> </div> </div> <p class="vinkje" style="display:none"><img src="https://image.flaticon.com/teams/slug/freepik.jpg" height="100" width="100"></p> </fieldset>
Note - (Updated from 5 fields to 3 fields) 注意-(已从5个字段更新为3个字段)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.