I'm learning jquery and jquery mobile. I try this; when next button is clicked, if input texts are empty, alert will be given. But how can i check all text values in the same method?
And if these are empty how can i stop next button action? Thanks.
<!DOCTYPE html />
<html>
<head>
<title>Ebru Sezal JQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<script type="text/javascript">
$(document).ready(function () {
$(".nextBtn").click(function () {
$('input:text').each(function (i) {
var uText = $(this).val();
if (!uText)
alert("alanlar boş olamaz!")
});
});
});
/*$("#nextBtn").click(function () {
// $('input[type="text"]').attr('required placeholder')
$(function () {
var values = $('input[type="text"]').map(function () {
return this.value
}).get()
})
$('input[type="text[]"]').each(function () {
alert($(this).val());
});*/
</script>
</head>
<body>
<div data-role="page" data-title="pOne" id="mainPage">
<div data-role="header" data-position="fixed">
<h1>Logo</h1>
</div>
<div data-role="popup" id="mainPopup">
<ul data-role="listview" data-inset="true" data-theme='d'>
<li data-icon="plus">New User</li>
<li data-icon="delete"><a href="#" >Exit</a></li>
</ul>
</div>
<div data-role="content">
<label for:"username">Username:</label>
<input type="text" />
<label for:"username">Password:</label>
<input type="password"/>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true" >Sign-in</a>
Log-in
</div>
</div>
<div data-role="footer" data-position="fixed">
footer
</div>
</div>
<div data-role=page id="registerPage1">
<div data-role="header" data-position="fixed"><h1>Registration</h1></div>
<div data-role="content">
<div data-role="fieldcontainer">
<label for:"name">Name:</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>
<div data-role:"fieldcontainer">
<label for:"surname">Surname:</label>
<input type="text" id="surname" required placeholder="Enter your surname">
</div>
<div data-role:"fieldcontainer">
<label for:"email">E-mail:</label>
<input type="email" id="email" required placeholder="Enter your e-mail">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> Back</li>
<li> Next </li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="registerPage2">
<div data-role="header"><h1>Registration</h1></div>
<div data-role="content">
<div data-role="fieldcontainer">
<label for="number">Number:</label>
<input type="number">
<label for="birthDay">Birthday:</label>
<input type="date">
<label for="city">City:</label>
<input list="cities" name="cities" >
<datalist id="cities">
<option value="İzmir"></option>
<option value="İstanbul"></option>
<option value="Ankara"></option>
<option value="Bursa"></option>
<option value="Antalya"></option>
<option value="Denizli"></option>
</datalist>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Next</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Check the variable before you proceed.
$(document).ready(function () {
$(".nextBtn").click(function () {
var text = $(this).val();
if (text){
//process
}
else{
//failed to process, give alert
}
});
});
What you are doing is correct only. Just try (uText == "") in if condition:
$(document).ready(function () {
$(".nextBtn").click(function () {
$('input:text').each(function (i) {
var uText = $(this).val();
if (uText == "")
alert("alanlar boş olamaz!")
return;
});
});
});
You can do this:
$(".nextBtn").click(function () {
// Get all the empty input textbox
var $inputs = $('input:text').filter(function () {
return $.trim(this.value) === '';
});
// If the number of empty textbox is more then 0
if($inputs.length > 0){
alert("alanlar boş olamaz!");
return false; // stop the next button action
}
return true;
});
Instead of the below code:
if (!uText)
alert("alanlar boş olamaz!")
use the below code:
if (!uText || uText == '') {
alert("alanlar boş olamaz!");
return false;
}
you can use
if(uText.length==0)
Related
I have checkbox nested in html elements. I want to target it and manipulates its value when somebody check it. I am trying this
jQuery(document).ready(function() {
jQuery('#my-form .checkbox-value input').click(function() {
jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
When someone click on label or checkbox it should changes values to yes if it is checked and no when it is not checked.
You could use this to target .on('change', '#my-form .checkbox-value input', function(){})
$(document).ready(function() {
$(document).on('change', '#my-form .checkbox-value input', function() {
console.log($(this).val())
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
And use if($(this).is(':checked')) to check if the box is checked
This should do it.
It's working with click event handler also.
$(document).ready(function() {
$('#my-form .checkbox-value input').click(function() {
if ($(this).prop("checked")) {
console.log('yes');
$(this).val('yes');
} else {
console.log('no');
$(this).val('no');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value">
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="no" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
If what you are trying to do is to pull the first assignment from the input value, it would be more logical to give a special id and process the elements with that id.
I hope the code below will enlighten you.
jQuery(document).ready(function() {
var my_inputs = jQuery('#my-form .checkbox-value input');
jQuery('#my-form .checkbox-value input').click(function() {
//jQuery('#my-form .checkbox-value input[value=yes]').prop('checked', jQuery(this).prop('checked'));
//jQuery('#my-form .checkbox-value input[value=no]').prop('checked', jQuery(this).prop('checked') === false);
$("#status").html(my_inputs.prop('checked') ? "true" : "false")
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
<div id="checkbox" class="checkbox-value" >
<label class="form-label forms-label-hide" for="checkbox_item">Checkboxes</label>
<ul id="checkbox_item">
<li class="choice-1 depth-1">
<input type="checkbox" id="checkbox_item_1" name="my-checkbox" value="Want to change this value on dom" />
<label for="checkbox_item_1">Yes, let me know when you have new blogs to share.</label>
</li>
</ul>
</div>
<div class="">
<button type="submit">Submit</button>
</div>
</form>
<p>
<span>input checked status : <code id="status"></code></span>
</p>
I want my calculator to insert numbers in the first value until an operator (like +) is clicked. Then the inserted numbers should go to the second value.
If I click the + it doesn't switch to the first if statement.
let clicked = 0;
console.log('startValue: ' + clicked);
operatorPlus_div.addEventListener('click', () => {
clicked = 1;
operator_div.innerHTML += '+';
console.log('clickedValue: ' + clicked);
})
function calc() {
//----------second-Value----------
if (clicked === 1) {
valueOne_p.addEventListener('click', () => {
secondValue += one;
secondValue_div.innerHTML += one;
console.log('secondValue');
})
valueTwo_p.addEventListener('click', () => {
secondValue += two;
secondValue_div.innerHTML += two;
})
//----------first-Value----------
} else if (clicked === 0) {
valueOne_p.addEventListener('click', () => {
firstValue += one;
firstValue_div.innerHTML += one;
console.log(clicked + ' firstValue');
console.log(operator_div.innerHTML);
})
valueTwo_p.addEventListener('click', () => {
firstValue += two;
firstValue_div.innerHTML += two;
console.log(clicked + ' firstValue');
})
}
}
calc();
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myCalc</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="media/css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="media/images/fav-icon.png">
</head>
<body>
<div class="wrapper">
<div class="container-all">
<div id="heading">
<h1>myCalc</h1>
</div>
<div class="container-input-showcase">
<div id="first-value"></div>
<div id="operator"></div>
<div id="second-value">
</div>
<div class="underline"></div>
</div>
<div class="container-result">
<div id="result">
</div>
</div>
<div class="container-input">
<div class="input" id="value-zero">
<p>0</p>
</div>
<div class="input" id="value-one">
<p>1</p>
</div>
<div class="input" id="value-two">
<p>2</p>
</div>
<div class="input" id="value-three">
<p>3</p>
</div>
<div class="input" id="value-four">
<p>4</p>
</div>
<div class="input" id="value-five">
<p>5</p>
</div>
<div class="input" id="value-six">
<p>6</p>
</div>
<div class="input" id="value-seven">
<p>7</p>
</div>
<div class="input" id="value-eight">
<p>8</p>
</div>
<div class="input" id="value-nine">
<p>9</p>
</div>
<div class="input" id="operator-plus">
<p>+</p>
</div>
<div class="input" id="operator-minus">
<p>-</p>
</div>
<div class="input" id="operator-multiply">
<p>*</p>
</div>
<div class="input" id="operator-divide">
<p>/</p>
</div>
<div class="reset">
<p>CE</p>
</div>
<div class="equals">
<p>=</p>
<div clearer></div>
</div>
</div>
</div>
</div>
<script src="media/script/app.js"></script>
</body>
</html>
I now put he calc () inside operatorPlus_div.addEventListener function and if i click + the next number clicked jumps in the secondValue. But it also get's interted in the firstValue..
I have a login page which has two forms sign up and login. Is has tabs to switch from login form to sign up form.
I want to know how can I show loin form when I am submitting the signup form on click of get started button.
I tried to put form action as #login but it did not work.
Login.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<br>
<h1 align="center"> TASK 2017</h1>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="Login.html" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<!-- <p class="forgot">Forgot Password?</p>-->
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
JS
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
How to do this? Please help.. Thank you.
You may change the active tab when the page is loaded to the tab present in the url:
$(document).ready( (function () {
target = $(this);
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
}).bind("#"+(window.location.href.split("#")[1]||"signup")));
Then you can go to http://example.com/login.html#login
I have the following form. The 'continue' button is meant to be disabled until all fields have been completed. I have tried this on jfiddle and the form works as intended, but on the actual .html file online it does not work. For example the button is always disabled even when the fields have been completed, any ideas?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Payment Gateway</title>
<link rel="stylesheet" type="text/css" href="ue1.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="UE.js"></script>
<script type="text/javascript" language="javascript">
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
</script>
</head>
<body>
<header id="header">
<div class="header1">
Accessibility Tools | Skip to Navigation | Skip to Content | Website A-Z | Sitemap | Report a Problem | Help
</div>
</header>
<div id="mainwrapper">
<div id="contentwrapper">
<div id="content">
<div id="bulogo">
<img src="bulogo.png" alt="BU Logo" style="width:220px;height:128px;">
<div id="bulogo1">
Payment Gateway
</div>
</div>
<p>
<div id="processorder">
Process Order
</div>
<div id="viewordersummary">
View Order Summary
</div>
<div id="lefthelp">
Help
</div>
<div id="progressbar">
<img src="PersonalProgressBar.png" alt="This is your progress">
</div>
<form action="ue.html" method="post" id="nameform">
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Account information</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">Username*:</label>
<input type="text" id="username" class="form-control" placeholder="Username" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters.">
<input type="text" id="password" class="form-control" placeholder="Password" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Password*:</label>
<input type="text" id="password1" class="form-control" placeholder="Password" required="">
</div>
</div>
</div>
<div id="form2">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Contact information</legend>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Title</label>
<select name="title" id="title" class="form-control">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Names(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Email*:</label>
<input type="text" id="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Email*:</label>
<input type="text" id="email1" class="form-control" placeholder="Email" required="">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="form3"
</div>
<input type="submit" id="continue" disabled value="Continue"/>
</div>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
Wrapping your code in document.ready might help.
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
If it's WordPress, be aware that you can't use $ for jQuery. You have to use jQuery('body input') instead, or wrap you code in the following:
$(function(){
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
})(jQuery);
Are you seeing any errors in the console?
Place your code in $(document).ready(function(){ // here }) function as below
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled())
$('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
I would try:
$('#continue').prop('disabled',!allFilled());
instead of
if(allFilled()) $('#continue').removeAttr('disabled');
Users may fill out all fields, and then delete one.
I want to display a sig-in form in a Bootsrap pop-over,It is working fine in modern browser.My problem is i have written a Jquery function to add placeholder for IE9 .
The function is not applied in the pop over element.
Please advice me that how to access a popover element.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
<style>
.form-control {width:120px;}
.popover {max-width:400px;}
.popper-content {
display:none;
}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"> </script>
</head>
<body>
<a class="popper" data-toggle="popover" data-placement="bottom" id="search">Pop me</a>
<div class="popper-content" id="popover-content" class="hide">
<div >
<div class="well">
<form role="form">
<div class="form-group">
<label class="control-label">E-Mail</label>
<input class="form-control" id="inputSuccess1" placeholder="hello#example.com" type="text">
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Passwort</label>
<input class="form-control" id="inputSuccess2" placeholder="******" type="password">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-block">Login</button>
</div>
<div class="row">
<div class="col-xs-6 col-md-8">
<div class="checkbox">
<label>
<input checked="checked" type="checkbox"> Remember me
</label>
</div>
</div>
<div class="col-xs-6 col-md-4">
<button type="button" class="btn btn-link pull-right small">Help</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
$(function ()
{
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
});
</script>
</div>
<script src="js/bootstrap.min.js" type="text/javascript"> </script>
</body>
<script>
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// Placeholder for IE
$(function {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text, textarea, input[type="password"]').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text, textarea, input[type="password"],input[type="password"]').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
</script>
</html>