Automated file download using Javascript & onSubmit - javascript

I am trying to create an automatic file download when a visitor submits a validated opt-in form. I would like to initiate the download using a Javascript function as an onsubmit() event. Here is the code I am working with I am already using the form action= to submit the form data to a database and there is already Javascript in place to validate the form. I just need to add the download function.
<?xml version="1.0" encoding="utf-8"?>
<!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>
<style type="text/css" xml:space="preserve">
BODY, P,TD{ font-family: Arial,Verdana,Helvetica, sans-serif; font-size: 10pt }
A{font-family: Arial,Verdana,Helvetica, sans-serif;}
B { font-family : Arial, Helvetica, sans-serif; font-size : 12px;font-
weight
: bold;}
.error_strings{ font-family:Verdana; font-size:14px; color:#660000;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="JavaScript" src="gen_validatorv4.js"
type="text/javascript" xml:space="preserve"></script>
<script type="text/javascipt">
var downloadURL = function downloadURL(url) {
var iframe;
var hiddenIFrameID = 'hiddenDownloader';
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = 'http://healthyweightnaturally.com/file-download/download.php?
download_file=integrative_nutrition_ebook.pdf';
}
</script>
</head>
<body>
<form name="myform" id="myform" method="post"
action="https://www.example.com/FormHTML.aspx" onSubmit="return downloadURL(url);">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">
First Name
</td>
<td>
<input type="text" name="FirstName" />
</td>
</tr>
<tr>
<td align="right">
Last Name
</td>
<td>
<input type="text" name="LastName" />
</td>
</tr>
<tr>
<td align="right">
Email *
</td>
<td>
<input type="text" name="Email" />
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<div id="myform_errorloc" class="error_strings">
</div>
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<input style="padding-left:10px;" src="http://healthyweightnaturally.com/file-
download/download-button.png" type="image" value="submit" value="Submit" />
</td>
</tr>
</table>
<div style="visibility:hidden">
<iframe name="ifr1" width="20" height="20" id="hiddenIFrameID"></iframe>
</div>
</form>
<script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("myform");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName
is 20");
frmvalidator.addValidation("FirstName","alpha_s","Name can contain alphabetic chars
only");
frmvalidator.addValidation("LastName","req","Please enter your Last Name");
frmvalidator.addValidation("LastName","maxlen=20","For LastName, Max length is 20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");
//]]>
</script>
</body>
</html>
I want to use onsubmit instead of onclick because I need to make sure that the form has been validated before the file is able to be downloaded.
I am somewhat new to Javascript and have been struggling with this. I would greatly appreciate someone's assistance. The closest thing I found to an answer can be seen at HTML OnSubmit: Download OR HTML, but since they never gave any code examples it does not help me see the solution.

You can use jQuery plugin http://jqueryfiledownload.apphb.com/, which I found here Download File Using Javascript/jQuery.

Related

Why does validateForm display the whole table instead of the row (using JavaScript)?

I am trying to display email address and password for every employee by submitting their id, I used this code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validateForm() {
var x = document.forms["myMail"]["rowId"].value;
if (x == "") {
alert("Please type a valid National ID");
return false;
}
}
</script>
</head>
<body>
<form name="myMail" action="teamId.html" onsubmit="return validateForm()" method="post">
National ID : <input type="number" name="rowId" required>
<input type="submit" value="Get my Mail">
</form>
</body>
</html>
but when submitting it displays the whole table not the row that contains the employee info
and this is the first row of the table
<td height=53 class=xl6455 width=64 style='height:39.95pt;width:48pt'>id</td>
<td class=xl6455 width=191 style='border-left:none;width:143pt'>National I.D</td>
<td class=xl6555 width=390 style='border-left:none;width:293pt'>Name</td>
<td class=xl6555 width=242 style='border-left:none;width:182pt'>E-mail
Address</td>
<td class=xl6555 width=221 style='border-left:none;width:166pt'>First time
only Password</td>
<td class=xl6555 width=200 style='border-left:none;width:150pt'>Level</td>
</tr>
<tr height=53 style='mso-height-source:userset;height:39.95pt'>
<td height=53 class=xl6455 style='height:39.95pt;border-top:none'>1</td>

why onsubmit event handler is not working in php interpreter

I am reading through Learning PHP, MySQL & Javascript 4th edition and in chapter 16 I encountered a problem.
Onsubmit event handler is not working in <?php ... ?> (PHP interpreter), while it is working just fine without it.
am I missing something?
I removed some parts of the code to just show the problem
<?php
echo <<<_END
<!DOCTYPE html>
<html>
<head>
<title>An Example Form</title>
<style>
.signup {
border:1px solid #999999;
font: normal 14px helvetica;
color: #444444;
}
</style>
<script>
function validate(form) {
fail = validateForename(form.forename.value)
if(fail == "") return true
else { alert(fail); return false }
}
function validateForename(field) {
return (field == "") ? "No Forename was entered.\n" : ""
}
</script>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="5" bgcolor="#eeeeee">
<th colspan="2" align="center">Signup Form</th>
<form method="post" onsubmit="return validate(this)">
<tr><td>Forename</td>
<td><input type="text" maxlength="32" name="forename"></td>
</tr>
<tr><td colspan="2" align="center">
<input type="submit" value="Signup"></td>
</tr>
</form>
</table>
</body>
</html>
_END;
?>
with this code in use, javascript alert function is not showing any alert even if I submit an empty form.
Here is just the HTML/CSS/JS:
<!DOCTYPE html>
<html>
<head>
<title>An Example Form</title>
<style>
.signup {
border: 1px solid #999999;
font: normal 14px helvetica;
color: #444444;
}
</style>
<script>
function validate(form) {
fail = validateForename(form.forename.value)
if (fail == "") return true
else {
alert(fail);
return false
}
}
function validateForename(field) {
return (field == "") ? "No Forename was entered.\n" : ""
}
</script>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="5" bgcolor="#eeeeee">
<th colspan="2" align="center">Signup Form</th>
<form method="post" onsubmit="return validate(this)">
<tr>
<td>Forename</td>
<td><input type="text" maxlength="32" name="forename"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Signup"></td>
</tr>
</form>
</table>
</body>
</html>
You have to escape the newline \n twice or your HTML output will not look like intended:
return (field == "") ? "No Forename was entered.\\n" : ""

Radio Buttons in HTML And JavaScript

I am just wondering if anyone can help me insert radio buttons into my HTML webpage to insert the difficulty of the exam, This is my question
5. Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Here is my code, Can anyone help me out please
<!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>Exam Entry</title>
<script language="javascript"" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter your Exam ID Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam Number').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family: "Comic Sans MS";
}
</style>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr> <tr>
<td id="Exam Number">Exam ID Number</td>
<td><input type="Number" name="ID Number"maxlength="4" ></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</body>
</html>
JFiddle:
http://jsfiddle.net/Jgv9q/
Simply add the radio buttons in your html and run code to find out which one was checked. You should be referencing w3Schools when just learning but got you started here.
http://jsfiddle.net/hyysy/1/
<tr>
<td>Exam Level</td>
<td><input type="radio" name="exam" value="GCSE">GCSE<br>
<input type="radio" name="exam" value="AS">AS<br>
<input type="radio" name="exam" value="ALevel">ALevel</td>
</tr>
and then to find out which is checked, you can use:
var x = document.getElementsByName('exam')
for(var k=0;k<x.length;k++)
if(x[k].checked){
alert('Option selected: ' + x[k].value)
}
Read more here:
http://www.w3schools.com/html/html_forms.asp

jquery javascript concatenate/variable issue

I have html table inside of a form tags.
When I click on the a cell inside of the table jquery gives me the “id” attr of the cell.
I save the “id” attr to a variable called id.
When I alert “id” the id shows:
alert(id); //outputs 39
However on the very next line I have
term1 = $form.find( "input[name='firstoneinput_" + id +"']").val();
alert(term1); //outputs undefinined // it should output input
value with name attribute
of "firstoneinput_39"
why is the alert outputting undefined. Btw I put real values in to the text fields also.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form action="comments.php" id="nameForm">
<table border='1'>
<tr>
<td><input type="text" class="hidden" name="firstoneinput_1_25" id="25" placeholder="firstoneinput_1_25"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_1_26" id="26" placeholder="firsttwoinput_1_26"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_2_27" id="27" placeholder="firstoneinput_2_27"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_2_28" id="28" placeholder="firsttwoinput_2_28"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_3_29" id="29" placeholder="firstoneinput_3_29"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_3_30" id="30" placeholder="firsttwoinput_3_30"></td>
</tr>
<tr>
<td> <input type="text" class="hidden" name="firstoneinput_4_31" id="31" placeholder="firstoneinput_4_31"> </td>
<td> <input type="text" class="hidden" name="firsttwoinput_4_32" id="32" placeholder="firsttwoinput_4_32"></td>
</tr>
</table>
<td> <input type="submit" value="search"></td>
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
JAVASCRIPT
<script>
$(document).ready(function(){
var id = 0;
$('table tr td').click(function(){
id = $(this).children("input[class='hidden']").attr("id");
return id;
});
$( "#nameForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this );
term1 = $form.find( "input[name='firstoneinput_" + id +"']").val();
alert(term1); <---alerts undefined even thou I put in form values
alert(id); <----alerts ok the id
New answer
This will always alert undefined ...
alert(term1); // < ---alerts undefined even thou I put in form values
... because you're looking for firstoneinput_XX ...
$form.find( "input[name='firstoneinput_" + id +"']").val();
... but your actual input elements have the name convention firstoneinput_X_XX.
<input ... name="firsttwoinput_1_26" ... />
- - - Previous answer - - 8-< - - -
Html:
<form>
<table>
<tr>
<td id='39'>Klick</td>
</tr>
</table>
<input name="firstoneinput_39" value="the_uber_value"/>
</form>
Script:
$(document).ready(function() {
$('td').click(function() {
alert($('input[name="firstoneinput_' + this.id + '"]').val());
});
});
Magic:
http://jsfiddle.net/McNull/4BDmh/

javascript window redirect doesn't fire up

This problem seems to be odd to me and I can't seem to fix it. I do have a simple HTML form; inside, I do have a textbox and a button as shown down here:
<form id="form1" method="get"> <!-- Note: No Action property -->
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" onclick="myJS(this);" />
</td>
</tr>
</table>
</div>
</form>
MyJS file is as:
<script type="text/javascript">
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.open(url);
//window.location = url; //Doesn't work
//window.location.href = url; //Doesn't work
//self.location = url; //Doesn't work
//top.location = url; //Doesn't work
}
</script>
As you can see, it doesn't redirect to the designated URL in the javascript. When I use the window.open then it works. Note that in the < form... > tag, I don't put the action property in it. I don't want to open a new browser, just redirect to the new url within the same browser.
Is there a way to redirect it?
Don't use the form tags. Or, set the "type" attribute of your button to be "button", not "submit". The form submits when you click the button, but you don't want that to happen. Either removing the form or changing the button should fix improper redirection. When you don't specify an action, I'm pretty sure the default is the current URL.
Ok, just an idea. As you haven't set the action parameter, the default behaviour of a submit button is to reload the same page. You alter that behaviour by handling its onclick. Maybe there is a conflict that can be resolved by having return false; at the end of the click handler, which prevents the default action for that event.
Here
function myJS(which) {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = which.txtAll.value;
var morestring = ""; //More data manipulation here.....
return CONSTANT_SITE_TARGET + allWords + morestring;
}
<form id="form1" method="get" onsubmit="this.action=myJs(this)">
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
</form>
to elaborate on a comment:
<script>
window.onload=function() {
document.getElementById("Submit").onclick=function() {
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll".value;
var morestring = ""; //More data manipulation here.....
location = CONSTANT_SITE_TARGET + allWords + morestring;
}
}
</script>
<div>
<h1>
Simple Test Form</h1>
<table border="0" width="400">
<tr>
<td align="right">
All of these words
</td>
<td>
<input name="txtAll" id="txtAll" type="text" value="testing keyword" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="Submit" value="Submit" />
</td>
</tr>
</table>
</div>
Try one the options for redirection below. I commented out three of them so that the code stays valid, but you may play around with either and see if it suits your needs.
var CONSTANT_SITE_TARGET = "http://servername/redirect/target.aspx?text=";
//capture all values from the form
var allWords = document.getElementById("txtAll").value;
var morestring = ""; //More data manipulation here.....
var url = CONSTANT_SITE_TARGET + allWords + morestring;
window.location.href= url;
//window.navigate(url);
//self.location(url);
//top.location(url);

Categories