I have a form which is not submitted in IE. I just want to hide image upload button (file type) and show a custom browse button. My file upload has display none. when i click on the label i call the file click event and choose a file. but when i submit the page it does not submit it, No error message in console. it is working fine in firefox.
Here is my code.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<title>New world of interaction</title>
<script>
function checkFields()
{
var fup = document.getElementById('authenticationimage');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext == "jpg" || ext == "JPG")
{
return true;
}
else
{
alert("Upload Jpeg image only");
document.getElementById('imagename').innerHTML = '';
return false;
}
}
function readURL() {
var fup = document.getElementById('authenticationimage');
var fileName = fup.value;
document.getElementById('imagename').innerHTML = fileName;
}
function removeimage() {
document.getElementById('imagename').innerHTML = '';
}
</script>
</head>
<body>
<table border="0" cellpadding="10" cellspacing="10" width="100%" align="center">
<form action="test.php" method="post" enctype="multipart/form-data" onsubmit="return checkFields();">
<tr>
<td width="25%" style="padding-left:15px"><strong>Image</strong></td>
<td width="75%">
<table border="0">
<tr><td style="border:1px solid #596166;"><label id="imagename" style="width:200px;display:inline-block;"></label></td>
<td>
<div class="ImageUpload">
<label for="authenticationimage" onclick="document.getElementById('authenticationimage').click();">
<img src="browse.png" alt="Browse" style="width:60px;cursor: pointer;"/>
</label>
<input id="authenticationimage" name="authenticationimage" type="file" onchange="readURL()" style="display:none"/>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td height="20"><input type="submit" name="submit" value="submit" />
<input type="reset" name="reset" onclick="removeimage();" value="reset">
</td>
</tr>
</form>
</table>
</body>
</html>
It is done by using css property
.select-wrapper {
background: url('templates/ncrcorp/images/upload.png') no-repeat;
background-size: cover;
display: block;
position: relative;
width: 60px;
height: 24px;
}
#authenticationimage {
width: 60px;
height: 24px;
opacity: 0;
cursor: pointer;
filter: alpha(opacity=0); /* IE 5-7 */
}
and
<span class="select-wrapper">
<input id="authenticationimage" name="authenticationimage" type="file" onchange="readURL()" />
</span>
Related
I tried a project which has a form to submit the employee expenses. I got everything working but unable to clear the form (entered details in the text fields) after clicking on submit.
Getting Error: (After entering the details and clicking the submit button)
Uncaught ReferenceError: d is not defined at HTMLInputElement.onclick (index.html:63:42)
Here is my code:
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
// Form validation
function validate() {
if (document.myForm.empId.value == "") {
alert("Please provide your Employee ID!");
document.myForm.empId.focus();
return false;
}
if (document.myForm.empName.value == "") {
alert("Please provide your Name!");
document.myForm.empName.focus();
return false;
}
if (document.myForm.PaymentMode.value == "") {
alert("Select your Payment Mode!");
document.myForm.PaymentMode.focus();
return false;
}
if (document.myForm.Date.value == "") {
alert("Please provide the Date!");
document.myForm.Date.focus();
return false;
}
if (document.myForm.Bill.value == "") {
alert("Please provide your Bill Amount!");
document.myForm.Bill.focus();
return false;
}
return true;
}
let id = document.getElementById("id").innerText;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").innerText;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").innerText;
let mode = document.getElementById("payment-mode").value;
let day = document.getElementById("day").innerText;
let date = document.getElementById("date").value;
let amount = document.getElementById("amount").innerText;
let bill = document.getElementById("bill").value;
let form = document.getElementById("forReset");
let array = [
[id, empId],
[name, empName],
[using, mode],
[day, date],
[amount, bill],
];
let expenseList = Object.fromEntries(array);
const expenseTable = document.getElementById("expenseTable");
function output() {
if (validate()) {
for (let i = 0; i < Object.keys(expenseList).length; i++) {
expenseTable.innerHTML += `
<tr>
<td>${expenseList[id]}</td>
<td>${expenseList[name]}</td>
<td>${expenseList[using]}</td>
<td>${expenseList[day]}</td>
<td>$${expenseList[amount]}</td>
<td><a class="deleteButton">Delete</td>
</tr>
`;
for (let i = 0; i < expenseTable.children.length; i++) {
expenseTable.children[i]
.querySelector(".deleteButton")
.addEventListener("click", function () {
this.parentNode.parentNode.remove();
});
}
break;
}
} else {
return false;
}
}
output();
function d() {
form.reset();
}
d();
});
.table {
border: 1px solid black;
width: 100%;
}
th {
border-right: 1px solid black;
}
.table td {
border: 1px solid black;
text-align: center;
}
.deleteButton {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker Project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="employee-info">
<form
id="forReset"
class="expenesesForm"
name="myForm"
onsubmit="return(validate());"
method="POST"
action=""
>
<table>
<tr>
<td id="id">Employee ID:</td>
<td>
<input id="empID" name="empId" type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" name="empName" />
</td>
</tr>
<tr>
<td id="using">Payment Mode:</td>
<td>
<select id="payment-mode" name="PaymentMode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction:</td>
<td><input id="date" type="date" name="Date" /></td>
</tr>
<tr>
<td id="amount">Amount:</td>
<td><input id="bill" type="number" name="Bill" /></td>
</tr>
<tr>
<td>
<br />
<input
id="submit"
type="submit"
value="Submit"
onclick="javascript:d();"
/>
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
<br />
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mode of Transaction</th>
<th>Date of Transaction</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="expenseTable"></tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>
Expected output:
After clicking the submit button, entered form details should get cleared.
Here is a simple method,
click reset button automatically after submit
You could reuse the <input type="reset">
cancel icon to clear form values
https://www.w3schools.com/tags/att_input_type_reset.asp
Also, you can hide reset input using display:none, if it is not necessary in your screen
An alternative method is clear each input value by setting an empty value in it
function formReset () {
document.getElementById("empID").value = '';
document.getElementById("name").innerText = '';
document.getElementById("empname").value = '';
}
Here is a working example
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
// Form validation
function validate() {
if (document.myForm.empId.value == "") {
alert("Please provide your Employee ID!");
document.myForm.empId.focus();
return false;
}
if (document.myForm.empName.value == "") {
alert("Please provide your Name!");
document.myForm.empName.focus();
return false;
}
if (document.myForm.PaymentMode.value == "") {
alert("Select your Payment Mode!");
document.myForm.PaymentMode.focus();
return false;
}
if (document.myForm.Date.value == "") {
alert("Please provide the Date!");
document.myForm.Date.focus();
return false;
}
if (document.myForm.Bill.value == "") {
alert("Please provide your Bill Amount!");
document.myForm.Bill.focus();
return false;
}
return true;
}
let id = document.getElementById("id").innerText;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").innerText;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").innerText;
let mode = document.getElementById("payment-mode").value;
let day = document.getElementById("day").innerText;
let date = document.getElementById("date").value;
let amount = document.getElementById("amount").innerText;
let bill = document.getElementById("bill").value;
let array = [
[id, empId],
[name, empName],
[using, mode],
[day, date],
[amount, bill],
];
let expenseList = Object.fromEntries(array);
const expenseTable = document.getElementById("expenseTable");
function output() {
if (validate()) {
for (let i = 0; i < Object.keys(expenseList).length; i++) {
expenseTable.innerHTML += `
<tr>
<td>${expenseList[id]}</td>
<td>${expenseList[name]}</td>
<td>${expenseList[using]}</td>
<td>${expenseList[day]}</td>
<td>$${expenseList[amount]}</td>
<td><a class="deleteButton">Delete</td>
</tr>
`;
for (let i = 0; i < expenseTable.children.length; i++) {
expenseTable.children[i]
.querySelector(".deleteButton")
.addEventListener("click", function () {
this.parentNode.parentNode.remove();
});
}
break;
}
} else {
return false;
}
}
output();
function clearData() {
document.getElementById("reset").click();
}
clearData();
});
.table {
border: 1px solid black;
width: 100%;
}
th {
border-right: 1px solid black;
}
.table td {
border: 1px solid black;
text-align: center;
}
.deleteButton {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Expense Tracker Project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="employee-info">
<form
id="forReset"
class="expenesesForm"
name="myForm"
onsubmit="return(validate());"
method="POST"
action=""
>
<table>
<tr>
<td id="id">Employee ID:</td>
<td>
<input id="empID" name="empId" type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" name="empName" />
</td>
</tr>
<tr>
<td id="using">Payment Mode:</td>
<td>
<select id="payment-mode" name="PaymentMode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction:</td>
<td><input id="date" type="date" name="Date" /></td>
</tr>
<tr>
<td id="amount">Amount:</td>
<td><input id="bill" type="number" name="Bill" /></td>
</tr>
<tr>
<td>
<br />
<input
id="submit"
type="submit"
value="Submit"
/>
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
<br />
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mode of Transaction</th>
<th>Date of Transaction</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="expenseTable"></tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>
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" : ""
There is a problem with the below code. The second button show it does not work. It doesn't open anything.
The problem is for sure the Show ..if I changed it to class , both do not work.
And I would like in each row the text to be left without any margin , but I couldn't fixed it
<!DOCTYPE html>
<html>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cafeteria Orders Management System</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
label,
input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
td {
max-width: 120px;
white-space: nowrap;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 300px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 9px solid #eee;
padding: .6em 120px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form,
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $("#name"),
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
valid = valid && checkRegexp(email, emailRegex, "eg. ui#jquery.com");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
Ok: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user").button().on("click", function() {
dialog.dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
</td>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
</td>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
</body>
</html>
change in the button attribute id, u cant use more than one id with the same name on your website, you can use class instead of. For example
<button class="create-user">Show</button>
and in the js u must call to the class
$(".create-user")
As was suggested, you will want to use the class attribute and selector.
Working example: https://jsfiddle.net/Twisty/5n2h03nL/
HTML
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user-1" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user-2" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
jQuery
$(".showDialog").button().on("click", function() {
dialog.dialog("open");
});
In regards to your other comment, you will need to provide more info. If you want the "Show" button to launch the dialog with custom details each time, those details need to be provided from some place. You can make use of data attributes on the row, like <tr data-comments=""> or make an AJAX call to a database. We can't just write that for you, you need to figure out where you want to store those details and how you want to collect them when the button is clicked.
In regards to this question, I suspect you've got the answer. So I would mark one as a answer, take a stab at your next issue, and if needed create a new question.
I'm making a school project, where I shall be able to load a php named: main_login.php through a javascript function called overvågning(), and then load the php into a div I've made. I can't seem to find anything which should be able to help me.
This is the stuff I've made so far:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Surveillance4you</title>
<style type="text/css">
* {
font-size: 20px;
font-family: Arial;
}
#indhold {
width: 560px;
height: 560px;
margin-left: 651px;
margin-top: 270px;
padding: 20px;
border: 0px;
text-align: center;
}
#indhold input {
padding: 3px;
margin: 5px;
cursor: pointer;
}
body {color:#fff;}
</style>
<script>
function OutputInfo()
{
document.getElementById("indhold").innerHTML="Lavet af:<br> Mads Schiellerup & Frederik Munck<br> Erhversskolen Nordsjælland HTX <br> 10-05-2014<br>Vejleder: Christian Obel"
}
function OutputForside()
{
document.getElementById("indhold").innerHTML="Surveillance4you er en hjemmeside som bruges til at live-streame en video af et overvågningskamera. Dette gøes ved hjælp af en opkobling til vores database, hvor du først kan lave en bruger, og herefter have mulighed for at kunne se diverse kameraer."
}
function overvågning()
{
document.getElementById("indhold").innerid=MLogin
}
</script>
</head>
<body background="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Full%20Baggrund.png" onLoad="OutputForside()">
<input type="image" src="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Menu%20-%20Forside.png"
onClick="OutputForside()"
style=" position: absolute;
top: 170px;
left: 660px;">
<input type="image" src="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Menu%20-%20Overvågning.png"
onClick="MLogin" style=" position: absolute;
top: 170px;
left: 860px;">
<input type="image" src="https://filemanager.one.com/api/webspace/1/drive/saxenkol.dk/data/Menu%20-%20Info.png"
onClick="OutputInfo()" style=" position: absolute;
top: 170px;
left: 1060px;">
<div>
<?php
$form = "";
$form.= "<form method=\"post\" action=\"\">";
$form.= "<div id=\"indhold\">";
$form.= "</div>";
$form.= "</form>";
print $form;
?>
</div>
</body>
</html>
The PHP-file i want my function to get and sent to the container #indhold.
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="text" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
New updated:
<?php
function overvågning()
{
$form = "";
$form.= "<form method=\"post\" action=\"\"><div id=\indhold\">";
$form.= include 'main_login.php';
$form.= "</div></form>";
print $form;
}
?>
And I've also changed:
onClick="overvågning()"
So when I clicked on this image, it should show the php in container
Halløjsa. If I understand correctly you want to pass the user-input from your form to your javascript function but why are there no inputs and submit button within your form tags? If you were to use the php get method instead of post you could retrive the value from the submitted input directly from the url using the window.location method. See this article:
http://javascriptproductivity.blogspot.dk/2013/02/get-url-variables-with-javascript.html
EDIT:If you are not retrieving user inputs but simply want to load the log in file into the page use php include
<?php
echo "<form method=\"post\" action=\"\"><div id=\"indhold\">";
include 'main_login.php';
echo "</div></form>";
?>
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.