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>
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 am having trouble outputing text to a div in Javascript. When I call the function on button click it displays the text for a fraction of second and then disappears. Why is it so? The code is given below;
Code:
function val(){
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
HTML:
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="submit" onclick="val()">Sign Up</button>
</form>
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" id="asd">Sign Up</button>
</form>
$('#asd').click(function () {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
});
FIDDLE
I made a few changes. I changed the button type from submit to button also i added an id for the button. check it
You have a submit button in a form, its default action is to submit the form that is why the result is disappearing(the page is getting refreshed).
Since you really don't want to submit the form(here you are just doing some dynamic changes to the page), one easy solution is to change the type of the button to button
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
Another solution is to prevent the default action of the submit button click by returning false
Try this:
Your code works as expected but as you have taken button type as submit, i submits the form.
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
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.
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.