Navigate and interchange form contents between 2 pages without webserver - html

I am new to html coding and trying to explore html without any webservers help.
I have 2 html pages placed in a directory named 1.html and 2.html
1.html is
<!DOCTYPE html>
<html>
<body>
<form action="2.html" method="POST">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p>
</body>
</html>
and
2.html is
<!DOCTYPE html>
<html>
<body>
<form action="1.html" method="POST">
First name:<br>
<input type="text" id="firstname" name="firstname">
<br>
Last name:<br>
<input type="text" id="lastname" name="lastname">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('firstname').value =
"Here I need firstname from 1.html";
</script>
</body>
</html>
I need to know, what mechanism can I use to transfer data from 1.html into 2.html without using any webserver.
means,
if I need to display firstname from 1.html into 2.html,
undersection
<script>
document.getElementById('firstname').value =
"Here I need firstname from 1.html";
</script>
what code should I write?

try this one
1.html
<!DOCTYPE html>
<html>
<body>
<form action="2.html" method="GET">
First name:<br>
<input type="text" name="firstname" value="Mickey" >
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse" >
<br><br>
<input type="Submit" value="Submit" >
</form>
<p>Upon click the "Submit" button, the form-data will be sent to 2.html".</p>
</body>
</html>
2.html
<!DOCTYPE html>
<html>
<body>
<form action="2.html" method="GET">
First name:<br>
<input type="text" id="firstname" name="firstname" value="">
<br>
Last name:<br>
<input type="text" id="lastname" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<script type="text/javascript">
window.onload = function() {
var query = window.location.search.substring(1);
var vars = query.split("&");
var pair ="";
for (var i=0;i<vars.length;i++) {
pair = pair + vars[i].split("=")+",";
}
var arr=pair.split(",");
document.getElementById('firstname').value = arr[1];
document.getElementById('lastname').value = arr[3];
};
</script>

Related

How to get data from Custom Dialog Window in Google App Script?

I created a Custom Dialog Window in Google Spreadsheet using Google App Script that looks like this:
How do I get the data from the window to my spreadsheet.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form action="google.script.run.testing143()">
Task Number:<br>
<input type="text" name="taskNumber" value="">
<br><br>
Task Date:<br>
<input type="text" name="taskDate" value="">
<br><br>
Customer Name:<br>
<input type="text" name="customerName" value="">
<br><br>
Customer Site:<br>
<input type="text" name="customerSite" value="">
<br><br>
<select>
<option value="status">Status</option>
<option value="complete">Complete</option>
<option value="scheduled">Scheduled</option>
<option value="reschedule">Reschedule</option>
</select>
<br><br>
Status Date:<br>
<input type="text" name="statusDAte" value="">
<br><br>
Location:<br>
<input type="text" name="location" value="">
<br><br>
Description:<br>
<input type="text" name="description" value="">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
function testing143(){
Logger.log('With Success') ///Doesn't work
var lmnt = document.getElementByName('usrname'); //Wrong
}
</script>
</body>
</html>
When I click 'submit' it takes me to an error 400 page.
I can create a function that takes the data as a parameter like:
function getNewTask(number,date,status...)
Can I use document.getElement ? If so how is that done?
Your help is sincerely appreciated!
I've taken your code and modified to work.
In Code.gs
function testing143(obj) {
Logger.log(obj);
return "hello";
}
In HTML file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="myForm">
Task Number:<br>
<input type="text" name="taskNumber" value="">
<br><br>
Task Date:<br>
<input type="text" name="taskDate" value="">
<br><br>
Customer Name:<br>
<input type="text" name="customerName" value="">
<br><br>
Customer Site:<br>
<input type="text" name="customerSite" value="">
<br><br>
<select name="status">
<option value="status">Status</option>
<option value="complete">Complete</option>
<option value="scheduled">Scheduled</option>
<option value="reschedule">Reschedule</option>
</select>
<br><br>
Status Date:<br>
<input type="text" name="statusDate" value="">
<br><br>
Location:<br>
<input type="text" name="location" value="">
<br><br>
Description:<br>
<input type="text" name="description" value="">
<br><br>
<input type="button" value="Submit" onclick="testing143()">
</form>
<script>
function success(msg) {
alert(msg);
}
function testing143(){
var form = document.getElementById("myForm").elements;
var obj ={};
for(var i = 0 ; i < form.length ; i++){
var item = form.item(i);
obj[item.name] = item.value;
}
google.script.run.withSuccessHandler(success).testing143(obj);
}
</script>
</body>
</html>

