I know this is a very elementary question, but I am on a tight time crunch to get this project done. I am using the JQuery plugin CloneYa and after you clone the form fields I want to be able to change the form names by appending the clone count.
<!DOCTYPE html>
<html>
<head>
<title>jQuery CloneYa demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>Simple Cloning</h2>
<form class="form" method="get" action="panel_test_simple.html">
<div id="animate-clone">
<div class="toclone">
<p>
<input type="text" name="name" id="sname" />
<label for="name">Name</label>
</p>
<p>
<input type="text" name="email" id="semail" />
<label for="email">E-mail</label>
</p>
<p >
<input type="text" name="web" id="sweb" />
<label for="web">Website</label>
</p>
clone
delete
</div>
</div>
<p class="submit">
<input type="submit" value="Save" />
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="jquery-cloneya.js"></script>
<script>
$('#animate-clone').cloneya({
limit : 5,
valueClone : false,
dataClone : true,
deepClone : true,
clonePosition : 'after',
serializeID : true,
defaultRender : false,
preserveChildCount: true
})
.on('after_clone.cloneya', function (event, toclone, newclone) {
// alert(toclone.attr('id'));
});
</script>
</body>
</html>
Related
I am very new to javascript. Using this provided HTML script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Reverse Exercise</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
/>
</head>
<body class="bg-dark">
<form class="bg-light border rounded w-50 mx-auto mt-5 p-3">
<h2 class="mt-2 mb-4">Reverse</h2>
<div class="form-group w-50">
<label for="input">Enter an 8-digit number: </label>
<input type="number" class="form-control" id="input" required />
</div>
<div class="form-group mt-4">
<input type="submit" class="btn btn-info" value="Reverse" />
</div>
</form>
<script src="02-reverse.js"></script>
</body>
</html>
I need to accept the input and manipulate it before writing the output to a popup window. I understand the manipulation aspect, but the input and output is tripping me up. My very simple code does not produce any popup window or any result at all:
var num = document.getElementsById("input").value;
// do stuff to num
window.alert(num);
HTML
<form id="theForm">
<h2>Reverse</h2>
<div>
<label for="theNumber">Enter an 8-digit number: </label>
<input type="number" minlength="8" maxlength="8" min="10000000" max="99999999" id="theNumber" required autofocus />
</div>
<div>
<input type="submit" value="Reverse" />
</div>
</form>
JavaScript
var theForm = document.getElementById('theForm');
theForm.addEventListener('submit', function(event) {
event.preventDefault();
var theNumber = document.getElementById("theNumber").value;
if (theNumber.length < 8 || theNumber.length > 8) {
window.alert('Number must be 8 digits.');
} else {
// reverse number then display
window.alert(theNumber);
}
});
Give this Fiddle a look: https://jsfiddle.net/d8wa2n5h/
I want to create a form in HTML that can take the inserted Name by the user and then after pressing submit shows the corresponded value (Age) to that user. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
The problem is that after pressing submit the Name will be shown in the myshow span section(Age:) just
for a fraction of second and then it disappeares and url changes to localhost:5000/?Name=Jack rather than localhost:5000/the current path/?Name=Jack
You should use onSubmit on the form element to call the function and then return false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
return false;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<form action="" onSubmit="return myFunction();">
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="submit" class="button" value="Submit"><br/>
</div>
</div>
</form>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
Ps: you did not close the submit tag properly
I think that you don't need submit.
If you don't need to submit, You have to change this code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="MyMain.css">
<script language="JavaScript">
function myFunction() {
document.getElementById('myshow').innerHTML =
document.getElementById("Name").value;
}
</script>
</head>
<body>
<div class="container">
<div>
<fieldset>
<div class="row">
<div form-group">
<label for="fname">Your Name: </label>
<input type="text" class="form-control" name="name" id="Name" placeholder="Jon" value="">
</div>
</div>
<div>
<input type="button" class="button" onclick="myFunction();" value="Submit"<br/>
</div>
</div>
</fieldset>
</div>
</div>
<div class="container">
<fieldset>
<div>
<label>Age: </label>
<p><span id='myshow'></span></p>
</div>
</fieldset>
</div>
</body>
</html>
How would one display an incorrect or correct words beside a form in any colour beside the field box when typing? I'm trying to make it so it gives me a real time correct and incorrect when I type in values that match the JS rule.
It should give a real time correct or incorrect beside the box and if it matches the rule then it displays correct
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Form Example </title>
<meta charset="utf-8">
<link href="keyupform.css" rel="stylesheet">
<script src="prototype.js"></script>
<script src="formkeyup.js"></script>
</head>
<body>
<div class="box" >
<form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
<!-- user id -->
<h2> Enter Info </h2>
<p> <span class="fieldName">UserID: </span>
<input type="text" id="userid" name="userid" class="input">
<span class="message"></span></p>
<!-- -->
<p style="text-align:center" class="types"> Enter Code: EECS, ESSE, MUTH, HIST, CHAP, BIO </p>
<p> <span class="fieldName"> Codes </span>
<input type="text" id="code" name="code" class="input">
<span class="message"></span></p>
<!-- Number -->
<p> <span class="fieldName"> Course Num (XXXX): </span>
<input style="width: 4em;" id="number" type="text" name="number" class="input">
<span class="message"></span></p>
<hr>
<p style="text-align:center;"> <button id="submitButton" type="button" onclick="submitbtn"> Submit </button> <input id="clear" type="reset" value="Clear"> </p>
<p style="text-align:center;" id="formError"> <p>
</form>
</div>
</body>
</html>
JS:
window.onload = function() {
$("userid").observe("keyup", enforceID);
$("code").observe("keyup", enforcecode);
$("number").observe("keyup", enforcenumbers);
$("submitButton").observe("click", submitbtn);
}
function enforceID() {
// fucntion must start with a letter and can be any number or letter after
var re = /^[A-Z][A-Z][0-9]+/i;
}
function enforcecode() {
// Only can use these Codes
var codes = ["EECS", "ESSE", "MUTH", "HIST", "CHAP", "BIO"];
var codeType = $("codeType").value;
codeType = codeType.toUpperCase();
}
function enforcenumbers() {
//Only 4 numbers allowed
var re = /^[0 -9][0 -9][0 -9][0 -9]$/
}
You can trigger the form validation on keydown event.
const form = document.getElementById('form');
document.getElementById('userid').addEventListener('keydown', event => {
form.reportValidity();
}, false);
document.getElementById('code').addEventListener('keydown', event => {
form.reportValidity();
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<form id="form">
<label for="userid">User ID:</label>
<input type="text" id="userid" name="userid" pattern="[A-Z]{2}\d+">
<br />
<label for="code">Code:</label>
<input type="text" id="code" pattern="EECS|ESSE|MUTH|HIST|CHAP|BIO" />
</form>
</body>
</html>
I have a function with input var is name of Form and ID of input. Now I want to get the value of password input. The problem is I have some input with same ID but in different form. So I want a flexible way to get its value when I know its form.
I have tried
var x = Form_Name.ID_Name.value;
but it doesn't work. So please tell me how to get the value of password input by a flexible way. Thanks so much. Below is my code:
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check(Form_Name, ID_Name)
{
alert(document.getElementById(ID_Name).value);
alert(Form_Name);
var x = Form_Name.ID_Name.value;
alert(x);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check('MainForm','ID')"> Click Me </button>
</div>
</body>
</html>
I have created another button for you to get password.
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check(Form_Name, ID_Name)
{
alert(document.getElementById(ID_Name).value);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check('MainForm','ID')"> Click Me for ID </button>
<button value="click Me" onclick="check('MainForm','Pass')"> Click Me for Password</button>
</div>
</body>
</html>
Optimized way:
You can achieve it using the same button as well, by passing an array of ID's.
Let me know, I can help more on this.
Access username and password using it's id.
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check()
{
var username = document.getElementById("ID").value;
var password = document.getElementById("Pass").value;
alert("Username: "+username+" Password: "+password);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check()"> Click Me </button>
</div>
</body>
</html>
I have a simple html Form, that should send the input with a put command to my PouchDB Database via the http adapter.
This works as it should in every browser I tried (Firefox/Chrome/Android) but not in Safari 8 or iOS8 Mobile Safari.
Even more strange, Safari doesn't give me any error.
Anyone has a suggestion?
The Code is more or less like this:
var db = new PouchDB('http://my.website.com:5984/test');
var addToDB = function(){
var fragDB = {
_id: "tags_" + tagarr + "_" + new Date().toISOString(),
question: quest,
right: right,
wrong1: wrong1,
wrong2: wrong2,
wrong3: wrong3,
source1: source1,
source2: source2,
tags: tagarr,
tagsall: alltags
}
db.put(fragDB);
};
if(send){
send.onclick = function() {
addToDB();
};
<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, inital-scale=1" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" href="style/jquery-tag-this.css?v=5">
<link rel="stylesheet" href="style/jquery-ui-1.9.2.custom.min.css">
</head>
<body>
<div class=l eft>
<title>
title
</title>
<h1>
header
</h1>
<form class="form" name="theForm" id="theForm" action="#" method="put">
<fieldset>
<textarea type="text" name="frage" id="frage" placeholder="Hier die Frage eingeben"></textarea>
</fieldset>
<fieldset>
<div>
<p class="right">
<input type="text" name="right" id="right" placeholder="Richtige Antwort" />
</p>
</div>
<div>
<p class="wrong">
<input type="text" name="wrong1" id="wrong1" placeholder="Erste Falsche Antwort" />
</p>
</div>
<div class="clear"></div>
<div>
<p class="wrong">
<input type="text" name="wrong2" id="wrong2" placeholder="Zweite Falsche Antwort" />
</p>
</div>
<div>
<p class="wrong">
<input type="text" name="wrong3" id="wrong3" placeholder="Dritte Falsche Antwort" />
</p>
</div>
</fieldset>
<fieldset>
<div>
<p class="source">
<input type="url" name="source1" id="source1" placeholder="Erste Quelle" title="Der Link muss mit 'http' beginnen ..." />
</p>
</div>
<div>
<p class="source">
<input type="url" name="source2" id="source2" placeholder="Zweite Quelle" title="Der Link muss mit 'http' beginnen ..." />
</p>
</div>
</fieldset>
<fieldset>
<input type="text" id="simple-tags" name="simple-tags">
</fieldset>
<p class="button">
<btn type="button" id="submit">Senden</btn>
</p>
</form>
</div>
<div class=r ight>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery.tagthis.js?v=5"></script>
<script src="js/pouchdb-3.3.1.min.js"></script>
<script src="js/app.js" charset="utf-8"></script>
</html>