I have a index.html page in Framework7 template which acts like master page, and sub pages for example contact.html ;
<div class="pages">
<div data-page="contact" class="page no-toolbar no-navbar">
<div class="page-content">
<div class="navbarpages navbarpagesbg">
<div class="navbar_left">
<div class="logo_text">BLIX</div>
</div>
<div class="navbar_right navbar_right_menu">
<img src="images/icons/white/menu.png" alt="" title="" />
</div>
<div class="navbar_right">
<img src="images/icons/white/user.png" alt="" title="" />
</div>
<div class="navbar_right">
<img src="images/icons/white/cart.png" alt="" title="" /><span>3</span>
</div>
</div>
<div id="pages_maincontent">
<h2 class="page_title">CONTACT</h2>
<div class="page_single layout_fullwidth_padding">
<h2 id="Note"></h2>
<div class="contactform">
<form class="" id="ContactForm" method="post" action="">
<label>Name:</label>
<input type="text" name="ContactName" id="ContactName" value="" class="form_input required" />
<label>Email:</label>
<input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input required email" />
<label>Message:</label>
<textarea name="ContactComment" id="ContactComment" class="form_textarea textarea required" rows="" cols=""></textarea>
<input type="submit" name="submit" class="form_submit" id="submit" value="Send" />
<input class="" type="hidden" name="to" value="youremail#yourwebsite.com" />
<input class="" type="hidden" name="subject" value="Contacf form message" />
<label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
</form>
</div>
<h3>Our Location</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193578.74109041138!2d-73.97968099999997!3d40.70331274999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York+NYC%2C+New+York%2C+Statele+Unite+ale+Americii!5e0!3m2!1sro!2s!4v1425027721891" width="100%" height="200" frameborder="0" style="border:0"></iframe>
<blockquote>
Adress: New York 23066 / Pacific Street / Brooklyn <br />
Email: email#yourwebsite.com <br />
Mobile: +900 456 567 77
</blockquote>
Call Us Now!
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
When I add bottom page this javascript ;
<script type="text/javascript">
alert('Hello World!');
</script>
It doesn't trigger and it doesn't give any error. When I add it to bottom of index.html page or my-app.js file it works. But I need some specific javascripts in sub pages. How can I achive this? Thanks.
Page Events: https://framework7.io/docs/page.html#page-events
On your index page, include a whatevername.js file and put page specific logic inside it. (Alternative ways with routing and components)
Inside that js file, target the page by it's data-name, and the page event you want it to be run at.
Example: on my html page called home
<div class="page" data-name="home"> with whatever normal html the page has inside it.
In my js file I would run js on it by using this
$$(document).on('page:init', '.page[data-name="home"]', function (e) {
//whatever code here
alert('Hello World!');
})
So on the home page, on its init event, it will trigger the javascript that has alert hello world.
Starting from a template will make it easier to see how different parts work within F7. https://framework7.io/templates/ The Single View is a good starting point.
I want to fill out an invitation.
Under recipient name I type in the recipient name and then reload the page but nothing happens. The text I put there still remains along with the organization name, event date, url, and host name.
Such as under recipient name I put Gwendalyn Bears and Organization Name I put Tech Industries. Then when I reload the page those names are still there.
Below is my javascript code. It is only two lines but that's all I got at the moment.
function resetForm() {
document.getElementById("recipientName").value = default;
}
My html document so you will know what I am doing. Just so you know I am having to put Javascript into the code. Variables in a form is what it is called.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home
</li>
<li>Invitation
</li>
<li>Gallery
</li>
<li>Registration
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:
</label>
<input type="text" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit">
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName">organizationName</span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT3215 tasks.
</footer>
<script src="invite.js"></script>
I am working on validating forms am not sure if I am making it more complicated than it needs to be. I have a variable that i'm comparing the element to and then on success replacing a img src with a check for success or x for failure. It is supposed to run my validateData function once the field is unfocused. Here is the js. My img src src does not change when I test the first field by putting in numbers to trigger the redx.png src change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementsById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
{
image1.src="check.png";
}
else{
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>
You can't just simply set the action to your JS script, you will need to use the onsubmit event handler.
<form onsubmit="validateData">
This will trigger the validateData method once the form is submitted. This won't stop the form from performing as usual though, you will need to stop that in your validateData method like so:
function validateData (event) {
// prevent the form from actually submitting
event.preventDefault();
}
There are multiple problems here; some have been mentioned by others. One of the main problems is you had getElementsById instead of getElementById. If you haven't figured out how to pull up the developer console and see what errors you're getting, now would be a good time.
Form validation can get pretty complicated and normally I use a library that does the heavy lifting. You might look into that.
Here is a working version of what I'm guessing you're trying to do. It's far from optimal but it's what I was quickly able to come up with.
https://jsfiddle.net/ec2L08vf/1/
I am trying to display different fields of the form according to selection. It is working properly till few stages. At 6th page, the page refreshes automatically without any input from my side. My code is below. Please help me gettiig out of this error. The actual working page can be found here.
function next(idshow,hide){
$("#page"+hide).hide();
$("#page"+idshow).show();
return false;
}
<html>
<head>
<title>My Survey </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.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>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE
SURVEY </h1>
<button id="1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display:none">
<center><h1>IMPORTANT</h1> </center>
<p> If you Accept the terms and conditions and provide a relevant information, then you may get UPTO 1 year free trial of apps developed by company in future. </p>
<button id="2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display:none">
<h2><center> This app is only for survey and not responsible for any claims made by company.</center></h2>
<h3> <center>TERMS AND CONDITIONS </center></h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done). </p>
<p>2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE BOUND TO THE CLIENT: <br>
a) You must provide all information which is asked by the company. <br>
b) In future, if required you provide more information if asked. <br>
c) If after accepting the terms and condition, not providing or non-cooperating in collecting relevant information, the company have all authority to cancel the contract . <br>
d) In future company has all powers to change the terms and conditions without prior notice. <br>
e) If any new clause to be added also accepted by the client. <br> </p>
<button id="3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display:none">
<p align="center"><strong>ARE YOU PROFESSIONAL?</strong></p>
<p><form name="myform" method="POST"> <input type="radio" name="r1" onclick="next(5,4)" value="YES">YES </p>
<p> <input type="radio" name="r1" onclick="next(17,4)" value="NO">NO </p>
</div>
<div class="col-md-12" id="page5" style="display:none">
<h2> Personal Information</h2>
<p>Profile Picture <input type="file" id="pic" class="myinput" name="sbm" align="left" accept="image/*" value="Browse"> </p>
<p>
FIRST NAME :
</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>
MIDDLE NAME:
</p>
<p> <input type="text" class="nm" name="mname" id="nm">
</p>
<p>
LAST NAME :
</p>
<p>
<input type="text" name="lname" class="nm" id="nm">
</p>
<p>
QUALIFICATION
</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p>
</p>
<p id="hd1"> example(MBBS,BHMS,DHMS ETC)
</p>
<p id="hd2">
DESGINATION:
</p>
<p> <input type="text" name="desg" id="desg">
</p>
<p>
</p>
<p>example(genral practioner, surgeon, skin specialist etc)
</p>
<p>
EXPIRENCE:
</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button id="5" onclick="next(6,5)">NEXT</button>
</p>
</div>
<div class="col-md-12" id="page6" style="display:none">
<h1> This is Page 6 </h1>
<button id="6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display:none">
<h1> This is Page 17</h1>
<button id="17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display:none">
<h1> This is page 18 </h1>
</div>
</form>
</body>
</html>
Please help me understand what problem is there actually??
You should specify type="button" in your button attributes tag like this
<button type="button" id="5" onclick="next(6,5)">NEXT</button>
If you are using button without specifying the type it will work as submit button for containg form.
your previous button 1,2,3,4 works because they are not inside form tag
You need to prevent form's submitting action by adding onsubmit="return XXX();" in your form element.
The button submits the form, as its default function. It doesn't reach the return false in your function and I am suspecting because of the little content on this pages.
Since you are including JQuery, you can do:
$(document).ready(function(){
$('button').click(function(e){
e.preventDefault();
$(this).closest('div.col-md-12').hide();
$('#page' + $(this).data('show')).show();
});
});
This will give all buttons an onclick event and you will not have to repeat the onclick and function on each one.
The above will hide the button's parent div with class col-md-12 and show the div with id page + the value from the button (see below)
Then the button should become:
<button data-show="2">NEXT</button>
On data show attribute you enter the id of the next div you want to show.
Id's assigned to buttons are only numbers id should start with
character and can contain alphabets,numbers and '_'.
Your form tag should start after body open.
Validate duplicate Id's in your page.
Replace add button type as "button". e.g. <button type="button" id="b1">
Fix these problems your html page will work properly.
Added working code below
<html>
<head>
<title>My Survey</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.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>
function next(idshow, hide) {
$("#page" + hide).hide();
$("#page" + idshow).show();
//return false;
}
</script>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE SURVEY</h1>
<button type="button" id="b1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display: none">
<center>
<h1>IMPORTANT</h1>
</center>
<p>If you Accept the terms and conditions and provide a relevant
information, then you may get UPTO 1 year free trial of apps
developed by company in future.</p>
<button type="button" id="b2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display: none">
<h2>
<center>This app is only for survey and not responsible for
any claims made by company.</center>
</h2>
<h3>
<center>TERMS AND CONDITIONS</center>
</h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR
FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done).
</p>
<p>
2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE
BOUND TO THE CLIENT: <br> a) You must provide all information
which is asked by the company. <br> b) In future, if required
you provide more information if asked. <br> c) If after
accepting the terms and condition, not providing or non-cooperating
in collecting relevant information, the company have all authority to
cancel the contract . <br> d) In future company has all powers
to change the terms and conditions without prior notice. <br> e)
If any new clause to be added also accepted by the client. <br>
</p>
<button type="button" id="b3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display: none">
<p align="center">
<strong>ARE YOU PROFESSIONAL?</strong>
</p>
<p>
<input type="radio" name="r1" onclick="next(5,4)" value="YES">YES
</p>
<p>
<input type="radio" name="r1" onclick="next(17,4)" value="NO">NO
</p>
</div>
<form name="myform" method="POST" action="">
<div class="col-md-12" id="page5" style="display: none">
<h2>Personal Information</h2>
<p>
Profile Picture <input type="file" id="pic" class="myinput"
name="sbm" align="left" accept="image/*" value="Browse">
</p>
<p>FIRST NAME :</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>MIDDLE NAME:</p>
<p>
<input type="text" class="nm" name="mname" id="mnm">
</p>
<p>LAST NAME :</p>
<p>
<input type="text" name="lname" class="nm" id="lnm">
</p>
<p>QUALIFICATION</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p></p>
<p id="hd1">example(MBBS,BHMS,DHMS ETC)</p>
<p id="hd2">DESGINATION:</p>
<p>
<input type="text" name="desg" id="desg">
</p>
<p></p>
<p>example(genral practioner, surgeon, skin specialist etc)</p>
<p>EXPIRENCE:</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button type="button" id="b5" onclick="next(6,5)">NEXT</button>
</p>
</div>
</form>
<div class="col-md-12" id="page6" style="display: none">
<h1>This is Page 6</h1>
<button type="button" id="b6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display: none">
<h1>This is Page 17</h1>
<button type="button" id="b17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display: none">
<h1>This is page 18</h1>
</div>
</body>
</html>
I have a form with drop down, text boxes and one submit button. I can submit form with ENTER key like just add ng-keypress="addBookmarkOnEnter($event) with any text boxes and it'll work.
But can I do same task without adding ng-keypress with any text box?
Here is my form:
<form>
<div><input type="text" class="greyPhold" placeholder="http://" data-ng-model="bookmark.url" /></div>
<div class="forSelect">
<div class="selHead" data-ng-class="{hOpen: popup.dropdownStatus}">
<button data-ng-click="toggleDropdown()"><span data-ng-bind="popup.selectedCategory"></span></button>
<ul id="testDiv2" class="dropdownH">
<li data-ng-repeat="category in categories track by $index" data-ng-click="selectCategory($index)">
<div class="colony pull-left"><span>{{category.category_name}}</span></div>
<div class="pull-right"><input type="radio" name="tag" /><label></label></div>
</li>
</ul>
</div>
</div>
<div class="createColony">
<input type="text" class="whitePholder" placeholder="Create a new colony" data-ng-model="bookmark.categoryName"/>
</div>
<div class="complete text-center"><button type="submit" class="done" data-ng-click="addBookmark()">Complete</button></div>
</form>
hope this code would be help you
<html>
<head>
<script src="angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
</head>
<body bgcolor="gray">
<div id="container" ng-app='two_way' ng-controller="two_way_control" style="background-color:CCFF66">
<p style="padding:10px;">
<h1 align="center"> Search Product </h1>
</p>
<p align="center">
<form method="post">
<input type="text" ng-model="searchText" placeholder="Enter a name here" required>
<button ng-click="check(searchText)">Search</button>
</form>
</p>
Search Item Name: {{searchText}}
</div>
</body>
</html>
and use given code inside controller
$scope.check=function(searchText){};