Heres my Code:
<form>
<input class="wrapped-input" type="text" id="blah blah" style="text-align:center" placeholder="(Enter your exact search term here)" name="exact_term" tabindex="5" required/>
</form>
I've ommitted a few things to make this form functional, however I would like to place double quotes AROUND any value the user enters into the html input field.
What's the best way to do this?
I went under the assumption that you wanted to wrap what the user submits in quotes rather than manipulating the textbox itself.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
var userInput = $('#blah-blah').val()
alert('User input: "' + userInput + '"');
});
});
</script>
</head>
<body>
<form>
<input class="wrapped-input" type="text" id="blah-blah" style="text-align:center" placeholder="(Enter your exact search term here)" name="exact_term" tabindex="5" required/>
<input type="submit" id="btnSubmit" value="Submit" />
</form>
</body>
</html>
You could use jQuery to manipulate the string before the form is submitted or you could just use string interpolation to add parentheses on the server side.
Here is a pure JavaScript version of what you want to do, because, well, screw jQuery.
var thing = document.getElementById('thing');
thing.addEventListener('keyup', function() {
if (!/^\"/.test(thing.value)) {
thing.value = '"' + this.value;
}
});
thing.addEventListener('blur', function() {
if (!/\"$/.test(thing.value)) {
thing.value = this.value + '"';
}
});
Related
I am trying to make a website where the user enters something which then should be saved on a txt file, i tried it with js code which i found but its not working. I dont really know how to do it, this is the code
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form onsubmit="WriteToFile(this)">
Username:<br>
<input type="text" name="name" id="name"><br>
Password:<br>
<input type="text" name="pwd" id ="pwd"><br>
<input type="submit" name="submit">
</form>
<script>
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("data.txt", True);
var name = document.getElementById('name');
var pwd = document.getElementById('pwd');
s.writeline("Username :" + name);
s.writeline("Password :" + pwd);
s.writeline("-----------------------------");
s.Close();
}
</script>
</body>
</html>
You can't do that with pure HTML and JavaScript as JavaScript doesn't have access to server files.
You have to do some server side programming to achieve the same.
For example in PHP, you may use fwrite(). For more details, refer to the official documentation of server side language you use.
I am trying to make a spreadsheet sidebar that allows a user to input data to create records, as well as edit them. So far I understand how to create the sidebar and display it. I've got a working form that can submit values.
What I am struggling with is how to pre-populate the forms. Form instance some records are associated with others, and I'd like to have a hidden field to store and eventually submit the associated id. Eventually users should also be able to edit records and I'd like to use the same form and just populate the fields and reuse the same submission flow.
I've tried a few different things found on here and other places, but nothing seems to work.
Here is the HTML for the sidebar template
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
</style>
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
$('#accountId').val(<? data.accountId ?>);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(alertSuccess).createContact(formObject);
}
function alertSuccess(message) {
var div = document.getElementById('alert');
div.innerHTML = "<p>" + message + "</p>";
google.script.host.close();
}
</script>
</head>
<body>
<p>Enter Contact Info</p>
<form id="contact" onsubmit="handleFormSubmit(this)">
Account Id: <br>
<input type="number" name="accountId" value="0" id="accountId" /><br>
Name:<br>
<input type="text" name="name"/><br>
Phone Number:<br>
<input type="text" name="phone"/><br>
Email:<br>
<input type="email" name="email"/><br>
Contact Type:<br>
<input type="radio" name="type" value="emergency" checked> Emergency<br>
<input type="radio" name="type" value="guardian" checked> Guardian<br>
<input type="radio" name="type" value="other" checked> Other<br>
<input type="submit" value="Submit" />
</form>
<div id="alert"></div>
</body>
</html>
And the accompanying .gs file:
var AlternativeContact = ObjectModel("AlternativeContacts");
function newContact() {
var htmlOutput = HtmlService.createTemplateFromFile("new_contact");
var id = ACCOUNT_MANAGER.getRange("M4").getValue();
htmlOutput.data = {accountId: id};
UI.showSidebar(htmlOutput.evaluate());
}
function createContact(contactJSON) {
var newContact = new AlternativeContact(contactJSON);
newContact.save();
return "Success!";
}
The first line that uses ObjectModel is creating and ORM around the data sheet.
Thanks for the help!
Couple changes and it seems to be working in a basic way.
First, in the scriptlet, i needed to us the printing tag. so use in stead of . This was causing the value to not be used in the rendered template.
Second, I changed my jQuery to:
$(document).ready(function () {
$("input#accountId").val(<?= data.accountId ?>);
});
If anyone is able to answer, I'd be curious why using the $(document).ready is needed. Doesn't everything in the get run? is it an order of operation thing?
How do I save what I write on the
<input type='text'>
tag, will I need a database or it can be done so that it saves to the file?
<!DOCTYPE HTML>
<html>
<body>
<input type='text'>
</body>
</html>
<input> is used to collect information from the user. <input = "text"> is not a valid statement. If you were trying to set a value to the text field then you use 'value' <input type='text' value='some text'>. And remember, <input> should always be inside <form> tag so you can collect the information. And you should use PHP to handle this kind of request. Read about it in here (w3schools).
The answer to your question is :
The input is given is in .html file which is static (can not store any data).
You can save the input value in two ways:
1) You can change the file to .php and save in database.
2) You can export the input to a file and save as a text.
Check the below code to export the text input to txt format.
<style>
form * {
display: block;
margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' +
encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" placeholder="Enter your file name" required>
<textarea rows=3 cols=50 name="text"> Type your text here and click SAVE. </textarea>
<input type="submit" value="SAVE">
</form>
It's giving me an error on line 51
<!DOCTYPE html>
<html>
<head>
<title>Validation</title>
</head>
<body>
<div style="width:500px;height:500px;padding-right:auto;padding-left:auto;">
<form action="#" method="get" onsubmit="return FormValidation();">
<label>Current Password</label>
<input type="text" name="pass" id="pass" maxlength="16" required><br>
<label name="notif"></label>
<input type="submit" name="submit">
</form>
<script type="text/javascript">
function FormValidation(){
var passw = "against";
var opass = document.getElementById("pass").value;
if(opass != passw) {
document.getElementById("notif").innerHTML = "Your password doesn't match.";
alert('pass now match');
return false;
}
else{
document.getElementById("notif").innerHTML = opass + " " + npass + " " + rpass;
}
}
</script>
</div>
</body>
</html>
Any suggestion why is there an error? I just want to happen is to define the password if correct and notify it on the label.
document.getElementById("notif").innerHTML = "Your password doesn't match.";
This form for my site forgot password. We with my group is developing a website with a user account and its for a lending cooperative.
This doesn't find anything:
document.getElementById("notif")
Because there is no element with that id. Thus, this returns nothing and you can't access a property on an undefined object.
Probably the simplest immediate approach would be to give your target element the id value you're looking for. I assume you mean this element:
<label name="notif" id="notif"></label>
In fact, that label probably doesn't need the name attribute at all. But that's up to you I guess.
Edit: Or, if you want to avoid modifying the markup, you can use document.querySelector instead:
document.querySelector('input[name="notif"]').innerHTML
Your need to change this line:
<label name="notif"></label>
to this:
<label id="notif"></label>
If the name attribute must be retained, you can try jQuery:
$("label[name='notif']").html('Your message');
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>