I suck at Jquery and Javascript.
I've been trying to make this work:
debugger;
(function () {
$('form input').keyup(function () {
var url = [false, false, false, false, false];
var plus = 0;
$('form input').each(function () {
plus = plus + 1;
if ($(this).val() == '') {
url[plus] = true;
}
});
$("#demo").text(url);
});
})()
But jquery won't even set the #demo text at all, nothing is happening whatsoever.
html:
<div class="inner cover">
<h1 class="cover-heading">Create.</h1>
<p class="lead">
<form action="./index.php?p=create" method="post" class="form-horizontal" role="form">
<div class="form-group">
<input name="url" type="text" id="url" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<input name="url2" type="text" id="url2" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<input name="url3" type="text" id="url3" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<input name="url4" type="text" id="url4" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<input name="url5" type="text" id="url5" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button>
</div>
</form>
</p>
<p id="demo"></p>
</div>
What are all of the things I've totally done all wrong?
(I've been testing this in JSfiddle)
Thanks in advance. -G
$('form > input')
should be
$('form input')
Becase >
means " direct child " and you have a div
between form
and input
$('form > input')
requires inputs to be direct descendants of "form". yours are wrapped in DIVs. the correct selector is $('form input')
(function () { $('form input').keyup(function () { var url = [false, false, false, false, false]; var plus = 0; $('form > input').each(function () { plus = plus + 1; if ($(this).val() == '') { url[plus] = true; } }); $("#demo").text("yo"); }); })()
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <div class="inner cover"> <h1 class="cover-heading">Create.</h1> <p class="lead"> <form action="./index.php?p=create" method="post" class="form-horizontal" role="form"> <div class="form-group"> <input name="url" type="text" id="url" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url2" type="text" id="url2" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url3" type="text" id="url3" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url4" type="text" id="url4" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url5" type="text" id="url5" class="form-control" placeholder="URL"> </div> <div class="form-group"> <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button> </div> </form> </p> <p id="demo"></p> </div>
AS PER REQUEST IN COMMENT : again, selector is not "form > input", is "form input". Also, what's "empty" in your IF? this works:
(function () { var url = [false, false, false, false, false]; var plus = 0; $('form input').keyup(function () { $('form input').each(function () { plus++; if ($(this).val() == '') url[plus] = true; }); // WHAT'S EMPTY?? /* if (empty) { $('#register').attr('disabled', 'disabled'); } else { $('#register').removeAttr('disabled'); } */ $("#demo").text(url); }); })()
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <div class="inner cover"> <h1 class="cover-heading">Create.</h1> <p class="lead"> <form action="./index.php?p=create" method="post" class="form-horizontal" role="form"> <div class="form-group"> <input name="url" type="text" id="url" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url2" type="text" id="url2" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url3" type="text" id="url3" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url4" type="text" id="url4" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url5" type="text" id="url5" class="form-control" placeholder="URL"> </div> <div class="form-group"> <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button> </div> </form> </p> <p id="demo"></p> </div>
Because your selector select all input who have parent a form
tag, but all your input have parent a div
tag.
Try this:
$('form input')
$('form > input')
selects direct input descendants of form, like this:
<form>
<input />
</form>
but since you have this structure:
<form>
<div>
<input />
</div>
</form>
you need to use $('form > div > input')
, or, more loosely, just $('form input')
(without the >
character).
See it here:
(function () { $('form input').keyup(function () { var url = [false, false, false, false, false]; var plus = 0; $('form input').each(function () { plus = plus + 1; if ($(this).val() == '') { url[plus] = true; } }); if (plus == 0) { $('#register').attr('disabled', 'disabled'); } else { $('#register').removeAttr('disabled'); } $("#demo").text(url); }); })()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inner cover"> <h1 class="cover-heading">Create.</h1> <p class="lead"> <form action="./index.php?p=create" method="post" class="form-horizontal" role="form"> <div class="form-group"> <input name="url" type="text" id="url" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url2" type="text" id="url2" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url3" type="text" id="url3" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url4" type="text" id="url4" class="form-control" placeholder="URL"> </div> <div class="form-group"> <input name="url5" type="text" id="url5" class="form-control" placeholder="URL"> </div> <div class="form-group"> <button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button> </div> </form> </p> <p id="demo"></p> </div>
Okay so through the help of several people on here (credit to all of you, thanks for your help!) I finally reached a solution that works perfectly. :)
$(window).load(function(){
(function () {
$('form input').keyup(function () {
var url = [false, false, false, false, false];
var plus = -1;
var next;
$('form input').each(function () {
plus = plus + 1;
if ($(this).val() != '') {
url[plus] = true;
next = plus + 1;
$("#url"+next).show();
} else {
url[plus] = false;
next = plus + 1;
$("#url"+next).val("");
$("#url"+next).hide();
}
});
});
})()
});
HTML:
<div class="inner cover">
<h1 class="cover-heading">Create.</h1>
<p class="lead">
<form action="./index.php?p=create" method="post" class="form-horizontal" role="form">
<div class="form-group">
<input name="url0" type="text" id="url0" class="form-control" placeholder="URL" required>
</div>
<div class="form-group">
<input name="url1" type="text" id="url1" style="display:none" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<input name="url2" type="text" id="url2" style="display:none" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<input name="url3" type="text" id="url3" style="display:none" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<input name="url4" type="text" id="url4" style="display:none" class="form-control" placeholder="URL">
</div>
<div class="form-group">
<button type="submit" name="submit_url" class="btn btn-lg btn-default">Go!</button>
</div>
</form>
</p>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.