Why is the form ignoring submit?

I made a begining of a question submit page:
<!DOCTYPE html>
<html>
<head>
<title>Question</title>
</head>
<body>
<from action="contformer.php" method="post">
<input name="mail" type="text" size="50" placeholder="Please enter your email, so we can contact you back."><br>
<input type="text" name="sub" placeholder="Enter the subject here"><br>
<input type="text" name="q" size="50"><br>
<input type="submit" value="Submit your question">
</form>
</body>
</html>
Does anyone know why it does nothing when i click the "Submit your question" button?
You have an syntax error
There should be form and not from action
Please change <**from** action="contformer.php" method="post"> to form

create a link using input and button

I want to create a form like popup that has a input and a button. When i type in an input Ex.: "good" and click on button it go to the url "good.mydomain.com"
i did this but it doest work
<html>
<form action="firstname.mydomain.com">
Go to URL:<br>
<input type="text" name="firstname" value="">.mydomain.com
<br>
<p>
<input type="submit" value="go">
</p>
</form>
</html>
You could achieve this with jQuery.
The HTML:
<input type="text" id="goTo" name="firstname">.mydomain.com
<input type="submit" id="myButton" value="Go">
Then the jQuery:
$('#myButton').click(function() {
var goTo = $("#goTo").val();
window.location.href = 'http://'+goTo+'.mydomain.com/';
return false;
});
please try below code using javascript.
<html>
<head>
<title>Submit</title>
<script>
function Submit() {
var url = "http://www." + document.getElementById("firstname").value + ".mydomain.com";
window.location.assign(url);
}
</script>
</head>
<body>
Go to URL:<br>
<input type="text" name="firstname" id="firstname" value="">.mydomain.com
<br>
<p>
<input type="button" value="go" onclick="Submit()">
</p>
</body>
</html>​​

HTML Form submit data

I have a form on a remote server I'm trying to submit data to, example below
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
</body>
</html>
I'm trying to auto submit the data like this
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<script type="text/javascript">
document.forms[0].submit();
</script>
</form>
</body>
</html>
It works fine if the first example didn't have a (name="send") name but when it does have a name nothing submits. My question is how would I go about sending the data with a input button that has a name.
Thank you
Note: The answer turned out to be type="hidden" instead of type="submit", in which the second does not allow DOM submission while also submitting that input's value in the GET/POST data. type="hidden" does, and it works here since the button does not need to be physically clicked.
Pick one:
<form name="formname" id="formid" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
<script type="text/javascript">
if (confirm('Ok for "formname", Cancel for "getElementById"')) {
console.log('document.formname.submit()');
document.formname.submit();
} else {
console.log('document.getElementById("formid").submit()');
document.getElementById('formid').submit();
}
</script>
http://jsfiddle.net/userdude/EAmwj/3
Your JavaScript code will get executed as soon as the page is loaded. That is why it gets submitted immediately.
You need to wrap the JS code in a function and let an event call it from the page.
You can use a regular button and set the function for the onclick event of a button.
<html>
<head>
<body>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="button" name="send" value="test2" onclick="doSubmit()" />
<script type="text/javascript">
function doSubmit() {
document.forms[0].submit();
}
</script>
</form>
</body>
</html>

html form submit button

I have a form and when the form is loaded through a browser, I want it to submit the data automatically.
The problem is I wrote a PHP script that will submit it all fine on a test form. My problem is the server I'm trying to submit the data to named the button "submit".
Here is the example form:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
The person that created the form on the other server named it "submit". Is there a workaround until they fix it?
Here is a example of the person's form
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="submit" class="submit" value="Send Data" />
</form>
</body>
</html>
You want to submit the form? Then simply use its submit() method:
document.forms[0].submit();
If the server expects submit to be POSTed, i.e. the button being clicked, you can simply trigger the click() event of the button. Since you cannot access it using its name, I'd use jQuery for it:
$('input[name="submit"]').click();
Instead of:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
Try this:
<html>
<head>
</head>
<form name="MyForm" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.MyForm.submit();
</script>
</body>
</html>
If I understand your question correctly, the input element has name="submit" and type="submit". They are different things.
So you can also create the same behavior easily.