I'm doing a single page application phonegap project. I have a page called #pageAdd. Inside #pageAdd, I have a form and if the form is valid, then I want to open #pageView using the id. How can I do that in submithandler? I tried but I'm not sure of the right way to call #pageView.
HTML
<div data-role="page" id="pageAdd">
<div data-role="header">
<h2>Hello</h2>
</div>
<!-- main -->
<div data-role="main" class="ui-content">
<form id="myform" class="validate">
<div data-role="fieldcontain">
Name : <input type="text" name="name" id="name" placeholder="Enter Name" class="required"/>
</div>
<div data-role="fieldcontain">
Location : <input type="text" id="loc" placeholder="Enter Location" />
</div>
<div class="ui-body ui-body-b">
<button type="submit" id="but_submit">Submit</button>
</div>
</form>
</div>
<!-- footer -->
<div data-role="footer">
<h2>mine</h2>
</div>
</div>
<div data-role="page" id="pageView">
<div data-role="header">
<h2>View</h2>
</div>
<!-- main -->
<div data-role="main" class="ui-content">
</div>
<!-- footer -->
<div data-role="footer">
<h2>mine</h2>
</div>
</div>
Javascript
$("#myform").validate({
submitHandler: function(form) {
location.href=$('#pageView');
}
});
Related
this may be a little confusing, but let me show you the problem.
I am using express-handlebars in a NodeJs web app. I have to get user input in forms. To get that done, let's say I have two separate forms in two different views 1. Login 2. Book. What I want to achieve is code-reuse of the following partial/template:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{{ formBody }}}
</div>
</div>
</div>
Can anyone guide me how do I use the above template in a form like below:
{{> entry_form }} <!-- start of the form -->
<form class="form-horizontal" method="post" action="/login">
<div class="form-group">
<label for="email_address" class="label">Email Address:</label>
<input type="email" name="email_address" id="email_address" class="form-control"
placeholder="Email Address" autofocus required maxlength="250" value="{{email}}"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password"
required maxlength="250" value="{{password}}"/>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="remember_me" id="remember_me" checked="{{rememberMe}}"/>
Remeber me!
</div>
</div>
<div class="form-group text-danger">
{{ errorMessage }}
</div>
<div class="form-group text-center">
<input type="submit" value="Sign-in" class="btn btn-success"/>
</div>
</form> <!-- end of the form -->
I want to get the following output after compilation. Assuming that {{variables}} will be replaced by the provided values in the context:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>Sing in</h4>
</div>
</div>
<div id="form-body" class="card-body">
<form class="form-horizontal" method="post" action="/login">
<div class="form-group">
<label for="email_address" class="label">Email Address:</label>
<input type="email" name="email_address" id="email_address" class="form-control"
placeholder="Email Address" autofocus required maxlength="250" value=""/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Password"
required maxlength="250" value=""/>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="remember_me" id="remember_me" />
Remeber me!
</div>
</div>
<div class="form-group text-danger">
</div>
<div class="form-group text-center">
<input type="submit" value="Sign-in" class="btn btn-success"/>
</div>
</form>
</div>
</div>
</div>
I solved the problem myself. Posting here the solution just to help others if they run into such issues.
What I have done is, I have used inline partials as following.
enclose the login form into inline partial:
{{#*inline loginForm}}
<form class="form-horizontal" method="post" action="/login">
<!-- form contorls -->
</form>
{{/inline}}
{{#> entry-form}}
{{> (lookup . 'loginForm')}}
{{/entry-form}}
Define form container partial as following:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{> (dataform) }}
</div>
</div>
</div>
</div>
Please note that I have kept the form container partial in views/partials/entry-from.hbs file, and have loaded them by using:
const express = require('express');
let app = express();
app.engine('hbs', hbs({
extname:'hbs',
defaultLayout:'layout',
layoutsDir:join(__dirname,'views/layouts/'),
partialsDir: [
join(__dirname,'views/partials/')
]
}));
I seem to have arrived a bit late, but I would like to propose an alternative to #Nadeem Jamali's solution for those who have run into the same problem.
Reading the documentation I found the following: https://handlebarsjs.com/guide/partials.html#partial-blocks
You can use {{#partial-block}} in order to represent the content that will be embeded into your partial. Let me give you an example:
container-partial.hbs
<h1>Welcome to the container partial!</h1>
<div style="background-color: red">
<h2>This is the content of the partial</h2>
{{#partial-block}}
<!-- More code here... -->
</div>
Now, in every handlebars file you can use this partial like this:
foobar.hbs
{{#> container-partial }}
<h1>And here you can write the content of "container-partial", in other words, what is going to be replaced in #partial-block</h1>
{{/container-partial}}
And the output after compilation will be:
<h1>Welcome to the container partial!</h1>
<div style="background-color: red">
<h2>This is the content of the partial</h2>
<h1>And here you can write the content of "container-partial", in other words, what is going to be replaced in #partial-block</h1>
<!-- More code here... -->
</div>
In this case, we can find a solution to #nadeem-jamali's question by doing the following:
form-container.hbs
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>{{ formTitle }}</h4>
</div>
</div>
<div id="form-body" class="card-body">
{{> #partial-block }}
</div>
</div>
</div>
</div>
Now, we can use the partial like this:
login-form.hbs
{{#> form-container formTitle="FooBar"}}
<form class="form-horizontal" method="post" action="/login">
<!-- Form content -->
</form>
{{/form-container}}
And the result will be:
<div class="row justify-content-sm-center">
<div class="col-sm-auto">
<div id="form-panel" class="card" style="margin-top:15%">
<div id="form-header" class="card-header">
<div class="card-title">
<h4>FooBar</h4>
</div>
</div>
<div id="form-body" class="card-body">
<form class="form-horizontal" method="post" action="/login">
<!-- Form content -->
</form>
</div>
</div>
</div>
</div>
Hope it helps :D !
I have a signIn form and a register form. I want to that when a user clicks on register button the signIn form should be removed or disappear and instead register form should be there in it'place.
Html page
<body>
<nav class="navbar navbar-inverse" id="auto">
<div class="container">
<div class="navbar-header">
<!-- <i class="fa fa-beer" aria-hidden="true" id="logo"></i> -->
<a class="navbar-brand">Work Planner</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<!-- Sign In Form -->
<div id="signIn-form">
<form action="www.workplanner.com">
<h3>Sign In</h3>
<div>
<label><input type="email" name="username" placeholder="user#domain.com"></label>
<!-- <hr> -->
</div>
<div>
<label><input type="password" name="username" placeholder="password"></label>
<!-- <hr> -->
</div>
<div>
<button class="btn">Log in</button>
<p>New User? Register</p>
</div>
</form>
</div>
<!-- Registeration Form -->
<div id="register-form">
<form action="www.workplanner.com">
<h3>Register</h3>
<div>
<label><input type="text" name="name" placeholder="Your Name"></label>
<!-- <hr> -->
<div>
<label><input type="email" name="email" placeholder="user#domain.com"></label>
<!-- <hr> -->
</div>
<div>
<label><input type="password" name="password" placeholder="password"></label>
<!-- <hr> -->
</div>
<div>
<button class="btn">Register</button>
<p>Returning User? Log in </p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="signIn.js" type="text/javascript"></script>
JS file
var register-btn = document.getElementById("register");
var signIn-btn = document.getElementById("signIn");
var signIn-form = document.getElementById("signIn-form");
var register-form = document.getElementById("register-form");
register-btn.addEventListener('click', function() {
signIn-form.style.display = "none";
register-form.style.display = "block";
});
signIn-btn.addEventListener('click', function() {
register-form.style.display = "none";
signIn-form.style.display = "block";
});
I know the display property just makes the element disappear or appear, but this is not working.
The answer is: don't use kebab case(https://stackoverflow.com/a/17820138/6429774) for variable names.
var registerBtn = document.getElementById("register");
var signInBtn = document.getElementById("signIn");
var signInForm = document.getElementById("signIn-form");
var registerForm = document.getElementById("register-form");
registerBtn.addEventListener('click', function(){
signInForm.style.display = "none";
registerForm.style.display = "block";
});
signInBtn.addEventListener('click', function(){
registerForm.style.display = "none";
signInForm.style.display = "block";
});
<nav class="navbar navbar-inverse" id="auto">
<div class="container">
<div class="navbar-header">
<!-- <i class="fa fa-beer" aria-hidden="true" id="logo"></i> -->
<a class="navbar-brand">Work Planner</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<!-- Sign In Form -->
<div id="signIn-form">
<form action="www.workplanner.com">
<h3>Sign In</h3>
<div>
<label><input type="email" name="username" placeholder="user#domain.com"></label>
<!-- <hr> -->
</div>
<div>
<label><input type="password" name="username" placeholder="password"></label>
<!-- <hr> -->
</div>
<div>
<button class="btn">Log in</button>
<p>New User?
Register
</p>
</div>
</form>
</div>
<!-- Registeration Form -->
<div id="register-form">
<form action="www.workplanner.com">
<h3>Register</h3>
<div>
<label><input type="text" name="name" placeholder="Your Name"></label>
<!-- <hr> -->
<div>
<label><input type="email" name="email" placeholder="user#domain.com"></label>
<!-- <hr> -->
</div>
<div>
<label><input type="password" name="password" placeholder="password"></label>
<!-- <hr> -->
</div>
<div>
<button class="btn">Register</button>
<p>Returning User?
Log in
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
I created a form and when I submitted it, it was not saving data in chrome autofill database. I inspected html page of amazon.com and I have come up with a bare minimum form that helps saving data in auto fill database. Following is the code.
<BODY>
<form action="" method="post">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-lg-6">
<div >
<label for="address-ui-widgets-enterAddressLine1" >First Nadme</label>
<input name="address-ui-widgets-enterAddressLine1" id="address-ui-widgets-enterAddressLine1" maxlength="30" type="text">
</div>
<div >
<label >Lastaaa </label>
<input id="address-ui-widgets-enterAddressCity" maxlength="30" type="text">
</div>
<div >
<label >username</label>
<input id="address-ui-widgets-enterAddressStateOrRegion" maxlength="150" type="text" >
</div>
<div >
<label >dfkdfk</label>
<input id="address-ui-widgets-enterAddressPostalCode" maxlength="254" type="text">
</div>
</div>
</div> <!-- panel-body -->
<div class="panel-footer">
<input class="btn btn-success btn-sm" type="submit" value="Register">
</div> <!-- panel-footer -->
</div> <!-- panel -->
</form>
</BODY>
I have just added random labels. The only thing that i am not getting is that if I change name of any id then auto fill does not save any data. I am unable to get the logic.
I have written a code which uses Angular JS form validation.
There are two forms,
The first uses form validation
and the second use ng-messages,
The problem is, the second form doesn't seems to work as first one.
In the first form, 3 text fields,
end field has required.
So once I load the page and try to submit the form without filling it,
the error messages appear across the respective fields.
Now if the text field is not empty but has some number validation,
and if I enter text, that only number validation message is shown.
But the same kind for above mentioned validation behavior I am not able to implement in my second form using ng-Messages.
The code is as below,
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Validator Examples</title>
<script type="text/javascript" src="/home/rahul/Installers/jquery-3.0.0.js"></script>
<script type="text/javascript" src="/home/rahul/Installers/angular.js"></script>
<script type="text/javascript" src="/home/rahul/Installers/Bootstrapv3.0.2/js/bootstrap.js"></script>
<link rel="stylesheet" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap.css">
<link rel="stylesheet" href="/home/rahul/Installers/Bootstrapv3.0.2/css/bootstrap-theme.css">
<script type="text/javascript">
angular.module("myApp",[]);
angular.module("myApp").controller("myCtrl",myCtrl);
function myCtrl(){
var vm = this;
vm.formOne = {}
vm.formOne.name = "";
vm.formOne.address = "";
vm.formOne.age = 0;
vm.formTwo = {}
vm.formTwo.name = "";
vm.formTwo.address = "";
vm.formTwo.age = 0;
}
</script>
<style type="text/css">
.form-error{
color : red;
}
</style>
</head>
<body ng-controller="myCtrl as vm">
<div class="container">
<div class="page-header">
<h3>Validator Examples</h3>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="page-header">
<h5><b>ngForm Validator Examples</b></h5>
</div>
<form name="formOne" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name" required ng-model="vm.formOne.name"
minlength="5" maxlength="10" />
<div ng-show="formOne.$submitted || formOne.name1.$touched">
<div ng-show="formOne.name1.$error.required" class="form-error">Name can't be empty</div>
<div ng-show="formOne.name1.$error.minlength" class="form-error">Name can't be less than 5</div>
<div ng-show="formOne.name1.$error.maxlength" class="form-error">Name can't be more than 10</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address1" placeholder="Address" ng-model="vm.formOne.address"
required />
<div ng-show="formOne.$submitted || formOne.address1.$touched">
<div ng-show="formOne.address1.$error.required" class="form-error">Address can't be empty</div>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" name="age1" placeholder="Age" ng-model="vm.formOne.age"
required number/>
<div ng-show="formOne.$submitted || formOne.age1.$touched">
<div ng-show="formOne.age1.$error.required" class="form-error">Age can't be empty</div>
<div ng-show="formOne.age1.$error.number" class="form-error">Age should be numeric</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="page-header">
<h5><b>ngForm ngMessages Validator Examples</b></h5>
</div>
<form name="formTwo" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name"
ng-model="vm.formTwo.name" required ng-minlength="5" ng-maxlength="10" />
<div ng-messages="formTwo.name1.$error"
ng-show="formTwo.$submitted || formTwo.name1.$touched" class="form-error" role="alert">
<div ng-message="required">Name can't be empty</div>
<div ng-message="minlength">Name can't be less than 5</div>
<div ng-message="maxlength">Name can't be more than 10</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address1" placeholder="Address" ng-model="vm.formTwo.address"
required />
<div ng-messages="formTwo.address1.$error"
ng-show="formTwo.$submitted || formTwo.address1.$touched" class="form-error">
<div ng-message="required">Name can't be empty</div>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" name="age1" placeholder="Age" ng-model="vm.formTwo.age"
required number />
<div ng-messages="formTwo.age1.$error" ng-show="formTwo.$submitted || formTwo.age1.$touched"
class="form-error">
<div ng-message="required">Age can't be empty</div>
<div ng-message="number">Age should be numeric</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div><!-- row -->
</div>
</body>
Let me show you the comparison,
in form one the first files validation is like
<form name="formOne" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name" required ng-model="vm.formOne.name"
minlength="5" maxlength="10" />
<div ng-show="formOne.$submitted || formOne.name1.$touched">
<div ng-show="formOne.name1.$error.required" class="form-error">Name can't be empty</div>
<div ng-show="formOne.name1.$error.minlength" class="form-error">Name can't be less than 5</div>
<div ng-show="formOne.name1.$error.maxlength" class="form-error">Name can't be more than 10</div>
</div>
</div>
And in the form two, the validation is like
<form name="formTwo" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name"
ng-model="vm.formTwo.name" required ng-minlength="5" ng-maxlength="10" />
<div ng-messages="formTwo.name1.$error"
ng-show="formTwo.$submitted || formTwo.name1.$touched" class="form-error" role="alert">
<div ng-message="required">Name can't be empty</div>
<div ng-message="minlength">Name can't be less than 5</div>
<div ng-message="maxlength">Name can't be more than 10</div>
</div>
In form one, I am able to see only those messages which are invalid,
But in form two I see all the error messages in that field.
You can also see my working code on this like,
FormValidation
Please let me know, were I am going wrong
make sure you have added angular-message.js file in <script>
than Inject ngMessages in module like below
angular.module('myApp', ['ngMessages']);
Write controller alias with form="vm.formTwo" and ng-messages="vm.formTwo....
here is the working example
I am very new to javascript, and I am trying to build a mobile app with Jquery Mobile. I would like the user to input one value on each page and then on the last page they will click submit and it will display the value on the last page. I have been working on this for like 4 hours and I can get the calculation to work on the same page as the submit button but not on the next page.
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = (result);}}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
<input id="btnAdd" type="submit" value="Submit" onclick="sum();" data-theme="b" />
<span id="showResult"></span>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
Please try below code.It's displaying the result in the final page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</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>
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = "Result is: "+(result);}
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
B
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
</body>
</html>
You need to pass the value to the pages submitting a form
// page1
<form action="page2" method="post">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit" />
</form>
so in the other page you can get both and work with
// page2
<input type="hidden" name="value1" value="value from page 1"/>
<input type="hidden" name="value2" value="other value from page 1"/>
to get this with jQuery you can do
var val1 = jQuery('input[name=value1]');
var val2 = jQuery('input[name=value2]');