I have the below code which allows me to dynamically add additional text fields when the button is pressed. I'm essentially mocking up multiple destinations along a route.
<!doctype html>
<head>
<title>Test</title>
</head>
<body>
<div id="form">
<form id="address">
<p>Route:</p>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">
<button type="button" id="add" onclick="addField('address')">Add field</button>
</form>
</div>
<script type="text/javascript">
function addField(id) {
// OnClick function for adding additonal fields for
// transit routes with multiple destinations.
var field = `<br/><br/>
<input type="text" name="Address" placeholder="Origin">
<input type="text" name="Address" placeholder="Destination">`
document.getElementById(id).innerHTML += field
}
</script>
</body>
</html>
I can fetch an array of all the elements within:
var elements = document.getElementById("address").elements;
But what I want to do is link every Destination field to the next Origin field, so that the Destination in the last field ends up as the Origin for the next row. I imagine it's something like below, but it's not clicking in my head.
elements[elements.indexOf(this)-1].value;
Related
I currently have a table that consists of 4 columns that contain forms. Two text boxes and two calendar widgets. I am trying to add a fifth column(reset), which will give the user the chance to reset any information on the row. I was able to reset, but, there's a bug. If I change a few columns and click the reset on my desired row it will reset the whole table. How can I reset one row, without it affecting the rest?
I found this example on w3schools.com, where it will reset both forms as well.
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>
</body>
</html>
So, I tried fiddling with the script so only the first name form would reset and not the last name. This isn't working, how can I accomplish this? Thanks
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form>
First name: <input type="text" name="fname" value="Marie" id="myForm"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").value= ' ';
}
</script>
</body>
</html>
The reset method only works on the entire form. If you want to clear just one input you need to clear his value.
See the code below:
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form>
First name: <input type="text" name="fname" id="myForm"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").value='';
}
</script>
</body>
</html>
I have a mobile app with a submit button. When I enter the parameters and hit submit, I want the page to reload with the new value displayed. For some reason, when I click submit, it navigates to index.html. I can't get it to stop. I've tried event.preventDefault(); and action = "saved_locations.html" but that took me to a weird pure html version of the page outside of the app.
<div class="pages">
<div data-page="saved_locations" id="saved" class="page navbar-through no-toolbar" align="center">
<h2><br><u>Enter A Location<br><br></u>
<form id="enter_location">
Latitude: <input type="text" id="Latitude" value=""><br>
Longitude: <input type="text" id="Longitude" value=""><br>
Location: <input type="text" id="Location" value=""><br>
<input type="submit" value="Submit">
</form>
<h2><u>Saved Locations</u></h2>
</div>
</div>
This is how a proper HTML form looks like. I'll do a basic example here:
function showData() {
let x = document.getElementsByTagName("input")[0].value;
let y = document.getElementsByTagName("input")[1].value;
let z = document.getElementsByTagName("input")[2].value;
alert(`For the location ${z} the latitude is ${x} and the longitude is ${y}`);
}
form {
font-weight: bold;
letter-spacing: 3px;
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<form action="https://stackoverflow.com/questions/52657111/html-submit-button-is-navigating-away-from-the-page">
Latitude:<br>
<input type="text" name="Latitude" value=""><br> <hr/>
Longitude:<br>
<input type="text" name="Longitude" value=""><br><hr/>
Location:<br>
<input type="text" name="Location" value=""><br><hr/>
<input type="submit" value="Submit" onclick="showData()">
</form>
<p id="demo"></p>
</body>
</html>
Like others in the comments suggested, you're missing an action. Here is a brief explanation of why is needed and what happens if it omitted:
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/server_side.php". This page contains a server-side script that handles the form data.
<form action="/server_side.php">
If the action attribute is omitted, the action is set to the current page. - [In your case the root index page].
Turns out that the issue is that I'm using Framework7 for my app. window.location.reload(); doesn't work, but this does:
setTimeout(mainView.router.refreshPage(),5);
I am trying to create something that when the script is run it reads the parameters that have been set in there.
For example loading a custom sidebar where the user can enter details or parameters to the run the script with. These parameters will remain until they are changed but shouldn't be required every time you run a script that uses these parameters.
A sort of like settings menu.
I have seen something similar in some addons that have been made can someone please point in right direction on how to go abouts doing this.
I already have the scripts running succesfully just need a UI where the parameters can be entered and set. I would like to avoid reading it from a sheet in the spreadsheet if possible.
Edit:
I see that there is a getscriptproperty available that is available to all users:
so far I have got update (2):
HTML:
function showside(){
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('body'))
}
function setProperty(objectForm){
PropertiesService.getScriptProperties().setProperties(
{a1: objectForm.a1 ,
a2: objectForm.a2,
p1: objectForm.p1,
p2: objectForm.p3})
return 'Updated'
}
<!DOCTYPE html>
<html>
<head>
<script>
function readProperty(){
var settings = PropertiesService.getScriptProperties(), keys = settings.getKeys()
Logger.log('running')
for (var i =0;i<keys.length;i++){
document.getElementbyID(keys[i].toUpperCase()).value = settings.getProperty(keys[i])
}
}
function handleFormSubmit(objectForm){
google.script.run.setProperty(update).setProperty(objectForm)
}
function update(update){
var div = document.getElementById('output');
div.innerHTML = 'Updated!';
}
</script>
<base target="_top">
</head>
<body onload="readProperty()">
<form id="myForm" onsubmit="handleFormSubmit(this)">
a1<input type="url" id="a1" value="" />
a2<input type="url" id="a2" value="" />
a3<input type="url" id="a3" value="" />
P1<input type="text" id="P1" value="" />
P2<input type="text" id="P2" value="" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
A rough approach; Improvise from here;
Read comments inside the loadScript();
document.getElementById("formWithData").onsubmit = loadScript();
function loadScript() {
// get data from submitted form
// this way script will re-run with data based on what u give in the form
}
<form id="formWithData">
<input type="text" placeholder ="enter condition 1">
<input type="text" placeholder ="enter condition 2">
<input type="text" placeholder ="enter condition 3">
</form>
so I have a project now, as an addition to my company's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:
1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD
here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:
<script type="text/javascript">
function calc(){
var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
return fossil_day;
}
</script>
<form name="calc" id="calc" >
<p>
Km/dia
<input type="text" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="text" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
</p>
<input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />
<script type="text/javascript">
var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>
</form>
Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it
there are many errors inside your code
document.getElementById() needs the element id in brackets ''
you can't create a element with the same name,id as a function calc else it will throw an error as it's an object and not a function.
your executing the function onload... but you want it to be executed when the button is clicked & onchange.
you don't need to add value if empty and name if you use getElementById
return false in the function on buttons inside form else it could send the form and so refresh the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>
Useing jQuery (and html5 type="number" form fields):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<p>
Km/dia
<input type="number" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="number" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="number" name="consumo" id="consumo" value="" />
</p>
<div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function calculate(){
var km = $('#km').val();
var euro = $('#euro').val();
var consumo = $('#consumo').val();
var cem_km = consumo*euro;
var fossil_day = (cem_km*km)/100;
$('#fossil-day').html(fossil_day);
}
$(function() {
/*when #consumo input loses focus, as per original question*/
$('#consumo').blur(function(){
calculate();
});
});
</script>
</body>
</html>
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});