I tried to retrvie and display html5 session storage in text box like this
<script>
// alert(sessionStorage.param1);
var rightbox=document.getElementById("from");
var two=sessionStorage.getItem(param1);
rightbox.innerHTML=two;
</script>
But its not working.Alert is working fine.
What I am doing wrong here?
Thanks
I don't really get you, but does this solve your problem?
Javascript:
<script>
// alert(sessionStorage.param1);
var two=sessionStorage.getItem(param1);
document.getElementById('from').value = two;
</script>
HTML:
<input type="text" id="from" name="from" value="" />
Related
I have this code that needs to be adapted to work with something similar to the code below the commented line. If I can make it without many changes would be perfect so that I don't need to change the CSS and so. Any help? Many thanks in advance.
<!-- The code to be adapted is this: -->
<form action="" id="search-form">
<fieldset>
<input type="text" class="text" /><input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<!-- The new code that I got from the web and that needs to be adapted to the old one
is the following: -->
<textarea id="Blah"></textarea><button onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("Blah").value;
location.replace("https://www.google.com/search?q=" + Blah + "");
}
</script>
I'm imagining you probably want something like
document.querySelector("#searchButton").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
const url = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
window.location.replace(url);
});
<fieldset>
<input type="text" class="search" id="searchBox">
<Button id="searchButton">Search</button>
</fieldset>
The id attribute on HTML elements allows you to access them via JavaScript. There's a wealth of tutorials online if you want to learn JavaScript deeply, but the basics of what this is doing is:
It finds the HTML element with the id of searchButton, and adds a click listener to it --- this gets triggered whenever that element is clicked.
In that listener, we find the value of the text input with the id of searchBox.
We compose our new URL. One thing I've added here is a call to encodeURIComponent to correctly handle the cases where they try searching for something which contains a character which isn't valid in a URL --- for example, the space character etc.
It was not working as I wanted, but a little trick made it work.
Here is my final code:
<form action="" id="search-form">
<fieldset>
<input type="text" class="search" id="searchBox">
<input type="submit" value="Search" class="submit" />
</fieldset>
</form>
<script>
let myvar;
document.querySelector(".submit").addEventListener("click", ()=>{
const value = document.querySelector("#searchBox").value;
myvar = `https://www.google.com/search?q=${encodeURIComponent(value)}`;
setTimeout(callurl, 1);
return false;
});
function callurl() {
location.assign(myvar);
return false;
}
</script>
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?
I am new to HTML. I need code that generates and redirects to a URL depending on the value of form input elements. For example, with two fields name and roll, once populated it should generate http://example.com/name/roll and send the user to the URL.
Is this possible? I was able to create the URL http://webaddress/data+data+data but not with /. Please guys; if you may help, it would be very much appreciated. Thanks in advance.
var name = "Jone"
var roll = 100;
var url = "http://webaddgess/"+name+"/"+roll;
On front-end, this will be best done with JavaScript, simply fetch the values in the form and insert it in the URL as you desire.
Sample HTML
<form onsubmit="myFunction();return false">
<input name="name" id="name">
<input name="roll" id="roll">
</form>
Sample JavaScript
<script>
function myFunction(){
//Get values
var name = document.getElementById('name').value;
var roll = document.getElementById('roll').value;
//Redirect
window.location = "http://webaddress/"+name+"/"+roll;
}
</script>
Try this One
var roll=document.getElementById("rollhtml");
var x = document.getElementById("namehtml");
var url="Your URL here"+roll+x;
<input type="text" id="rollhtml" placeholder="Roll" value="">
<input type="text" id="namehtml" placeholder="Name">
I want to have a box in HTML such as this one:
Particular thing, I need to do this using only HTML (no PHP or particular langage requiring server, or particular installation).
The reason for this is that it is meant to be used for HTML pages that will be opened from a USB key, not a website, and it has to be usable by any non-expert person. So no web-server configuration or installation required, such as what would be required for PHP, if I am right.
Think about not using a Form, but just using a Javascript function.
I'm not sure if this probably is not possible due to security reasons, but it could be a solution...
function redirect() {
var input = document.getElementById("stuff");
window.location = input.value;
}
<span>NOM:</span>
<input type="text" id="stuff"></input>
<br>
<input type="button" onclick="redirect()" value="Submit"></input>
I managed to do what I needed thanks to Anders Anderson's answer. Here is the code for those interested in doing similar thing. First, for the Javascript
function redirect() {
var answergiven = document.getElementById("answergiven");
var realanswer = document.getElementById("realanswer");
var nextpage = document.getElementById("nextpage");
if(answergiven.value.toLowerCase() == realanswer.value.toLowerCase()){
window.location = nextpage.value;
}
else{
alert('Wrong answer, please try again.');
}
return false; // prevent further bubbling of event
}
And for the HTML part, there are two hidden variables that determine the real answer, and the next page to go to, and the text field for the answer
<form name="myform" onSubmit="return redirect()">
<span>Réponse:</span>
<input type="text" id="answergiven" />
<input name="tosubmit" type="submit" value="Submit" />
<input type="hidden" id="realanswer" value="theanswer" />
<input type="hidden" id="nextpage" value="thenextpage.html" />
</form>
I have not confirmed if this is just an iOS error, but I'm facing this problem in my app.
This:
<input type="number" step="0.01" disabled="disabled" name="cash_total" value="4.00" id="cash_total" placeholder="0.00" />
Shows: 4
Even with the Step in there. What's going on?!
UPDATE: This is a Safari bug I've noticed, even on desktop: http://jsfiddle.net/S9msN/
This might work for you. When the page loads, it uses some js to do the math and then adjust the value: http://jsfiddle.net/LSnvj/
<script type="text/javascript">
<!--
jQuery(document).ready(
function(){
jQuery(window).load(function(){
var value = 4;
var step = 0.01;
var total = value+step;
jQuery("#cash_total").attr("value",total);
})
});
-->
</script>
<input type="number" step="0.01" disabled="disabled" name="cash_total" value="0.00" id="cash_total" placeholder="0.00" />