I am trying to do the if condition when requesting for reseting the form. When the condition is confirmed the form will be reset, if not it won't be reset.
<!DOCTYPE html>
<html>
<head>
<title>form events</title>
<meta charset="windows-1250">
</head>
<body>
<form onreset="FormReset()" name="form1">
<input type="text" name="T1" size="20" /><br />
<input type="reset" name="res1=" value="reset" /><br />
</form>
<script language="javascript">
function FormReset(){
if(confirm("Do you wish to reset your data?")){
return true;
}
else return false;
}
</script>
</body>
</html>
The below code should work:
<!DOCTYPE html>
<html>
<head>
<title>form events</title>
<meta charset="windows-1250" />
</head>
<body>
<form name="form1" id="myForm">
<input type="text" name="T1" size="20" /><br />
<input
type="button"
onclick="FormReset()"
name="res1="
value="reset"
/><br />
</form>
<script language="javascript">
function FormReset() {
if (confirm("Do you wish to reset your data?")) {
document.getElementById("myForm").reset();
}
}
</script>
</body>
</html>
Checkout Sample
Related
The following script does not work ... does anyone know what is the error? I am trying to jump focus to the next form field when input reaches the max length limit.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SECURITY</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h3SECURITY</h3>
<fieldset>
<input id="focus1" placeholder="Barcode" type="text" tabindex="1" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<input id="focus2" placeholder="Identification Number" type="text" tabindex="2" maxlength="1" size="1" required>
</fieldset>
<input id="focus3" placeholder="Truck Number" type="text" tabindex="3" maxlength="1" size="1" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>
Here is a version that works:
$(function() {
$('#focus1,#focus2,#focus3').keyup(function(e) {
if ($(this).val().length >= $(this).attr('maxlength')) {
$(this).parent().next('fieldset').find('input').focus();
}
});
});
and a demo of it.
Move your script section just before the ending body tag '</body>'.
<script type="text/javascript">
$(function(){
$('#focus1,#focus2,#focus3').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength'))
$(this).next(':input').focus()
})
})
</script>
</body>
I need some help. I want to convert this iframe into this textarea, so I can be able to write text in it. I try the below code, but it's not working.
Here are my code
$(document).ready(function () {
$(function () {
$("#richTextField").on("load", function () {
var str = $(this).contains().find('html').prop('outerHTML')
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/prof.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script src="script/Working.js"></script>
</head>
<body onLoad="iFrameOn();">
<div id ="addtext" class="panel">
<form action="my_parse_file.php" name="myform" id="myform" method="post">
<!-- <div id="rte" contenteditable="true" unselectable="off">Write here ....</div>-->
<div id="menu">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
<textarea style="display:none;" name="rte" id="rte" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<br /><input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/>
</iframe>
</div>
</div>
</body>
</html>
I was hoping that some can help me.
Trying to copy one value from <input> field value to another using jQuery.
This works in JSFiddle But does not work when I try it on my local server.
what am I doing wrong?
https://jsfiddle.net/1emrxsLw/
JS:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
Complete HTML:
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<title>Untitled 1</title>
</head>
<body>
<h1>Button Click</h1>
<form id="form1">
<input id='one' type='text' />
<input id='two' type='text' />
</form>
<form id="form2">
<input id='three' type='text' />
</form>
<input type='button' id="do" value="Copy" />
<h1>Insta-Copy(TM)</h1>
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
<form id="form2">
<input id='six' type='text' />
</form>
<h1>On Blur</h1>
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
<form id="form2">
<input id='nine' type='text' />
</form>
</body>
<script type="text/javascript">
$('#do').click(function() {
$('#pDate1').val($('#fdatea').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
</script>
</html>
First, id attributes in HTML page suppose to be unique to that page, you can't have multiple id values within the page, and you do have. for example:
<form id="form1">
<input id='four' type='text' />
<input id='five' type='text' />
</form>
and:
<form id="form1">
<input id='seven' type='text' />
<input id='eight' type='text' />
</form>
The forms have identical id values, and that's a bad practice.
Second, you posted to javascript files, which one are you actually using?
I tested for you the first js script:
$('#do').click(function() {
$('#three').val($('#one').val());
});
$('#four').keyup(function() {
$('#six').val($('#four').val());
});
$('#seven').blur(function() {
$('#nine').val($('#seven').val());
});
That works fine.
However, the second js file that you posted at the bottom of the HTML page won't do the job because it refers to id values which don't exist, like: #pDate1 and #fdatea
My final goal is to make a form that creates csv files. I'm trying to figure out how filesaver.js works . I tried the code below but can't get it working. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script async="" src="FileSaver.js"/>
<script async="" src="Blob.js"/>
<script async="" src="FileSaver.min.js"/>
<script type="text/javascript">
function Write()
{
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
}
</script>
</head>
<body>
<div id="container">
<h2>Palaces</h2>
<form NAME="userform" onsubmit="return Write();">
<p class="submit"><button type="submit" value="Save">Signup</button></p>
</form>
</div>
</body>
</html>
It seems that FileSaver.js doesn't work with onsubmit. Here is my workaround:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="FileSaver.js"></script>
<script>
window.onload = function() {
document.form1.action = download();
}
function download(){
var data = [nomen.value, image.value, X.value, Y.value, message.value]
dataString = data.join(",");
var blob = new Blob([dataString],{type:"text/plain;charset=utf-8"});
saveAs(blob,"helloworld.csv");
}
</script>
</head>
<body>
<div id="container">
<h2>Palaces</h2>
<form NAME="form1" onsubmit="return download();return false">
<fieldset><legend>CSV input</legend>
<p class="first">
<label for="nodename">Name of information</label>
<input type="text" name="nomen" id="nomen" size="30">
</p>
<p>
<label for="image">image file name</label>
<input type="text" name="image" id="image" size="30" />
</p>
<p>
<label for="X">Point X axis</label>
<input type="number" name="X" id="X" size="30" />
</p>
<p>
<label for="Y">Point Y axis</label>
<input type="number" name="Y" id="Y" size="30" />
</p>
<p>
<label for="message">message<b>written in HTML</b></label><br>
<textarea cols="50" rows="4" name="message" id="message" placeholder="Once upon a time..."></textarea>
</p>
</fieldset>
<input type="button" value="download" onclick="return download();return false"/>
</form>
</div>
</body>
</html>
I have a login form inside an iframe. Here is the code for the main page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script language="javascript">
function SubmitForm() {
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
}
</script>
<title>Login to Vote</title>
</head>
<body>
<iframe id="loginframe" src="sasloginhandler.html"></iframe>
<input onclick="SubmitForm()" value="Submit form" type="button">
</body>
</html>
And here is the code for the "sasloginhandler.html" page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>Login to Vote</title>
</head>
<body>
<form action="https://moodle.standrews-de.org/login/index.php" method="post"
id="login">
<div class="loginform">
<div class="form-input"> <input name="username" placeholder="Username"
id="username"
size="15"
type="text">
</div>
<div class="form-input"> <input name="password" placeholder="Password"
id="password"
size="15"
value=""
type="password">
<input id="loginbtn" value="Login" type="submit"> </div>
</div>
<div class="forgetpass"><a href="forgot_password.php">Forgotten your
username or password?</a></div>
</form>
</body>
</html>
The problem is, neither the submit button inside the iframe nor the javascript submit button outside the iframe does anything. I have tested the iframe code on its own and it works fine, so it seems to be some part of the iframe that is causing the issue. However, I don't know why this would be.
Thank you!
The id of the form in the iframe is login but you try to get it with loginform
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();