FileSaver.js submit - javascript

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

How to edit the form in html using edit button with javascript

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 have this issue with reseting the form with JavaScript

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

How to jump focus to the next form field when input reaches the max length limit?

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>

Convert iframe to textarea

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.

Send contents of fields in a form whit POST method jquery

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>

Categories