The HTML below seems to successfully reads a text file from client PC and display it in textarea. However it is immediately blanked in Firefox and fails completely in Chrome. No idea what happens in IE as I dont have a copy.
First browse(Firefox) or Choose(Chrome); Then click "Load CAD Data"
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8;" />
<title>miCAD 0.00 </title>
<script type="text/javascript"><!--
"use strict";
function loadCadFile(){
var fileName=document.getElementById('fileName').files[0];
var fileReader=new FileReader();
fileReader.onload=function(e){
var textFromCadFile=e.target.result;
var el=document.getElementById('CADdata');
el.style.display='block';
el.innerHTML=textFromCadFile;
};
fileReader.onerror=function(e){
alert('read error');};
fileReader.readAsText(fileName,"UTF-8");
alert('xxx');
}
//--></script>
</head><body>
<form name="f" action="" method="post" >
<p>CAD file selector</p>
<table class="tc">
<tr><td colspan="2"><input type="file" id="fileName" /></td></tr>
<tr><td></td><td class="right">
<button onclick="loadCadFile(); alert('yyy');">Load CAD data</button></td></tr>
</table>
<textarea id="CADdata" width="90%" rows="10"></textarea>
<input type="hidden" name="MAX_FILE_SIZE" value="40000" />
<input type="submit" value="just in case">
</form>
</body></html>
Example code is at "mips-erp.com/CAD/test.html as the above is my best attempt at pasting and then aligning the code
You don't use innerHTML to set the content of a text area you use value
el.value=textFromCadFile;
I recoded it. Working code follows:
<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8;" />
<title>miCAD 0.00 </title>
<script type="text/javascript"><!--
"use strict";
function loadCadFile(fileData){
var fileReader=new FileReader();
fileReader.onload=function(e){
document.getElementById('CADdata').value=e.target.result;
};
fileReader.readAsText(fileData.files[0]);
}
//--></script>
</head><body>
<form name="f" action="" method="post" >
<p>CAD file selector</p>
<table class="tc">
<tr><td colspan="2"><input type="file" id="fileName" onchange="loadCadFile(this)" /></td></tr>
</table>
<textarea id="CADdata" width="90%" rows="10"></textarea>
<input type="hidden" name="MAX_FILE_SIZE" value="40000" />
</form>
</body></html>
Related
I'm trying to create a html pop up that will then populate a gsheet. I've basically used the same solution found here. For some strange reason though, it isn't working. When I click the submit button on the HTML pop up box after filling out all the data, it doesn't respond. I click, it doesn't close, append the data, or do anything.
The html pop up is created, but the Submit button doesn't work. I am almost sure that it is has something to do with the onClick method I am using.
Here is the code I am working with:
gs file
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('customerMenu.html').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add Customer');
}
function customerAdd(customerForm) {
var ss = SpreadsheetApp.getActiveSpreadsheet;
var cus_db = ss.getSheetByName("customer_db");
cus_db.appendRow([" ", customerForm.name_1, customerForm.name_2, customerForm.phone, customerForm.age, customerForm.channel]);
return true;
}
html file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<br>
<customerForm>
First Name:<br>
<input type="text" name="name_1">
<br>
Second Name:<br>
<input type="text" name="name_2">
<br>
Phone Number:<br>
<input type="text" name="phone">
<br>
Age:<br>
<input type="number" name="age">
<br>
How did they hear about us?:<br>
<input type="text" name="channel">
<br><br>
<input type="submit" value="Add Customer" class ="submit"
onclick="google.script.run
.withSuccessHandler(google.script.host.close)
.customerAdd(this.parentNode)" />
</customerForm>
</html>
I've scoured stackoverflow for almost every solution:
I am running two pop ups so I changed the function names based on the advice here
I tried to use the '''document.forms[0]''' method found here also didn't work
What am I missing?
onClick on Google Script working for HTML Form
GS:
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('ah2')
SpreadsheetApp.getUi().showModelessDialog(html, 'Add Customer');
}
function customerAdd(obj) {
var ss = SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet15');
sh.appendRow(["", obj.name_1, obj.name_2, obj.phone, obj.age, obj.channel]);
return true;
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form>
First Name:<br>
<input type="text" name="name_1" />
<br>
Second Name:<br>
<input type="text" name="name_2"/>
<br>
Phone Number:<br>
<input type="text" name="phone"/>
<br>
Age:<br>
<input type="number" name="age"/>
<br>
How did they hear about us?:<br>
<input type="text" name="channel"/>
<br><br>
<input type="button" value="Add Customer" onClick="addCust(this.parentNode);" />
</form>
<script>
function addCust(obj) {
google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.customerAdd(obj);
}
</script>
</body>
</html>
I have a sitekey and I want to reproduce the captcha locally. However, when I open the html it says invalid domain for sitekey.
this is the code in my html file:
<script type='text/javascript' src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method="post" action="you cannot see this link">
<input type="text" placeholder="productcode_size" name="pid">
<input type="text" placeholder="productcode" name="masterPid">
<input type="hidden" value="1" name="Quantity">
<input type="hidden" value="" name="x-PrdRtt" id="captcha_val">
<input type="hidden" value="Add To Bag overlay" name="layer">
<input type="hidden" name="ajax" value="true">
<br>
<br>
<br>
<br>
<div style="opacity: 0.3" class="g-recaptcha" data-sitekey="you cannot see this sitekey"></div>
<br>
<div class="contionue-shopping-wrapper">
<form class="co-formcontinueshopping" action="You cannot see this link" method="post" id="dwfrm_cart_d0ffhvzsobkp">
<fieldset>
<button class="rbk-button-red button-primary bp-black right" type="submit" value="Continue Shopping" name="dwfrm_cart_continueShopping">
<span>Continue Shopping</span>
</button>
</fieldset>
</form>
</div>
</form>
<script>
check = setInterval(function() {
v = document.getElementById('g-recaptcha-response').value
if (v.length > 0) {
var r = '&x-PrdRtt='+v+'"">ATC Link</a>';
document.getElementById('captcha_val').value = v
var sz = document.getElementById('sz').value;
var pid = '?ajax=true&pid='+sz;
document.getElementById('hack').innerHTML = '<a href="'+document.forms[0].action+pid+r;
clearInterval(check);
}
}, 400)
</script>
</body>
</html>
Please can someone help me fix this? I want to be able to complete the captcha locally to extract the captcha response.
According to this page https://developers.google.com/recaptcha/docs/start
If you would like to use "localhost" for development,
you must add it to the list of domains.
so simply add "localhost" (or "127.0.0.1") , that should work for you.
i am trying to assign a textbox value to a php variable now problem is i want one button to work for two different pages i.e if i enter in a text box 'a'and click on button it should redirect to 'a.php' page if i write in a text box 'b' it should redirect to 'b.php'.
so one textbox,one button two different pages.
Code :
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm(action)
{
document.getElementById('a').action = action;
document.getElementById('a').submit();
}
function submitForm1(action)
{
document.getElementById('b').action = action;
document.getElementById('b').submit();
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<form action="b.php" name="b" id="b" method="post">
<form action="a.php" name="a" id="a" method="post">
<input type="submit" onclick="submitForm('a.php')" value="TRY" name="a">
<input type="button" onclick="submitForm1('b.php')" value="TRY" name="b">
</form>
</form>
</body>
</html>
You can change the action onsubmit based on the text inside the input.
<html>
<head>
<script type="text/javascript">
function onsubmit_handler(){
var myForm = document.getElementById('myForm');
var data = document.getElementById('data').value;
if(data == "a")
myForm.setAttribute('action', 'a.php');
else if(data == "b")
myForm.setAttribute('action', 'b.php');
else
myForm.setAttribute('action', 'error.php');
}
</script>
</head>
<body>
<h3>Enter Text:</h3>
<form id="myForm" method="post" onsubmit="onsubmit_handler()">
<input type="text" id="data" name="data" value="">
<input type="submit" value="Post">
</form>
</body>
</html>
Test code here : http://jsfiddle.net/Eg9S4/
use this codes buddy
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm()
{
var link=document.getElementById('a');
var str1 = "a.php";
var n = str1.localeCompare(link);
if(n==1)
{
window.open("main.html");
}
else if(n==-1)
{
window.open("index.html");
}
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<input type="submit" onclick="submitForm()" value="TRY" name="a">
</form>
</form>
</body>
</html>
The problem looks to be that you're using getElementById but the input elements don't have an ID (they only have a name).
I'd also recommend attaching an onSubmit event to the form and removing the onClick events from the buttons.
Edit: After looking at the code in detail I saw that there were some other issues that were probably hindering the opersation. The most notable one was that you can't nest form tags. There were some other CSS and validation issues.
Here is some working code:
Test Page
function SubmitForm(el) {
// Get the form element so that we can set the action later
var form = document.getElementById('theForm');
// Set the action for the form based on which button was clicked
if (el.id == "A")
form.action = "a.php";
if (el.id == "B")
form.action = "b.php";
// You dont need to submit the form. It's alreasdy happening, so there is no need for an explicit call.
}
</script>
<h3 style="font-family: Verdana; font-weight: bold;">Enter Text:</h3>
<input type="text" style="font-size:15pt;height:32px;"><br><br>
<form method="post" onsubmit="SubmitForm();" action="fake.html" id="theForm">
<input type="submit" id="A" value="A" onclick="SubmitForm(this);">
<input type="submit" id="B" value="B" onclick="SubmitForm(this);">
</form>
I have the next HTML code:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
</body></html>
Which create a file input and submit button, which sends a POST method (/upload).
I want to create a new button (submitBig), which would send another POST method (/uploadBig).
How can I do it?
A simple workaround, Create 2 Forms:
<!DOCTYPE><html><body>
<form method='post' action='/upload' enctype='multipart/form-data'>
<input type='file' name='uploadFile'/>
<input type='submit' /></form>
<form method='post' action='/uploadBig' enctype='multipart/form-data'>
<input type='file' name='uploadFileBig'/>
<input type='submit' /></form>
</body></html>
Else you should indeed refer to Javascript.
Use JavaScript to run a different function for each button. Set the .action and do the .submit from there.
You will need to use Javascript. Essentially this will edit the Action of the form and post it on click:
$('#big-submit').click(function(e) {
e.preventDefault();
$(this).closest('form').attr('action', '/uploadBig').submit();
});
An even better solution would be to just have the one button, and then get the file size on click and post to the relevant action.
You can use jQuery or simple Javascript:
<!DOCTYPE>
<html>
<body>
<form method="post" id="theForm" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile" />
<input type="submit" value="normal Submit (/upload)" />
<input type="button" id="bigButton" value="big Submit (/uploadBig)" />
</form>
<script type="text/javascript">
var theForm = document.getElementById('theForm');
/* When the button is clicked */
document.getElementById('bigButton').onclick = function() {
/* Change the location */
theForm.action = '/uploadBig';
/* Submit the form */
theForm.submit();
};
</script>
</body>
</html>
You can use the HTML5 formaction attribute to do that (but you have to check it's compatibility with your requirements to use it : it only works on recent browsers).
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="uploadFile"/>
<input type="submit" value="Submit" />
<input type="submit" value="Submit big" formaction="/uploadBig" />
</form>
</body>
</html>
Here One way to get around this is to handle each button's OnClick event and set the "action" for the form dynamically:
<!-- create the form -->
<form name="Form1" method="post">
<!-- Add the data entry bits -->
Your Name <input type="text" name="text1" size="10" /><br />
<!-- Add some buttons -->
<INPUT type="button" value="Button1" name=button1 onclick="return OnButton1();">
<INPUT type="button" value="Button2" name=button2 onclick="return OnButton2();">
<!-- close the form -->
</form>
Our button click handlers for Button1 and Button2 would look like the following:
<script language="Javascript">
<!--
function OnButton1()
{
document.Form1.action = "Page1.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
function OnButton2()
{
document.Form1.action = "Page2.aspx"
document.Form1.target = "_blank"; // Open in a new window
document.Form1.submit(); // Submit the page
return true;
}
-->
</script>
<noscript>You need Javascript enabled for this to work</noscript>
Where Page1.aspx should be called when Button1 is pressed, and Page2.aspx called when Button2 is pressed.
I am building a form using html in wordpress. The fields that need to be required work in chrome (giving a please fill out this field when the submit button is pressed without information in the field) however it will not work in IE or mobile, it just allows the form to be submitted. Here is a sample of a field
Last name: *
input type="text" name="lastname" value="" maxlength="50" required="required"
I dont know whats going on here and Im pretty new so any help would be appreciated
(edit with answer)
This is what I ended up doing and it works now thanks for the responses
<html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" form action="dlcplateFormTest.php" onsubmit="return validateForm()" method="POST">
<tr>
<td>Last name: *</td>
<td><input type="text" name="lastname" value="" maxlength="50" required="required" /> </td>
</tr>
<tr>
<input type="submit" value="Submit" /><input type="reset" value="Reset" />
</form>
</body>
</html>
you need to write a javascript function that checks if the fields are "" or not if they are "" then cancel request