Jquery is not working on bootsrap Popover element - javascript

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>

Related

how I validate JavaScript

Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is withdrawn balance decreases but I set if the condition for validation for this reason -1 does not work. how I validate properly and balance also decreases when
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control" placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control" placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is
withdrawn balance decreases but I set if the condition for validation for this reason -1 does not
ork. how I validate properly and balance also decreases when
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function() {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function() {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber;
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance
is withdrawn balance decreases but I set if the condition for validation for this reason -1 does
not work. how I validate properly and balance also decreases when
function updateSpanText(id, depositNumber) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = depositNumber + currentBalanceNumber;
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
</script>
withdraw.
Here is what you want:
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function () {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function () {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber, true);
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
function updateSpanText(id, depositNumber, isWithdraw = false) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = currentBalanceNumber + (isWithdraw ? -depositNumber : depositNumber);
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
}
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control"
placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control"
placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Changing Form Attributes Before Submission

I'm working on something that involves ensuring the method of form submission is POST not GET when the method might have been omitted somehow and somewhere. A JS/jQuery function checks each form before submission for a particular class. If the class exists, it goes on to check the method. If the method is a GET, it should ignore it and submit the form. But if it is undefined or empty, it should proceed to set the method to POST then submit.
This is the JQuery used. The HTML follows.
$(document).ready(function() {
$('form').submit(function() {
if (this.find(':submit').is('.ckh-method')) {
if ((this.attr('method') !== "GET" && this.attr('method') == "") || this.attr('method') == undefined) {
this.setAttribute('method', 'POST');
return true;
}
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</div>
</form>
</div>
</body>
</html>
Problem: The form method doesn't change on submission because there is a JS error somewhere in my code. I'm suspecting it has to do with the 'this' keyword. Maybe I used it wrongly. I've tried setting breakpoints so I can identify the issue but the form submits before I can step into the function (in my Developer's tool) and discover the problem. Can someone help me out?
var frm = document.getElementById("form1")
frm.addEventListener("submit" ,checkmethod )
function checkmethod(event){
event.preventDefault();
if(frm.method !="GET") frm.method = "POST";
frm.submit();
}
<form id="form1" action="" >
<button type="submit">submit</button>
</form>
Found your console error. bootstrap js requires jquery so i have corrected the sequence as below
first : Jquery JS
second : Bootstrap JS
also use $(this) instead of just this
use attr for setting attributes instead of setAttribute
$('form').submit(function() {
if ($(this).find(':submit').is('.ckh-method'))
{debugger;
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fontawesome-free/web-fonts-with-css/css/fontawesome-all.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form" action="phpFile.php" method="">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-user-alt"></i>
</span>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" required="required" value=''>
</div>
</div>
<div class="col-sm-12">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" required="required" value=''>
</div>
</div>
<p class="conditions col-sm-12">Forgot Username or Password?
<div class="text-center col-sm-12 error"></div>
</p>
<div class="col-sm-12" id="btn-hold">
<button type="submit" class="btn btn-success btn-block ckh-method">Log In</button>
</div>
<div class="col-sm-12">
<a type="button" class="btn btn-link btn-block" href="proceed.php">Sign Up</a>
</div>
</form>
</div>
</body>
</html>
I edited the snippet:
$(document).ready({
$('form').submit(function() {
if ($(this).find(':submit').is('.chk-method')) {
if (($(this).attr('method') !== "GET" && $(this).attr('method') == "") || $(this).attr('method') == undefined) {
$(this).attr('method', 'POST');
return true;
}
}
})
})
Use $(this) instead of 'this' and attr() instead of setAttribute().

How to switch to Login tab when form is submitted?

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

Input type=file validation stops other input types validation

I'm trying to use jquery form validator to validate a form that has multiple input fields and a mandatory file upload. For brevity, I reduced 1 text input field and 1 file upload field on my sample. The problem is every time a file is selected for upload then the validation on other field will not function.
< script >
$.validate({
form: '#frmSlide',
modules: 'file',
validateOnBlur: false,
errorMessagePosition: 'top', // Instead of 'element' which is default
scrollToTopOnError: false, // Set this property to true if you have a long form
onError: function($form) {
alert('Failed!');
},
onSuccess: function($form) {
alert('ok!');
return false; // Will stop the submission of the form
},
onElementValidate: function(valid, $el, $form, errorMess) {
console.log('Input ' + $el.attr('name') + ' is ' + (valid ? 'VALID' : 'NOT VALID'));
}
});
$("#imgfile").on('change', function() {
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function(e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image img-thumbnail"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
}); < /script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title></title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Aguafina+Script">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/theme.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" href="css/ie10-viewport-bug-workaround.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" />
<link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/theme-default.min.css" />
<link rel="stylesheet" href="css/typeaheadjs.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
<div class="form-group">
<label class="col-sm-4 control-label" for="imgfile">Image file</label>
<div class="col-sm-8">
<input type="file" id="imgfile" data-validation="required ratio mime size" data-validation-allowing="jpg, png, gif" />
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-md-offset-4" id="image-holder">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="seq">Sequence</label>
<div class="col-sm-8">
<input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i> Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</html>
Can anyone shed me light on how to fix it? Thanks.
Just change the ratio validation to data-validation-ratio="1:1" (or any ratio you want) instead of "ratio" in the data-validation. Working fiddle here - https://jsfiddle.net/Sanjeevi/s9o7273r/
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
<div class="form-group">
<label class="col-sm-4 control-label" for="seq">Sequence</label>
<div class="col-sm-8">
<input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="imgfile">Image file</label>
<div class="col-sm-8">
<input type="file" id="imgfile" data-validation="required mime size" data-validation-allowing="jpg, png, gif" data-validation-ratio="1:1"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-md-offset-4" id="image-holder">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i> Update</button>
</div>
</div>
</form>
</div>
</div>
</div>

Control text values with Jquery

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)

Categories