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>
Related
I am making a code that requests course grades and sends them to a spreadsheet. I am familiar with Javascript; however, I am less familiar with HTML. Because not every person is taking the same courses or even the same number of courses, I wanted to send each student a custom url that contains the parameters of their name and what courses they are taking. That way the information could be populated into the HTML page and all the student would need to do is type in their grades for the corresponding courses. Then when submitted, it would send that information to a spreadsheet and handled accordingly. However, I am unsure of how I could pass parameters on to an HTML page. I am sure that it is simple but I dont know how to do it. If someone could provide some guidance it would be greatly appreciated. Below I have included the main HTML file that dictates the output. I am also including links to the other code. https://script.google.com/d/1c2XOZc5bmlnxT0ayWfYpJd4d6pKmZ8rgSiEZ-9NJ8CZIhvdjpEqSJ5X6/edit?usp=sharing
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center">Input Grades Below</p>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class001" id = "class_01" hidden>Class1</label>
<input type="text" class="form-control" id="grade001" name="grade00" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class002" id = class_02 hidden>Class2</label>
<input type="text" class="form-control" id="grade002" name="grade002" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class003" id = "class_03" hidden>Class3</label>
<input type="text" class="form-control" id="grade003" name="grade003" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class004" id = class_04 hidden>Class4</label>
<input type="text" class="form-control" id="grade004" name="grade004" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class005" id = class_05 hidden>Class5</label>
<input type="text" class="form-control" id="grade005" name="grade005" placeholder="Grade" hidden>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="class006" id = class_06 hidden>Class6</label>
<input type="text" class="form-control" id="grade006" name="grade006" placeholder="Grade" hidden>
</div>
</div>
<script>
//Script to to implement to change class labels
</script>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
You can use google.script.url.getLocation() to get the current URL parameters and hash.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script>
// URL = https://script.google.com/macros/s/SCRIPTKEY/exec?parameter=value#hash
google.script.url.getLocation(function(location) {
console.log(location.parameters); // {parameter: ["value"]}
console.log(location.hash); // "hash"
});
</script>
</body>
</html>
I have a web page called m_index.aspx. So when a tablet or a smartphone open my page, the system redirect it on m_index.aspx page.
Now in this page, I have a div and Input text. If I try to open it with my smartphone, I can see the form correctly, but when I try to click on one of InputText, the devis apply automatically a zoom. When I hidden the keyboard, ths graphic is not restored correctly.
There is a mode to correct this functionality?
This is my page:
<html xmlns="http://www.w3.org/1999/xhtml" lang="it"><head id="Head1">
<!-- PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<title>
Place
</title>
<script language="javascript" type="text/javascript">
var _cookieManager = new CookieManager();
var _keyControlledControls = new KeyboardControlledControls();
var _guiID = "0";
var _companyName = "";
var _applicationName = "";
var _footerContent = "";
var _userName = "";
_global_CurrentComponent = ComponentsTypes.Mobile;
</script>
</head>
<body class="mobile-IndexBody">
<form name="frmIndex" method="post" action="./m_Index.aspx" id="frmIndex" style="height:100%;" autocomplete="off">
<div>
</div>
<div id="layoutFill" class="skin-BodyMain">
</div>
<div id="mainFill" class="mobile-mainDiv-login">
<div id="dvHeader" style="text-align: center;" class="mobile-skin-LogIn-SfondoLogo">
<div id="LogoLogin" class="skin-LogIn-CompanyLogo"></div>
<div id="PayoffLogin" class="skin-LogIn-CompanyMission"></div>
</div>
<div id="dvData" class="mobile-login">
<div id="dvFormContainer" class="mobile-skin-LogIn-FormContainer">
<div id="dvOmniaLogo" class="mobile-skin-LogIn-ProgramLogo"></div>
<div id="dvNomeAziendaProgramma" class="mobile-skin-LogIn-NomeAziendaProgramma">Name</div>
<div id="dvInputs" class="mobile-skin-LogIn-Labels">
<div id="dvBoxes" style="text-align: center;" class="mobile-div-text">
<div class="mobile-box-login">
<label class="mobile-skin-LogIn-Labels">User Name</label>
<input id="login_userName" name="login_userName" class="mobile-skin-LogIn-input" value="" type="textbox">
<label style="margin-top:5px;" class="mobile-skin-LogIn-Labels">Password</label>
<input id="login_password" name="login_password" class="mobile-skin-LogIn-input ReturnTriggerer" type="password">
</div>
</div>
<div id="dvButton" style="text-align: center;" class="mobile-div-button">
<div class="mobile-skin-button-login">
<label id="btnLogin" class="mobile-skin-LogIn-Buttons">Accedi</label>
</div>
</div>
</div>
</div>
</div>
<div id="dvFooter" class="mobile-skin-LogIn-Footer">
</div>
</div>
<div id="loadingDiv" class="Loading" style="width: 0px; height: 0px;">
</div>
</body></html>
I am unable to get selected radio button value. Basically, I am facing the problem in my Html page where I want to print selected radio button values.
I want to get values on the same page in a specific div. below is my code.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/JavaScript">
function myFunction()
{
var input = (document.getElementById('shirt').checked)|| (document.getElementById('trouser').checked) || (document.getElementById('tshirt').checked)|| (document.getElementById('suit').checked);
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + input.value;
}
</script>
</head>
<body>
<form action="#" method="post" id="demoForm">
<div class="controls option block-1">
<div class="col-sm-3 col-md-3 prod-left-text">
<h3> Garments Type</h3>
<p class="subtitle">Please choose your garments.</p>
</div>
<div class="col-sm-9 col-md-9">
<div class="col-md-3 col-sm-6 col-xs-12 option-value form-group">
<label class="rad">
<input type="radio" name="garments" value="shirt" id="shirt" onkeypress="myFunction()" >
<div><p class="producth6">Shirt<br /><span class="producth7">Rs. 400/-</span><br /><span class="producth8">onwords</span></p>
</div>
</label>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 option-value form-group" >
<label class="rad">
<input type="radio" name="garments" value="trouser" id="trouser" onkeypress="myFunction()">
<div><p class="producth6">Trouser<br /><span class="producth7">Rs. 400/-</span><br /><span class="producth8">onwords</span></p></div>
</label>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 option-value form-group">
<label class="rad">
<input type="radio" name="garments" value="Tshirt" id="tshirt" onkeypress="myFunction()">
<div><p class="producth6">T-shirt<br /><span class="producth7">Rs. 500/-</span><br /><span class="producth8">onwords</span></p>
</div>
</label>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 option-value form-group">
<label class="rad">
<input type="radio" name="garments" value="suit" id="suit" onkeypress="myFunction()">
<div><p class="producth6">Salwar-Suit<br /><span class="producth7">Rs. 675/-</span><br /><span class="producth8">onwords</span></p>
</div>
</label>
</div>
<div class="clearfix"></div>
<div style="height:80px;">
<center>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-10" style="float: none;display: inline-block;">
</div>
</center>
</div>
<p><button type="button" value="submit">Get Value of Selected</button></p>
<!-- Div where i want to put the selected radio valur -->
<div id="divID"></div>
</div>
</form>
</body>
</html>
You can use querySelector for javascript-
<script type="text/JavaScript">
function myFunction()
{
var input = document.querySelector('input[name="garments"]:checked').value;
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + input+"<br>";
}
</script>
To get the selected radio button value you can use jQuery:
$('[name=garments]:checked').val()
I tried a downloaded code for auto-suggest search box but it didn't work. It does not display anything from my database. I'm still new in this programming language especially in using AJAX and JavaScript.
Here's my code:
dbcon2.php
<?php
$con2['host'] = 'localhost';
$con2['user'] = 'root';
$con2['pass'] = 'thirteen';
$con2['db'] = 'pis';
$sel2 = mysql_connect($con2['host'], $con2['user'], $con2['pass']);
mysql_select_db($con2['db'], $sel2);
mysql_set_charset("utf-8");
$datab2 = $con2['db'];?>
set_creditlimit.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete search using php, mysql and ajax</title>
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<script type="text/javascript" src="assets/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if (searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click", function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("</div>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e){
var $clicked = $(e.target);
if (! $clicked.hasClass("search")) {
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
</head>
<body>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h2>ACL</h2>
</div> <!-- <div class="col-md-12"> -->
</div> <!-- <div class="row"> -->
<hr />
<div class="row">
<div class="col-md-12">
<!-- Start of Form -->
<div class="panel panel-success">
<div class="panel-heading">
Set-up Allowable Credit Limit
</div> <!-- <div class="panel-heading"> -->
<!-- End of Heading -->
<!-- Start of Body -->
<div class="panel-body">
<form class="form-horizontal">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Search Employee:</label>
<input type="text" id="searchid" placeholder="Search Employee" class="search">
</div>
<div id="result"></div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Position:</label>
<input class="form-control" disabled>
</div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Department:</label>
<input class="form-control" disabled>
</div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Business Unit:</label>
<input class="form-control" disabled>
</div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Allowed Credit Limit:</label>
<input class="form-control">
</div>
</div>
<br />
<br />
<!-- ------------- -->
<div class="control-group">
<div class="controls">
<center>
<button class="btn btn-success btn-lg"><i class="glyphicon glyphicon-hand-right fa-1x"> Submit</i></button>
</center>
</div>
</div>
</form>
</div> <!-- <div class="panel-body"> -->
</div> <!-- <div class="panel panel-success"> -->
</div> <!-- <div class="col-md-12"> -->
</div> <!-- <div class="row"> -->
</div> <!-- <div id="page-inner"> -->
</div> <!-- <div id="page-wrapper"> -->
</body>
</html>
search.php
<?php
include('dbcon2.php');
if ($_POST)
{
$q = $_POST['search'];
$sql_res = mysql_query("SELECT emp_id, name from employee3 where emp_id like '%$q%' or name like '%$q%' order by emp_id LIMIT 5 ");
while ($row = mysql_fetch_array($sql_res))
{
$emp_id = $row['emp_id'];
$name = $row['name'];
$b_emp_id = '<strong>'.$q.'</strong>';
$b_name = '<strong>'.$q.'</strong>';
$fina_emp_id = str_ireplace($q, $b_emp_id, $emp_id);
$final_name = str_ireplace($q, $b_name, $name);
?>
<div class="show" align="left">
<span class="name"><?php echo $fina_emp_id; ?></span>
</div>
<?php
}
}
?>
You are passing the wrong data format in the ajax call.
It should be like this:
data: { search: searchid }
try this and it should work i believe.
Refer this: http://api.jquery.com/jquery.ajax/
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]');