Why won't this code just take the input value and console.log() it?
The updated code reads.
!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="index.html" method="get">
<h1>thank you</h1>
<a href="index.html">
<button>Home</button>
</a>
<br>
<br>
<a href="https://github.com/shanegibney/link-two-pages">
<button>Back to repositoryy</button>
</a>
<br>
<br>
<form>
<input type="number" id="Idkey" value="5" min="0" max="10">
<button type="submit">submit</button>
</form>
</body>{
<script>
let Idkey = document.getElementById(Idkey).value;
console.log(Idkey);
</script>
</html>
The submit button is not rendering at all.
The error I get is,
settings.html:26 Uncaught TypeError: Cannot read properties of null (reading 'value')
The script will only read the initial value in the input field (it will always log 5).
You need to tell the script to read the input value each time the submit button is clicked by adding the oninput attribute, like this:
<form>
<input type="number" value="5" id="Idkey" oninput="myfunction()" />
</form>
<script>
function myfunction() {
let val = document.getElementById("Idkey").value;
console.log(val);
}
</script>
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>
Something is keeping me from setting a path variable with Thymeleaf and HTML in an HTML Form.
I want to simply enter 33 into a form and get localhost:8080/blog/33 for a url, but I can only get a query string or malformed brackets and etc.
some example attempts and results:
th:action="#{/blog/{id}(id = ${id})}"
localhost:8080/blog/?id=33
th:action="#{/blog/+ ${id}}"
localhost:8080/blog/+%20$%7Bid%7D?id=33
what I want is:
localhost:8080/blog/33
the whole code for this form is below:
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Form Submission</title>
<style>
button{
margin-top:20px;
width: 250px;
}
</style>
</head>
<body>
<h2>Delete Entry</h2>
<form action="#" th:action="#{/blog/{id}(id = ${id})}" th:object="${blog}" method="get" >
<fieldset>
<p>Delete ID: <input type="text" th:field="*{id}" required /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</fieldset>
</form>
<button onclick="window.location.href = '/'">Menu</button>
</body>
</html>
This syntax is correct: #{/blog/{id}(id = ${id})}.
The reason you are getting localhost:8080/blog/?id=33 is probably because ${id} is empty when the form is created, and when you click the submit button, it is adding ?id=33 to the url (because the method is get and you have an input with the same name="id": <input type="text" th:field="*{id}" required />.
There is no html/thymeleaf way (without javascript) to get a form field into the path part of a URL (if that is what you're expecting). You'll have to use a javascript library if you want that to happen.
I have an input field that will input a whole number like 1,2,3,4,5,etc.. No decimals and no negative numbers.
I have this but I can still enter in decimal and negative number?
<input name="Quantity" type="number" step="1" min="0" class="form-control">
Am I supposed to do some validation on the JS side or something to see if the element attribute conditions are met?
P.S. one thing to note. I'm not calling any submit on the form. I'm clicking a button, serializing the form and passing it to a post call via JS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript">
function testValidate() {
var form = $('form')[0];
if (!form.checkValidity || !form.checkValidity()) {
console.log('Invalid');
} else {
console.log('Validated');
};
}
</script>
</head>
<body>
<form id="form1">
<input id="input1" name="Quantity" type="number" step="1" min="0" class="form-control">
<div>
<button>Submit Button</button>
</div>
</form>
<button id="btnTest" onclick="testValidate()">TestButton</button>
</body>
</html>
You can certainly doing validation check using JS, if you don't want using form submit for validation.
But without seeing your code, I think that you should be able to have your submit button trigger the validation automatically for you, doing your form serializing after its been validated.
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>
The following code shows how I am trying to first write info to .txt file and then have the custom search performed. If I remark out the action in Button2, Button1 works fine and writes text to .txt. When I open Button2 to do search, it appears that the .php in Button1 is ignored and Button2 presents custom search, however, there is write to .txt file. I have tried everything I can find, including all in one .php file, but the second action seems to take control and won't allow the first action to run.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>If NOT found to right ENTER Your</title>
<script language="Javascript">
<!--
function OnButton1()
{
// Action used to write to .txt file only
document.Form1.action = "open-close.php";
}
function OnButton2()
{
// Action performs custom google search
document.Form1.action = "http://www.google.com";
}
-->
</script>
</head>
<body>
<h3><span style="color: #00ff00;">If NOT found to right ENTER Your Topic Here! </span></h3>
<style type="text/css">
#import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color:#999999;color:#000000">
<div class="cse-branding-form">
<form id="cse-search-box" target="_blank" name="Form1">
<div>
<input type="hidden" name="cx" value="" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Search" Onclick="OnButton1(); OnButton2();"/>
</div>
</form>
</div>
<div class="cse-branding-logo">
<img src="http://www.google.com/images/poweredby_transparent/poweredby_999999.gif" alt="Google" />
</div>
<div class="cse-branding-text">
Your Custom Search
</div>
</div>
</body>
</html>
Call OnButton1() on button click and from within the function onButton1() call onButton2():
<input type="submit" name="sa" value="Search" Onclick="OnButton1();"/>
function OnButton1()
{
// Action used to write to .txt file only
document.Form1.action = "open-close.php";
OnButton2();
}