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>
Related
I create a form which allows to view the form information in a
different page for the user to view using "view" button and I want
a "edit" button to edit the same details of the form by redirecting
to the previous page. I tried using window.history.back(); it didn't
work.
html file Index.html - the form
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<form action="result.html" method="GET">
<h1>Send us an Enquiry?</h1>
<h3>Fill in the Details Below</h3>
<input type="text" id="name" name="name" placeholder="Enter Name" />
<input type="text" id="email" name="email" placeholder="Enter Email" />
<select name="subject" id="subject" value="Subject">Subject
<option value="Destinations">Destinations</option>
<option value="Pricing">Pricing</option>
<option value="Accommodation">Accommodation</option>
<option value="Other">Other</option>
</select>
<textarea id="details" name="details" placeholder="Enter Details"></textarea>
<input type="submit" class="btn" value="View" onclick="handleSubmit()" />
</form>
</div>
</body>
</html>
The page view the form details result.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="result.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</head>
<body>
<div class="container">
<div class="box">
<h1>
Form Details
</h1>
<h2>
Name: <span id="result-name" />
</h2>
<h2>Email: <span id="result-email" />
</h2>
<h2>
Subject: <span id="result-subject" />
</h2>
<h2>Details: <span id="result-details" />
</h2>
<div class="action-btn">
<div class="inner">
<form action="" method="GET">
<input class="btn" type="submit" value="Edit" onclick="returnBack()" />
</div>
</form>
<div class="inner">
<form onsubmit="sendEmail(); reset(); return false;">
<input class="btn-1" type="submit" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
The javascript file result.js
//call function using event listener
window.addEventListener('load',() => {
//create a const variable
const params = (new URL(document.location)).searchParams;
const name = params.get('name');
const email = params.get('email');
const subject = params.get('subject');
const details = params.get('details');
document.getElementById("result-name").innerHTML = name;
document.getElementById("result-email").innerHTML = email;
document.getElementById("result-subject").innerHTML = subject;
document.getElementById("result-details").innerHTML = details;
})
function returnBack(){
window.history.back();
}
I think the type="submit" in tag input is the problem. You should remove it and try again.
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
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.
I got this situation, this is my HTML page so far:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
On button click I need to send to another html page the content (value) of those two text input. I took a look to many solutions that i found online, but I'm very new to this and i can't accomplish my task. Can anyone provide me whit the right, step-by-step code in javascript/jquery?
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
$.post("demo_test_post.asp",
{
campoA: $('#campoA').val(),
campoB: $('#campoB').val()
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<input type="text" id="campoA" class="fieldSet" style="width: 102px"/><label> Campo A</label>
<input type="text" id="campoB" class="fieldSet" style="width: 102px"/><label> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>
You need a server tecnology, this is an example using PHP on server.
Page land.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.php">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="submit" id="send" value="Trasmetti" class="fieldSet"/>
</form>
</body>
</html>
Page land.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
CampoA: <?php echo $_POST['campoA'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoA'] ?><br/>
</div>
<div>
CampoB: <?php echo $_POST['campoB'] ?><br/>
Or <br />
<?php echo $_REQUEST['campoB'] ?><br/>
</div>
</body>
</html>
You could use JQueries AJAX like below:
$("#send").click(function(e){
e.preventDefault;
var val1 = $("campoA").val();
var val2 = $("campoB").val();
$.ajax({
method: "POST",
url: "url",
data: { value1: val1, value2: val2 }
}).done(function(){
// do something
});
});
Try this:
<form id="Form" label="Dati" name="Dati" title="Dati" visible="true" method="post" action="land.htm">
<h1>DATI</h1>
<label class="label" for="campoA">
<label> <input type="text" id="campoA" name="campoA" class="fieldSet" style="width: 102px"/> Campo A</label>
<label> <input type="text" id="campoB" name="campoB" class="fieldSet" style="width: 102px"/> Campo B</label>
<input type="button" id="send" value="Trasmetti" class="fieldSet"/>
</form>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
$('#send').click(function(evt) {
evt.preventDefault();
evt.stopPropagation();
$.ajax({
url: "./proba.html",
method: "POST",
data: $('#Form').serialize(),
success: function(html) {
console.log(html);
}
});
});
});
</script>