I have a telephone input on my form. It allows numbers only.So I use a simple javascript code to do this.But this time input box cannot be deleted.
<form id="aylikal" action="https://web.myadress.co" method="post">
<table style="height: 116px;" width="100%">
<tbody>
<tr>
<input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
<td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
</tr>
<tr>
<td style="width: 590px;">
<input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
</td>
</tr>
</tbody>
</table>
</form>
Code
function isInputNumbersa(evt) {
var ch = String.fromCharCode(evt.which);
if (!(/[0-9]/.test(ch))) {
evt.preventDefault();
}
}
KeyboardEvent.which is deprecated. Use KeyboardEvent.key instead.
Note that although this prevents user from typing letters, it does not prevent pasting letters. I'd use a robust library instead.
function isInputNumbersa(e) {
if (!(/[0-9]/.test(e.key))) {
e.preventDefault();
}
}
<form id="aylikal" action="https://web.myadress.co" method="post">
<table style="height: 116px;" width="100%">
<tbody>
<tr>
<input name="adres" required="" style="width: 100%;height: 1px;visibility: hidden;" type="text">
<td style="width: 590px;"><input name="ad" type="text" placeholder="Ad" required style="width: 100%;height: 40px;font-size: 18px;"></td>
</tr>
<tr>
<td style="width: 590px;">
<input name="soyad" type="text" placeholder="Soyad" required style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
</td>
</tr>
<tr>
<td style="width: 590px;">
<button id="pisko" onclick="formyolla()" style="display: inherit;margin: 0 auto;background: #2f889a;color: #FFF;font-size: 20px;padding: 16px 5px;height: auto;border-radius: 5px;width: 100%;">Devam et</button>
</td>
</tr>
</tbody>
</table>
</form>
If you want users to only enter numbers then you can use type="number".
<input name="telefon" required type="number" class="sa" placeholder="(5__) ___-__-__" onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
Or if you want to, you can also validate the if the input only has numbers using Javascript. Write a method like below and call it using event listeners.
let input=document.querySelector('.sa');
input.onblur = e => {
if(isNaN(parseInt(input.innerHTML))){
alert('Please enter Number');
input.innerHTML = '';
}
}
Alternatively you can also use the pattern attribute.
<input name="telefon" required type="tel" class="sa" placeholder="(5__) ___-__-__" pattern='5[0-9]{2}-[0-9]{3}-[0-9]{2}-[0-9]{2}' onkeypress="isInputNumbersa(event)" style="width: 100%;height: 40px;font-size: 18px;">
Related
So I've created a UWP application in Visual Studio that uses a webview to load a local html file. The html file uses Javascript to validate the user's input and will display a message box if the user enters incorrect data into any of the fields after clicking a button. The file works just fine when I run it in a web browser, but when it's run through the webview, the Javascript ceases to function (Where no message box is displayed for any incorrect data entered).
This is the code that creates the URI and navigates to the HTML content:
Uri myUri = new Uri("ms-appx-web:///Register_js.html");
webView1.Navigate(myUri);
I'm not sure why Javascript doesn't work when I load a local file but works perfectly fine when I load google.com (which would obviously use Javascript).
Does anyone know how I can get Javascript to work for a local file?
Edit: here is the code of the HTML file I'm trying to load:
<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
<script language="JavaScript" type="text/javascript">
function ValidateForm()
{
var regExp=/\d{4}-\d{2}-\d{2}/;
if (document.newUserForm.firstname.value=="")
{ alert("Firstname field cannot be blank.");
document.newUserForm.firstname.focus();
return false;}
if (document.newUserForm.surname.value=='')
{
alert('Surname field cannot be blank.');
document.newUserForm.surname.focus();
return false;
}
if (!regExp.test(document.newUserForm.DOB.value) )
{
alert('The Field is not correctly formatted!');
document.newUserForm.DOB.focus();
return false;
};
if (document.newUserForm.homePhone.value=='')
{
alert('Home Phone field cannot be blank.');
document.newUserForm.homePhone.focus();
return false;
}
if (isNaN(document.newUserForm.homePhone.value))
{
alert('Home Phone field must be a number.');
document.newUserForm.homePhone.focus();
return false;
}
if (document.newUserForm.roomNo.value=='')
{
alert('Room No. field cannot be blank.');
document.newUserForm.roomNo.focus();
return false;
}
if (document.newUserForm.workPhone.value=='')
{
alert('Work Phone field cannot be blank.');
document.newUserForm.workPhone.focus();
return false;
}
if (document.newUserForm.fax.value=='')
{
alert('Fax field cannot be blank.');
document.newUserForm.fax.focus();
return false;
}
if (document.newUserForm.emailAddress.value=='')
{
alert('Email Address field cannot be blank.');
document.newUserForm.emailAddress.focus();
return false;
}
if (document.newUserForm.password.value=='')
{
alert('Password field cannot be blank.');
document.newUserForm.password.focus();
return false;
}
if (document.newUserForm.password.value.length<5)
{
alert('Password field must be at least five characters.');
document.newUserForm.password.focus();
return false;
}
if (document.newUserForm.confirmPassword.value=='')
{
alert('Confirm Password field cannot be blank.');
document.newUserForm.confirmPassword.focus();
return false;
}
if (document.newUserForm.password.value!=document.newUserForm.confirmPassword.value)
{
alert('Password fields do not match.');
document.newUserForm.confirmPassword.focus();
return false;
}
if (document.newUserForm.gender.value=="male")
{
alert('Gender is male.');
return false;
}
return true;
}
</script>
</head>
<body>
<h2><strong>New User Details</strong></h2>
<form name="newUserForm" method="post" action="registerUserDisplay.php" onsubmit="return ValidateForm();">
<table style="width: 500px; border: 0px;" cellspacing="1" cellpadding="1">
<tr>
<td colspan="2"><strong>Personal Details</strong></td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>First Name</td>
<td>
<input name="firstname" type="text" style="width: 200px;" maxlength="100" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Surname</td>
<td>
<input name="surname" type="text" style="width: 200px;" maxlength="100" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Gender</td>
<td>
<input name="gender" id="gM" type="radio" value="M" /><label for="gM">Male</label>
<input name="gender" id="gF" type="radio" value="F" checked="checked" /><label for="gF">Female</label>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td><input name="bender" id="gB" type="radio" value="B" /><label for="gB">Bender</label></td>
<td>D.O.B.<small> (YYYY-MM-DD)</small></td>
<td>
<input name="DOB" type="text" style="width: 100px;" maxlength="10" />
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Home Address</td>
<td>
<textarea name="homeAddress" cols="30" rows="5"></textarea>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Home Phone</td>
<td>
<input name="homePhone" type="text" style="width: 150px;" maxlength="15" />*
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><strong>Work Details</strong></td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Position</td>
<td>
<select name="positionID">
<option value="1" selected="selected">Permanent</option>
<option value="2">Full-Time</option>
<option value="3">Part-Time</option>
<option value="4">Casual</option>
<option value="5">Volunteer</option>
</select>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Room No.</td>
<td>
<input name="roomNo" type="text" style="width: 50px;" maxlength="5" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Work Phone</td>
<td>
<input name="workPhone" type="text" style="width: 150px;" maxlength="15" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Fax</td>
<td>
<input name="fax" type="text" style="width: 150px;" maxlength="15" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Mobile</td>
<td>
<input name="mobilePhone" type="text" style="width: 150px;" maxlength="15" />
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Email Address</td>
<td>
<input name="emailAddress" type="text" style="width: 200px;" maxlength="200" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Department</td>
<td>
<select name="deptID">
<option value="1" selected="selected">Accounts</option>
<option value="2">Human Resources</option>
<option value="3">Help Desk</option>
<option value="4">Management Information Systems</option>
<option value="5">Public Relations</option>
<option value="6">Communications</option>
</select>
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Password</td>
<td>
<input name="password" type="password" style="width: 200px;" maxlength="20" />*
</td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>Confirm Password</td>
<td>
<input name="confirmPassword" type="password" style="width: 200px;" maxlength="20" />*
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr style="background-color: #FFFFFF;">
<td>
<input type="reset" name="reset" value="Reset" />
<input type="submit" name="submit" value="Submit" />
</td>
<td>
<div align="right">* indicates required field</div>
</td>
</tr>
</table>
</form>
</body>
</html>
I have a long table that needs to be displayed inside a small area so I'm using overflow-x: scroll; to make a horizontal scrollbar under the table.
Inside the table, I have a few input fields with datetimepicker.
My problem is when I click on the input field to show the datatimepicker, it makes a vertical scrollbar and displays inside these 2 scrollbars.
jQuery('#birthday1').datetimepicker({
format: "DD/MM/YYYY"
});
jQuery('#birthday2').datetimepicker({
format: "DD/MM/YYYY"
});
jQuery('#birthday3').datetimepicker({
format: "DD/MM/YYYY"
});
.overflow-x-scroll {
overflow-x: auto !important;
}
.overflow-x-visible {
overflow-x: visible !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-form-label" for="comp">Table
</label>
<div style="width: 600px; height:600px;
background-color: #cccccc;">
<div class="overflow-x-scroll">
<table width="1000px" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td>Field Text</td>
<td>Field Text</td>
<td>Field Text</td>
<td>Field Date</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td>
<div style="position:relative">
<input type="text" placeholder="Birthday" name="birthday" id="birthday1" class="form-control ">
</div>
</td>
</tr>
<tr class="head">
<td>Field Text</td>
<td>Field Text</td>
<td>Field Text</td>
<td>Field Date</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td>
<div style="position:relative">
<input type="text" placeholder="Birthday" name="birthday" id="birthday2" class="form-control ">
</div>
</td>
</tr>
</table>
</div>
<br/>
<br/>
<br/>
<div class="overflow-x-visible">
<table width="1000px" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td>Field Text</td>
<td>Field Text</td>
<td>Field Text</td>
<td>Field Date</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td class="text-center">
<input type="text" name="hi_name" class="form-control text-center" />
</td>
<td>
<div style="position:relative">
<input type="text" placeholder="Birthday" name="birthday" id="birthday3" class="form-control ">
</div>
</td>
</tr>
</table>
</div>
</div>
JSfiddle: https://jsfiddle.net/tunn58/hda1uxne/3/
Is there any way to display the datetimepicker outside the horizontal scrollbar and without the vertical scrollbar like when using overflow-x: visible;? Or is there any other way to handle a long table with datetime input field?
I'm trying to change the overflow-x to hidden when the datetimepicker is showing and change it back to scroll when the datetimepicker is hiding, but some input fields are at the end of the table so I can't do that.
Save Data From Html Table to excel using JavaScript
That following code is working fine but when i fill the data in input text box than Filled Data is not exporting in excel.
Like Dealer Name So Please Take a Look On code and tell me how to export Html Table With input text into Excel.
Appreciate Your Help..
My Code :
var table2excel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
})
}
return function(table, name, text) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
}
window.location.href = uri + base64(format(template, ctx))
}
})()
<html>
<head>
<title>
excel sheet
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="table2excel.js"></script>
<input type="button" onclick="table2excel('testTable', 'Analysis Results')" value="Export to Excel" />
<div id="hidTable">
<table id="testTable">
<tr>
<td class="xl67">Pre Approval form for marketing Claims</td>
</tr>
<tr>
<td class="xl68" colspan="2" rowspan="2" style='height:40.50pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext ;'>
<pre>Dealer Name:</pre>
<input id="tab1" type="text" style="width: 150px; padding-top: 2px; ">
</td>
<td class="xl68" colspan="3" style='border-right:.5pt solid windowtext; border-bottom:initial;'>
<pre>Request Number</pre>
<input id="tab2" type="text" style="width: 95px; padding-top: 2px;">
</td>
<td class="xl68" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:initial;'>
<pre>Date Issued:</pre>
<input id="tab3" type="text" style="width: 75px; padding-top: 2px;">
</td>
</tr>
<tr>
<td class="xl71" colspan="3" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
<td class="xl71" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
</tr>
<tr>
<td class="xl74">Start Date:</td>
<td class="xl75">
<input type="text" style="width: 150px ; padding-top: 2px;" />
</td>
<td class="xl76"></td>
<td class="xl77" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td>
<td class="xl74">End Date:
</td>
<td class="xl78" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'>
<input type="text" style="width: 120px; padding-top: 2px;">
</td>
</tr>
<tr>
<td class="xl80" colspan="7" style='height:15.75pt;border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'>Type of Marketing Activity<span style='mso-spacerun:yes;'> </span></td>
</tr>
<tr style='height:38.25pt;'>
<td class="xl83" style='height:38.25pt;'>Print Advert
</td>
<td class="xl84">Name of Publication</td>
<td class="xl85">Size sqm/sqf</td>
<td class="xl85">Cost per sqm/sqf</td>
<td class="xl86"># of Inserts</td>
<td class="xl87">Cost per insert</td>
<td class="xl86">total Cost</td>
</tr>
<tr>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="magazine" name="magazine" value="magazine" />
<label for="magazine">Magazine</label>
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="numVal1" id="qty" onkeyup="getValues()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="numVal2" id="price" onkeyup="getValues()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="numVal3" id="discount" onkeyup="getValues()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="numVal5" id="freight" onkeyup="getValues()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalValue" id="total" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Newspaper" name="Newspaper" value="Newspaper" />
<label for="Newspaper">Newspaper</label>
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="value1" id="quantity" onkeyup="getnews()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="value2" id="priceRange" onkeyup="getnews()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="value3" id="discountPer" onkeyup="getnews()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="value5" id="Offer" onkeyup="getnews()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalrock" id="totalCost" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Directories" value="Directories" />Directories
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam1" id="quantity1" onkeyup="getDir()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam2" id="priceRange1" onkeyup="getDir()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam3" id="discountPer1" onkeyup="getDir()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam5" id="Offer1" onkeyup="getDir()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock" id="totalSam" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="NewspaperInserts" value="NewspaperInserts" />Newspaper No.
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam11" id="quantity11" onkeyup="getPaper()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam22" id="priceRange11" onkeyup="getPaper()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam33" id="discountPer11" onkeyup="getPaper()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam55" id="Offer11" onkeyup="getPaper()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock1" id="totalPaper" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="Journals" value="Journals" />Journals
</td>
<td class="xl89">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam111" id="quantity111" onkeyup="getJourn()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl89">
<input type="text" class="sam222" id="priceRange111" onkeyup="getJourn()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam333" id="discountPer111" onkeyup="getJourn()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="sam555" id="Offer111" onkeyup="getJourn()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="totalRock11" id="totalJourn" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl90" style='height:21.00pt;'>Position of the Advert</td>
<td class="xl86" colspan="6" style='border-right:.5pt solid border-bottom:.5pt solid'>
</td>
</tr>
<tr style='height:39.00pt;'>
<td class="xl92" style='height:39.00pt;'>Out Door Advertising</td>
<td class="xl86">Location</td>
<td class="xl85">Size sqm/sqf</td>
<td class="xl85">Cost per sqm/sqf</td>
<td class="xl86">Per Month</td>
<td class="xl86">Period</td>
<td class="xl86">total Cost</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="hoardings" name="hoardings" value="hoardings" />Hoardings
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="hoard1" id="mage1" onkeyup="getHoard()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="hoard2" id="mage2" onkeyup="getHoard()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="hoard3" id="mage3" onkeyup="getHoard()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="hoard5" id="mage5" onkeyup="getHoard()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageRock" id="totalHoard" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="MobileBillboards" name="Mobile Billboards" value="MobileBillboards" />Mobile Bill
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="bill1" id="mage11" onkeyup="getBill()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="bill2" id="mage22" onkeyup="getBill()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="bill3" id="mage33" onkeyup="getBill()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="bill5" id="mage55" onkeyup="getBill()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageBill" id="totalBill" style="width:60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" height="28" style='height:21.00pt;'>
<input type="checkbox" id="Posters" name="Posters" value="Posters" />Posters
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="post1" id="mage111" onkeyup="getPost()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post2" id="mage222" onkeyup="getPost()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post3" id="mage333" onkeyup="getPost()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post5" id="mage555" onkeyup="getPost()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="magePost" id="totalPost" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="VinylBanners" name="Vinyl Banners" value="VinylBanners" />Vinyl Banners
</td>
<td class="xl90">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl95">
<input type="text" class="post11" id="ban1" onkeyup="getBan()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="post22" id="ban2" onkeyup="getBan()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post33" id="ban3" onkeyup="getBan()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post55" id="ban5" onkeyup="getBan()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageBan" id="totalBan" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="LEDDisplays" name="LED Displays" value="LEDDisplays" />
<label for="LEDDisplays">LED Displays</label>
</td>
<td class="xl90">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl95">
<input type="text" class="post111" id="ban11" onkeyup="getLed()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="post222" id="ban22" onkeyup="getLed()" style="width: 152px; padding-top: 2px;" />
</td>
<td class="xl91">
<input type="text" class="post333" id="ban33" onkeyup="getLed()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="post555" id="ban55" onkeyup="getLed()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageLed" id="totalLed" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl96" style='height:15.00pt;'>Digital Marketing</td>
<td class="xl97"></td>
<td class="xl98"></td>
<td class="xl97"></td>
<td class="xl97"></td>
<td class="xl97"></td>
<td class="xl99"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl100" colspan="2" style='height:21.00pt;border-right:.5pt solid border-bottom:.5pt solid'>
<input type="checkbox" id="GoogleAdwords" name="Google Adwords" value="GoogleAdwords" />Google Adwords
</td>
<td class="xl102" colspan="3" style='border-right:none; border-bottom:.5pt solid windowtext;'>
<input type="text" style="width: 300px; padding-top: 2px;" />
</td>
<td class="xl103"></td>
<td class="xl104"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl105" colspan="2" style='height:21.00pt;border-right:.5pt border-bottom:.5pt solid '>
<input type="checkbox" id="SocialMediaMarketing" name="Social Media Marketing" value="SocialMediaMarketing" />Social Media Marketing
</td>
<td class="xl107" colspan="3" style='border-right:none; border-bottom:.5pt solid'>
<input type="text" style="width: 300px; padding-top: 2px;" />
</td>
<td class="xl108"></td>
<td class="xl109"></td>
</tr>
<tr style='height:29.25pt;'>
<td class="xl110" style='height:29.25pt;'>
Electronic Adverts</td>
<td class="xl86">City/Station/Channel</td>
<td class="xl86">No of Spots</td>
<td class="xl111">Duration</td>
<td class="xl86">Cost</td>
<td class="xl91">Cost for durtation</td>
<td class="xl90"></td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="MultiplexAdv." name="Multiplex Adv." value="MultiplexAdv." />Multiplex Adv.
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="multi1" id="multi11" onkeyup="getMulti()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi2" id="multi22" onkeyup="getMulti()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi3" id="multi33" onkeyup="getMulti()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="multi5" id="multi55" onkeyup="getMulti()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageMulti" id="totalMulti" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="RadioSpots" name="Radio Spots" value="RadioSpots" />Radio Spots
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="radio1" id="radio11" onkeyup="getRadio()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio2" id="radio22" onkeyup="getRadio()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio3" id="radio33" onkeyup="getRadio()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="radio5" id="radio55" onkeyup="getRadio()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageRadio" id="totalRadio" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:21.00pt;'>
<td class="xl88" style='height:21.00pt;'>
<input type="checkbox" id="TVAds" name="TV Ads" value="TVAds" />TV Ads
</td>
<td class="xl93">
<input type="text" style="width: 128px; padding-top: 2px;" />
</td>
<td class="xl94">
<input type="text" class="tv1" id="tv11" onkeyup="getTv()" style="width: 75px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv2" id="tv22" onkeyup="getTv()" style="width:152px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv3" id="tv33" onkeyup="getTv()" style="width: 70px; padding-top: 2px;" />
</td>
<td class="xl93">
<input type="text" class="tv5" id="tv55" onkeyup="getTv()" style="width: 65px; padding-top: 2px;" />
</td>
<td class="xl90">
<input type="text" class="mageTv" id="totalTv" style="width: 60px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:18.00pt;'>
<td class="xl786 " colspan="7" rowspan="5" style='height:90.00pt;border-right:.5pt solid windowtext; border-bottom:.5pt solid windowtext;'>working description
<br />
<textarea rows="6" cols="140" name="comment" form="usrform"></textarea>
</td>
</tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:18.00pt;mso-height-source:userset;mso-height-alt:360;'></tr>
<tr style='height:2.00pt;'></tr>
<tr style='height:15.00pt;'>
<td class="xl115" colspan="7" style='height:15.00pt;border-right:.5pt solid border-bottom:.5pt solid '>Contact Details of Media to be Used</td>
</tr>
<tr class="xl65" style='height:19.50pt;'>
<td class="xl88" style='height:19.50pt;'>Contact Person</td>
<td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 180px; padding-top: 2px;" />
</td>
<td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid'> Email Address</td>
</tr>
<tr class="xl65" style='height:19.50pt;'>
<td class="xl88" style='height:19.50pt;'>Contact Number</td>
<td class="xl88" colspan="2" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 180px; padding-top: 2px;" />
</td>
<td class="xl86" colspan="4" style='border-right:.5pt solid border-bottom:.5pt solid '>
<input type="text" style="width: 272px; padding-top: 2px;" />
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl70" colspan="7" style='height:15.00pt;border-right:none;border-bottom:none;'>For ABC
</td>
</tr>
<tr style='height:15.00pt;'>
<td class="xl96" style='height:15.00pt;'>Checklist </td>
<td class="xl116"></td>
<td class="xl99"></td>
<td class="xl117"></td>
<td class="xl116"></td>
<td class="xl118"></td>
<td class="xl99"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Artwork" name="Artwork" value="Artwork " />Artwork or Design Approval By ABC
</td>
<td class="xl66"></td>
<td class="xl120"></td>
<td class="xl121">
<input type="checkbox" id="Sample" name="Sample" value="Sample " />Sample Artwork included
</td>
<td class="xl66" colspan="2" style='mso-ignore:colspan;'>
</td>
<td class="xl120"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Cost" name="Cost" value="Cost " />Cost Approval by ABC
</td>
<td class="xl66"></td>
<td class="xl120"></td>
<td class="xl121">
<input type="checkbox" id="Image" name="Image" value="Image" />Sample Image included
</td>
<td class="xl66" colspan="2">
</td>
<td class="xl120"></td>
</tr>
<tr style='height:15.75pt;'>
<td class="xl119" style='height:15.75pt;'>
<input type="checkbox" id="Location" name="Cost" value="Location" />Location:
</td>
<td class="xl122"></td>
<td class="xl123"></td>
<td class="xl121">
<input type="checkbox" id="Costing" name="Costing" value="Costing" />Costing included
</td>
<td class="xl66" colspan="2">
</td>
<td class="xl120"></td>
</tr>
</table>
</div>
</body>
</html>
This seems to work with jQuery:
Download:
https://www.jqueryscript.net/demo/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel/
Source:
<script src="scripts/jquery.table2excel.js"></script>
Script:
$("#testTable").table2excel({
// exclude CSS class
exclude: ".noExl",
name: "Worksheet Name",
filename: "Products" //do not include extension
});
It will give you the download.
The form is missing an action url, since the javascript takes care of that.
I recently fixed an issue with not labeling the submit button as type=submit that caused ie 6 and 7 to not do anything when clicking on the submit..
But I recently still get complains on the form not doing anything when someone presses the submit button.
My only last guess would be that they disabled javascript...
If anyone have some other point of view on this Please Take a look. Could be old Browsers issue, could be code issue..
JSfiddle
http://jsfiddle.net/wn21av2y/1/
HTML
<form id="form1" name="form1" method="post" style="transition: 3s height; overflow: hidden;">
<table width="100%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td width="25%" align="right">Practitioner's Full Name<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="name" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td width="25%" align="right">Type<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="type" required="">
<option value="MD">MD</option>
<option value="OD">OD</option>
<option value="OTHER">OTHER</option>
</select>
</td>
</tr>
<tr>
<td align="right">Street Address<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="address" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">City<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="city" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">State<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<select name="state" id="state" required="">
<option value="AL" selected="">Alabama</option>
<option value="AK">STATES</option>
</select>
</td>
</tr>
<tr>
<td align="right">Zip<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="zip" type="text" placeholder="12345-1234" required="" pattern="(\d{5}([\-]\d{4})?)">
</td>
</tr>
<tr>
<td align="right">Phone<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="phone" type="text" required="" placeholder="123-456-7890" pattern="\d{3}[\-]\d{3}[\-]\d{4}">
</td>
</tr>
<tr>
<td align="right">Email<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="email" type="email" required="" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
</td>
</tr>
<tr>
<td align="right">Signature ( Type Name )<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="sig" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">Today's Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date1" required="">
</td>
</tr>
<tr>
<td align="right">State License Number<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input name="lic_numb" type="text" required="" pattern=".{3,}">
</td>
</tr>
<tr>
<td align="right">License Exp. Date<span style="color:red;">*</span>
</td>
<td style="text-align: left">
<input type="text" class="datepicker date2" required="">
</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check1" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">My signature certifies that
<br>1) The information provided</td>
</tr>
<tr>
<td align="right" valign="top">
<input name="check2" type="checkbox" value="" required=""><span style="color:red;">*</span>
</td>
<td style="text-align: left">I verify that the recipient is eligible to receive samples.<br>
</td>
</tr>
<tr>
<td width="25%" align="right"> </td>
<td style="text-align: left">
<button type="submit" class="submits">Submit</button>
</td>
</tr>
</tbody>
</table>
</form>
script
jQuery(function($) {
$(".datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
$("#form1").submit(function() {
var url = "example.com/process.php"; // the script where you handle the form input.
$.post(url, {
name: $("input[name='name']").val(),
type: $("select[name='type'] option:selected").text(),
address: $("input[name='address']").val(),
city: $("input[name='city']").val(),
state: $("select[name='state'] option:selected").text(),
zip: $("input[name='zip']").val(),
phone: $("input[name='phone']").val(),
email: $("input[name='email']").val(),
sig: $("input[name='sig']").val(),
date: $(".date1").datepicker("getDate"),
lic_numb: $("input[name='lic_numb']").val(),
lic_date: $(".date2").datepicker("getDate"),
code: 'tEH4s'
}).done(function(data) {
$(".result").html(data);
$('input').val('');
$('#form1').css("height", "0");
});
return false; // avoid to execute the actual submit of the form.
});
});
An important quirk to be aware of: In a form that contains a <button/> element, IE6 and IE7 will not submit the form when the <button/> element is clicked. Other browsers, on the other hand, will submit the form. - Source
To get it to work in IE6 and IE7 you need to change the button tag to instead be:
<input type="submit" class="submits" value="Submit" />
To my mind you need an action for the form to be submitted, as it's said at the w3c HTML 4 spec.
I included a remote page in my website with iframe.
This page has tables.
I want to fill tables with Javascript in iframe view.
<form action="" method="post" onsubmit="return IsValidForm();" >
<input type="hidden" name ="viewstate" value="HgIPYl1YWl1eXV9hHgViAAQHCQ4DAAMKHw4ZCh8OBgoFYRsCD2JfU1NhGwgfYlJhCB9iXVheW1JfWl5fWVxdW1JYXF5bYREEBQ5iWlldW1thCAYfCGJbYQ==" />
<input type="hidden" name ="un" value="kolbehkhaterateman" />
<input type="hidden" name ="chsm" value="160772526" />
<table cellpadding="2" width="450" border="0" style="text-align:right" id="tblc">
<tr>
<td width="64">name:</td>
<td width="372">
<input id="txtwriter" name="txtwriter" class="textbox" onkeypress="return farsikey(this,event)" onkeydown="changelang(this);" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="64">email:</td>
<td width="372">
<input id="txtemail" name="txtemail" class="textbox" dir="ltr" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="64">website:</td>
<td width="372">
<div style="FLOAT: left; WIDTH: 40px; HEIGHT: 20px; TEXT-ALIGN: left">
<img class="Off" onmouseover="On(this)" onclick="ShowSM()" onmouseout="Of(this)" id="imgsm" height="18" src="http://www.blogfa.com/cmt/images/1.gif" width="18" border="0">
</div>
<input id="txturl" name="txturl" class="textbox" dir="ltr" type="text" maxlength="50" value="" ></td>
</tr>
<tr>
<td width="100%" colspan="2">
<textarea class="textarea" name="txtcomment" id="txtcomment" onkeypress="return farsikey(this,event)" onkeydown="changelang(this);"></textarea></td>
</tr>
<tr>
<td width="100%" colspan="2"><input id="chkPrivate" type="checkbox" value="ON" name="chkPrivate" align="absmiddle"><label for="chkPrivate">urcomment
abs</label></td>
</tr>
<tr>
<td width="100%" colspan="2"><input id="chkSave" type="checkbox" name="chkSave" align="absmiddle"><label for="chkSave">ur sciority </label>
[remove info]</td>
</tr>
<tr id="captchaspace" style="visibility:hidden" >
<td width="100%" colspan="2" height="24" > type this numbre: <input class="textbox" dir="ltr" type="text" value="" id= "txtCaptcha" name= "txtCaptcha" maxlength="6" style="width:70px;" align="absmiddle" onfocus="document.getElementById ('btnSend').disabled=false;" autocomplete="off" > <span id="imgspace" ></span>
</td>
</tr>
<tr><td width="100%" colspan="2" align=center height="18"><span style="font-size:7.5pt;color:gray"> nazar </span></td> </tr>
<tr>
<td align="left" width="100%" colspan="2" height="33">
<input class="btn" id="btnSend" type="submit" value="submit" name="btnSend" >
</td>
</tr>
</table>
</form>
How can I fill table fields with values?
Using Javascript or something.
I'm not too familiar with Javascript. Please shown me an example.
i included a remote page in my website with iframe.
Short answer is you can't modify a page from another domain. For security reasons browsers implement a "same origin policy". You can only edit the content of an iframe if it came from the same domain as the outer page. Otherwise people could do all sorts of nasty things like show a remote site's login page but change the post location to your own site, steal cookie values, etc.