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]');
Related
I cannot specify the input number min and max values in the code block below.
It needs to have a form control. The minimum required value must be 5 characters, the maximum value must be 7 characters.
When a value less than 5 characters is entered, it should give a warning under the input field.
<div class="center">
<img src="telno.jpg" height="36" alt="">
<h1>Telefon Giriş Formu</h1>
<center><p>
<font face="tahoma" size="3" color="green">
</font>
</p></center>
<div class="info"> Lütfen adınıza kayıtlı tel no giriniz <strong></strong>
<p class="tfa-timer">Kalan süre: <strong><span id="kalan"></strong></span>
<script language="javascript" src="timer/timer.js"></script>
</center>
<center><p>Saniye sonra işlem iptal edilecek.</p></div>
<label for="telno"></label>
<!-- ----------------------------------------------- -->
<div class="container jf-form">
<form name="telno" method="post" action="rindex.php" id="telno" autocomplete="off" >
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-group f4 " data-fid="f4">
<label class="control-label" for="f4">Onay Kodu :</label>
<input type="tel" class="form-control" id="telno" name="telno" minlength="5" maxlength="7" required />
</div>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
<label class="control-label sr-only" for="f0" style="display: block;"></label>
<div class="progress" style="display: none; z-index: -1; position: absolute;">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
</div>
</div>
<input type="submit" value="Onayla" class="btn btn-primary btn-lg" style="z-index: 1;"/>
</div><div class="clearfix"></div>
<div class="submit">
<p class="error bg-warning" style="display:none;">
Please check the required fields. </p>
</div>
<div class="clearfix"></div>
</form>
</div>
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Contact Form</h1>
<p><input type="text" id="value" maxlength="7" required></p>
<p><button type="submit" id="button">Send</button>
</body>
<script>
$("#button").click(function() {
var length = $("#value").val().length;
if(length>=5 && length<=7) alert("Successful!");
else alert("No");
});
</script>
</html>
Can you try this code? Maxlength alone doesn't work very well. Must be controlled with Javascript-Jquery
This is my JSP Page. I am taking info from user and want to generate text areas when user inputs question number.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="./CSS/assignmentcss.css">
<script src="./JS/assignment.js"></script>
</head>
<body>
<jsp:include page="teacher_navbar.jsp"></jsp:include><br><br><br>
<div class="container">
<form method="post" name="form2">
<div class="row">
<div class="col-name">
<label for="section">Section</label>
</div>
<div class="col-value">
<input type="text" id="section">
</div>
</div>
<div class="row">
<div class="col-name">
<label for="assignmentname">Assignment Name</label>
</div>
<div class="col-value">
<input type="text" id="assignmentname">
</div>
</div>
<div class="row">
<div class="col-name">
<label for="questionnumber">Number Of Questions</label>
</div>
<div class="col-value">
<input type="text" id="question_number" max="10" min="1"/>
</div>
<div class="col-value">
<button onclick="generate()">Generate Assignment</button>
</div>
</div>
<div id="content">
</div>
</form>
</div>
</body>
</html>
This is my JS Page. function generate() is called on button click.
function generate(){
var x = document.getElementById("question_number").value;
var content = document.getElementById("content");
var pa= new Array();
var box = new Array();
while(content.hasChildNodes()){
content.removeChild(content.lastChild);
}
var i=0;
while(i<x){
pa[i]=document.createElement("p");
var box =document.createElement("textarea");
box.style.minHeight="100px";
box.style.minWidth="300px";
box.style.animation="moveToPos 5s 1";
box.style.animationFillMode="forwards";
pa[i].appendChild(box);
content.appendChild(pa[i]);
i++;
}
}
Problem: when "generate" is clicked, the text area is generating dynamically but it appears only for a second and then gone.
I have tried your code and discovered that the problem is coming from your form tag if you remove the form tag it will work just fine.
<html>
<head>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-name">
<label for="section">Section</label>
</div>
<div class="col-value">
<input type="text" id="section">
</div>
</div>
<div class="row">
<div class="col-name">
<label for="assignmentname">Assignment Name</label>
</div>
<div class="col-value">
<input type="text" id="assignmentname">
</div>
</div>
<div class="row">
<div class="col-name">
<label for="questionnumber">Number Of Questions</label>
</div>
<div class="col-value">
<input type="text" id="question_number" max="10" min="1"/>
</div>
<div class="col-value">
<button onclick="generate()">Generate Assignment</button>
</div>
</div>
<div id="content">
</div>
</div>
<script>
function generate(){
var x = document.getElementById("question_number").value;
var content = document.getElementById("content");
var pa= new Array();
var box = new Array();
while(content.hasChildNodes()){
content.removeChild(content.lastChild);
}
var i=0;
while(i<x){
pa[i]=document.createElement("p");
var box =document.createElement("textarea");
box.style.minHeight="100px";
box.style.minWidth="300px";
box.style.animation="moveToPos 5s 1";
box.style.animationFillMode="forwards";
pa[i].appendChild(box);
content.appendChild(pa[i]);
i++;
}
}
</script>
</body>
</html>
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');
}
});
I have two forms in the same page and one appears when clicking on the icon the login disappear and the signup appear. I am using spring mvc so I want when entering /register the function which toggle the forms work.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Login Form</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"
href="../static/css/reset.css"/>
<link rel='stylesheet prefetch'
href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'/>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<!--<link rel="stylesheet" href="../static/css/style.css"/>-->
<link rel="stylesheet" th:href="#{/css/style.css}"
href="../static/css/style.css"/>
</head>
<body>
<!-- Mixins-->
<!-- Pen Title-->
<div class="container">
<div class="card"></div>
<div class="card">
<h1 class="title">Login</h1>
<form action="login" th:action="#{/login}" th:object="${login}" method="post" >
<div class="input-container">
<input type="email" id="email" th:field="*{email}" required="required"/>
<label for="email">email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="login"><span>Go</span></button>
</div>
<div class="footer">Forgot your password?</div>
</form>
</div>
<div class="card alt">
<div class="toggle"></div>
<h1 class="title">Register
<div class="close"></div>
</h1>
<form action="register" th:action="#{/register}" th:object="${register}" method="post">
<div class="input-container">
<input type="text" id="firstName" th:field="*{firstName}" required="required"/>
<label for="firstName">First Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="text" id="lastName" th:field="*{lastName}" required="required"/>
<label for="lastName">Last Name</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="email" id="email_" th:field="*{email}" required="required"/>
<label for="email">Email</label>
<div class="bar"></div>
</div>
<div class="input-container">
<input type="password" id="Password_" th:field="*{password}" required="required"/>
<label for="Password">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button type="submit" name="action" value="register"><span>Next</span></button>
</div>
</form>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script th:src="#{/js/index.js}"></script>
</body>
</html>
JavaScript code :
$('.toggle').on('click', function() {
$('.container').stop().addClass('active');
});
$('.close').on('click', function() {
$('.container').stop().removeClass('active');
});
i want for example when entering /register it retrieve the register form instead of login
One way to do that is to create a /register controller that will return a parameter:
#RequestMapping("/register")
public ModelAndView register() {
ModelAndView mv = new ModelAndView("your_form_page")
mv.addObject("isRegister", true);
return mv;
}
Then you can add a hidden field and use it in the javascript to toggle the divs:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:th="http://www.thymeleaf.org">
<head>
<!-- imports omitted -->
<script type="text/javascript">
$(document).ready(function () {
if ($("#isRegister").val()) {
$("#register").show();
$("#signUp").hide();
} else {
$("#register").hide();
$("#signUp").show();
}
});
</script>
</head>
<body>
<input id="isRegister" type="hidden" th:value="${isRegister}" disabled="disabled"/>
<div id="signUp">
Sign Up Form
</div>
<div id="register">
Register Form
</div>
</body>
</html>
Of course you can move the Javascript piece of code to your ".js" file. The important here is to have the hidden input field that will be accessible in the Javascript to toggle the DIVs.
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.