This is my page code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Marketing Tracking</title>
</head>
<body>
<form action="#" id="form" method="post">
<div id="namevalues">
<span id="span:1">
<input type="text" id="name:1" onchange="changed(this)" style="width:300px;"/>
<input id="value:1" type="number" min="0" value="0" /><br /></span>
</div>
<input type="button" id="add" value="Add 1" />
<br />
<textarea name="talk" style="width:500px;height:175px;"></textarea>
<br />
<input type="button" id="update" value="Update"/>
</form>
<script>
function get(a){return document.getElementById(a);}
up=get("update");
up.onclick = function(){
get("form").submit();
}
get("name:1").onchange = function(){changed(this)};
get("add").onclick = function(){add()};<% z=2 %>
function changed(ele){
id=ele.id;
val=ele.value;
id=id.split(":")[1];
get("value:"+id).name=get("name:"+id).value;
}
function add(){
document.getElementById("namevalues").innerHTML+='<span id="span:'+z+'"><input type="text" id="name:'+z+'" onchange="changed(this)" style="width:300px;"/><input id="value:'+z+'" type="number" min="0" value="0" /><br /></span>';
}
</script>
</body>
</html>
I am very confused as to why when I press the Add 1 button enter some text and then press the Add 1 button again the text that I just entered disappears!
If anyone could give some insight to this it would be greatly appreciated.
The reason your other values disappear is because when you do something.innerHTML += something it will rewrite the HTML for that zone (meaning what was there before is gone and will be replaced with fresh new HTML). What you probably want to do is something along this :
function add(){
var div = document.createElement("div");
div.innerHTML = '<span id="span [... the rest of the code ...]<br /></span>';
document.getElementById("namevalues").appendChild(div);
}
Using appendChild won't alter the other element that are already in the div namevalues.
Just a small thing but try using
<script type="text/javascript">
When I was using inner.document stuff I had all kinds of problems until I added that code.
Related
I have a script that builds a html box to input values to use in the script afterwards. Before I used input text. But the values inserted were often wrong, which caused annoyance by the users. And me.
So I want to use a button instead of text input. The button has to toggle between two or more values when clicked. Then when I submit the form, the values have to be passed to the script.
But the onclick doesn't seem to work. What am I missing?
The variable "vervanger" is put in place of "vervanger2" in the html box.
I get the button in my browser but nothing happens when I click on it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e){
var btn = document.getElementById(e);
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0)" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
You have got your button type wrong.
<input name="Submit" type="submit" value="OK" />
This will post your form.
Change it to "button" and you should be good to go..
I found a solution. Thanks to various other posts on Stackoverflow.
Now I'm able to toggle between values by pushing the button.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e,choices){
var btn = document.getElementById(e);
var chs=choices.toString().split("/");
var check="nee";
for (c=0;c<chs.length;c++){
if (chs[c]===btn.value){
check="ja";
var nr=c;
}
}
if (check=="ja"&&nr<chs.length-1){
btn.value=chs[nr+1];
}else{
btn.value=chs[0];
}
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0,'A/B/C')" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<input type="button" onclick="change(1,'A/B/C')" size="3" id="1" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
I have an form, like this
<form>
<input type="text" id="abc" name="abc" value="abc"><img src="right.png">
<input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
<input type="submit" id="submit" value="submit">
</form>
but I don't understand how to show this. When the input is not empty <img src="right.png"> and if it is empty then <img src="wrong.png">
Mark your input required and add some CSS, like this:
input:required:valid::after{
content: url(path/to/right.png);
}
input:required:invalid::after{
content: url(path/to/wrong.png);
}
<input type="text" required="required" minlength="1">
Fall back on #divy3993's if you have to support some horrible old browser
I would go with #dtanders but still a simple solution with JavaScript would not harm you.
function myFunction() {
var x = document.getElementById("abc");
var curVal = x.value;
var imageRW = document.getElementById('img_right_wrong');
if (curVal == "")
{
//wrong.png
imageRW.src = "http://findicons.com/files/icons/1671/simplicio/128/notification_error.png";
}
else
{
//right.png
imageRW.src = "https://d3n7l4wl5znnup.cloudfront.net/assets/images/icon-right.png";
}
}
<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons.com/files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>
Update:
Working Fiddle
Seems that you want to do dynamic form validation. So you can add event listener And JavaScript:
function checkInput() {
if ($("#abc").val().length == 0) {
// change image
}
}
<input id="abc" name="abc" onchange="checkInput()">
But using jQuery plugin is better:
link (EDIT: this link is dead, but it can be found on the Wayback Machine)
This can be done easily in angularjs using ng-show.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Chat Application</title>
<script src="./scripts/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body ng-app="chatApp">
<div>
<input type="text" name="FirstName" ng-model="text" ng-init='text=""'>
<br />
<img src="right.png" alt="right" ng-show="text.length >0">
<img src="wrong.png" alt="wrong" ng-show="text.length === 0">
<input type="submit" id="submit" value="submit">
</div>
<script src="./scripts/app.js"></script>
</body>
</html>
I'm trying to make a game in which you click a directional button and the screen reads how far you've moved and in what direction. I have the buttons set, and using onClick I've set them to read "moved 5 meters "direction", but the text doesn't appear when I run it. Here's a snippet of my code:
<FORM>
<INPUT type="button" value="North" name="n" onClick="document.write("moved 5 meters north");">
<INPUT type="button" value="East" name="e" onClick="document.write("moved 5 meters east");">
<INPUT type="button" value="South" name="s" onClick="document.write("moved 5 meters south");">
<INPUT type="button" value="West" name="w" onClick="document.write("moved 5 meters west");">
</FORM>
Try defining onclick event in script element outside of html ; substituting setting span element .innerHTML utilizing .value of event.target for document.write() as document.write() overwrites existing html
<FORM id="form" name="form">
<INPUT type="button" value="North" name="n" />
<INPUT type="button" value="East" name="e" />
<INPUT type="button" value="South" name="s" />
<INPUT type="button" value="West" name="w" />
</FORM>
<span></span>
<script>
document.forms["form"].onclick = function(e) {
this.nextElementSibling
.innerHTML = "moved 5 meters " + e.target.value
}
</script>
HTML might look like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'external.css';
</style>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<form name='whatever' action='#' method='post'>
<input type='button' value='North' name='n' id='n' />
<input type='button' value='East' name='e' id='e' />
<input type='button' value='South' name='s' id='s' />
<input type='button' value='West' name='w' id='w' />
</form>
<div id='output'></div>
</body>
</html>
JavaScript on external.js may look like:
//<![CDATA[
var pre = onload; // for previous onload as there can only be one at a time using this methodology
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(id){
return doc.getElementById(id);
}
var buttonInfo = {n:'North', e:'East', s:'South', w:'West'}, out = E('output');
for(var i in buttonInfo){
(function(i){ // scope off i with closure
E(i).onclick = function(){
out.innerHTML = 'moved 5 meters '+buttonInfo[i];
}
})(i);
}
doc.forms[0].onsubmit = function(){
// do stuff you need to here if submitting
// prevent enter key from submitting form
return false;
}
}
//]]>
Your mistake is using " inside the onclick. Use ' in this way:
onclick="document.write('moved 5 meters north')"
You can also escape the " using \
onclick="document.write(\"moved 5 meters north\")"
Use single quotes for the 'moved 5 meters north'. If you use double quotes, it reads the first double quote as closing the double quote in front of "document".
Should look like this:
<INPUT type="button" value="North" name="n" onClick="document.write('moved 5 meters north');">
What I want the program to do is make a form and have 2 radio buttons and 1 text.
Then I want it to collapse the text and radio value together into one and take me to that page:
If I input text with like "facebook" and the radiobutton value is .com I want it to take facebook + .com and send me to that page.
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<style type="text/css">
</style>
</head>
<body onunload="Bye()">
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
}
</script>
</body>
</html>
Change type="submit" to type="button".
Change this line:
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
to:
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
In this case you don't need to submit a form. You are just trying to redirect the url. You didn't specify where to submit the form so it is submitting to itself that is your problem.
Alternatively, return false from the onclick handler to prevent the form submit.
Try this code:
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="return go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
return false;
}
</script>
</body>
</html>
brso05's analysis seems to be spot on... But I can't really explain it. It seems that Chrome is delaying the side effects of the location.href.replace (which should be navigating away from the page) until after the form submit... I have a feeling you have hit a browser bug here. I can't imagine this is spec-compliant.
When I add text to a div in a chrome extension popup, the text appears for a fraction of a second and then immediately dissappears again.
This is a small example:
<html>
<head>
<script>
function show() {
var newName = document.showMe.textToShow.value;
var txt = document.createTextNode(newName);
document.getElementById("feedback").appendChild(txt);
}
</script>
</head>
<body>
<form name="showMe">
Name: <input type="text" name="textToShow" /><br />
<input type="submit" value="Show" OnClick="show()" />
</form>
<div id="feedback"></div>
</body>
</html>
What am I doing wrong?
Thanks,
Miel.
It works, but then the form gets submitted. You have to suppress sending the form like this
<input type="submit" value="Show" OnClick="show(); return false" />
or use a button:
<button type="button" onclick="show()">Show</button>