This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 9 years ago.
My JavaScript in .php (static website) file doesn't work. I use there 3 other scripts and they do work, but not this one.
The situation is simple
The JavaScript is:
var myFile = document.getElementById('myFile');
myFile.addEventListener('change', function() {
alert(this.files[0].size);
});
and the HTML code in the PHP file is (stripped):
<form onsubmit="return anotherfunction();" action="sendForm.php" enctype="multipart/form-data" method="post">
<table>
<tr>
<td>Attach an image:</td>
<td> <input type="file" name="priloha[]" accept="image/*" /></td>
</tr>
</table>
</form>
And the JavaScript does nothing, it acts like it doesn't exist. I tried to use the JS in the header, below the header, in the body, in the TD of the input... I also tried using it in external .js file, nothing, doesn't work at all. I tried changing "change" to "click", didn't work neither. I tried to do this all day and I can't figure out what's wrong.
So I tried to do much simpler code to check what's wrong and it seems like change or onchange - the second line of the JS doesn't work.
I also tried to specify HTML5 doctype, doesn't do a thing.
My extra .html file to try even simpler code looks like this and of course doesn't work...
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Input field for click popup:</td>
<td>
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('click', function() {
alert("Hello");
});
</script>
<input type="text" id="input" />
</td>
</tr>
<table>
</body>
</html>
Help me please, I don't really know what's this...
I forgot to mention, I tried different browsers - Opera 12.15, latest Firefox and Chrome, didn't work in any case. But it works in fiddle...
Put the script right at the end of the body, right before the </body> end tag.
Scripts are loaded synchronously where they are placed, so any script put in before the element in question will not be aware of the element's existence.
Also, what Igor said.
You don't have a DOM element with id "myFile" in html that you included.
Related
I am a cybersecurity student trying to understand some basic HTML injections. I have been working on this code for a few days and can't understand what I am doing wrong. The code that I have currently does allow for injection, for example if I put <h1>test</h1> into the textbox, it will display test as a header. But if I try <script>alert(1)</script> it won't actually run the script. I have tried setting the value of the text box to "" or with the thought that I could close out that line by inputting the following into the textbox: "><script>alert(1)</script>
I've also tried to cancel out the remainder of the code by adding a comment to the end like this: <script>alert(1)</script><!--
I've tried a number of combinations of each with no luck. Now I actually need to be able to inject a script since I'm playing around with CSP and how that affects injection of scripts into the webpage. I currently DO NOT have a csp specified that would restrict the JavaScript from running. Some other things I've tried include using different browsers, changing browser security, and ensuring that JavaScript is enabled in the browser. Any help would be greatly appreciated!!
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>
That's because <script>s run at page load, and, when the label's content change, the scripts have ran already.
However, if you inject <script> tags to a different page (through the backend (XSS means Cross-Site Scripting)), it does work.
Alternatively, to make it work in a scenario, where the content injected after page load (like your case), you can use JS events (like onclick) to run your code:
<div onclick="alert(1)">Click me!</div>
Or, to execute it without user interaction, you could use an <iframe>'s onload event:
<iframe onload="alert(1)" style="display:none"></iframe>
to execute javascript from your form, you can try:
<iframe src=javascript:alert(1)>
or
<img src=x onerror=alert(1)>
Also worth noting:
script elements inserted using innerHTML do not execute when they
are inserted.
To manually execute JavaScript, you may do the following
without editing your HTML file, add this to the Input field on your Browser.
<iframe onload="alert(1)" style="display:none"></iframe>
More information on why this works here
More on how you can perform actions like this here: developer.mozilla.org
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>
{include file="head.tpl" title="Combate"}
{include file="navBar.tpl" dir=$dir}
<table id="CombatLister">
</table>
Nombre: <input type="text" id="nombrePJ">
AC <input type="number" id="ACPJ">
Iniciativa <input type="number" id="Init">
<button id="añadirParty" onclick="addPJButt()">Añadir</button>
<script>
function addPJButt(){
var name=document.getElementById("nombrePJ").value;
var ac=document.getElementById("ACPJ").value;
var iniciativa=parseInt(document.getElementById("Init").value);
addPJ(name,ac,iniciativa);
}
function addPJ(nombre,ac,init){
var table=document.getElementById("CombatLister");
var row=table.insertRow(0);
var cellNombre=row.insertCell(0);
var cellInit=row.insertCell(1);
var cellAc=row.insertCell(2);
cellNombre.innerHTML=nombre;
cellInit.innerHtml=init;
cellAc.innerHtml=ac;
}
</script>
<script>
{$x=0}
{foreach $party as $pj}
addPJ({$pj.nombre},{$pj.ac},{$pj.init})
{/foreach}
</script>
I have a smarty template that using an array from another page, adds it to the "CombatLister" table. however, for some reason, the addPJ() Script does not run. Im just learning the ropes of Javascript, so maybe im skipping something, but so far, i've got no answers on why it does not work.
I tried to check if the addPJ() script was wrong, using the addPJButt(), but the script is working: When i put data on the input types up there, they add the name correctly.
I dont think its a problem of Smarty. checking the source code of the page its similar, writting this where i call $pj:
<script>
addPJ(Galahad,14,5);
</script>
PS: As an extra problem, but not so important, on the insertCell methods of addPJ only the first cell is added.
addPJ(Galahad,14,5); is looking for an undefined variable Galahad.
you need to quote it so it gets printed as javascript string
Try
addPJ('{$pj.nombre}',{$pj.ac},{$pj.init})
Note: I haven't worked with smarty in years and assume the quotes will be literals
I know this is basic stuff, but after hours of research on google, this site and others I simply cannot come up with an explanation of why this code wouldnt work. And it doesnt. Can someone please spot the mistake? many thanks in advance:
The JavaScript bit:
<script language="text/JavaScript">
function myFunction() {
var date1;
date1=getElementByID("date1").value;
document.getElementByID("calculate").innerHTML=date1;
}
</script>
The HTML bit (that definitely works and its a rather large file with loads of forms, tables)
<html>
<head></head>
<body>
<div id="wrap">
<h2>JavaScript</h2>
<form>
<table>
<tr>
<th><input type=text id="date1" value="09:00" size=15></td></th></tr></table></form>
<table>
<tr>
<th bgcolor="#eeaaaa" align=center><em></em> <input type=button id=pay id="calculate" size=15 value="Click"></th></tr></table>
<table>
<tr>
<th><p id="calculate" size=15> </p></td></th></tr></table>
</div>
</body>
</html>
I tried different things already, changing the syntax, clearing the clutter out, but nothing seems to work.
I appreciate any constructive comments/criticism. Thanks
You have two ids id=pay id="calculate" for your second input ..id needs to be unique
<script language="text/javascript">
function myFunction() {
var date1;
date1=document.getElementById("date1").value;
document.getElementById("calculate").innerHTML=date1;
}
</script>
and most importantly ..you are not calling myFunction
#calculate (the element with id="calculate" ) is an input element. You don't set its value using innerHTML but value (like you did when reading the value in #date1.)
You may want to use an online HTML validator or at least a more powerful HTML editor to help you out with the code.
I wrote the following code:
<form name=f>
<input type=button value="Button1" onclick=b1click()>
<input type=button value="Buttone2" onclick=b2click()>
<script language=javascript>
function b1click()
{
f.action="Login.jsp";
f.submit();
}
function b2click()
{
f.action="Logout.jsp";
f.submit();
}
</script>
</form>
This works code properly in Internet Explorer but the action does not work in Mozilla Firefox 3.6.2. How to solve this problem? Please any one help me.
I know this will sound snide, but the truth of the matter is: it's not 1995 anymore.
That code would have worked great a decade ago, but standards and specifications have changed significantly since then.
Lets start from the top:
<form name=f>
All html attribute values should be enclosed in quotes. For consistency sake, use double quotes: <form name="f"> is much better.
<input type="button" value="Button1" onclick="b1click()">
Avoid inline-script events. If the functionality ever changes, or you want to remove a function, you'll have to go through every page and adjust the function. A better way is to give the button an ID, and add the onclick event via scripts:
HTML:
<input type="button" value="Button1" id="button1">
JS:
document.getElementById('button1').onclick = b1click;
Now the script's turn:
<script language=javascript>
You should use the type attribute with a valid MIME type. Additionally, whenever possible, move your scripts to an external script file. When that's not possible, make sure to either XML encode your script, or encase it in CDATA tags:
<script type="text/javascript" src="path/to/script.js"></script>
OR
<script type="text/javascript">
/* <![CDATA[ */
... some code ...
/* ]]> */
</script>
Finally the real issue with your script.
The f property you're referencing is a member of the document, and not the window. I believe IE will put the reference on both, but it's just not safe to rely on either behavior.
Give the form an ID: <form id="f">, and get the element from the b[12]click functions
function b1click()
{
var f = document.getElementById('f');
f.action = 'Login.jsp';
f.submit();
}
First off, change that name="foo" to id="foo". Names are mostly used within the form itself.
Now, try to reference your form using document.formID, not just formID. formID is a variable, which is undefined, but document.formID is the actual form element:
function b1click()
{
document.f.action="Login.jsp";
document.f.submit();
}
function b2click()
{
document.f.action="Logout.jsp";
document.f.submit();
}
Give form an id and refer to it using:
var form = document.getElementById('formId');
You should quote the input attributes, or any attributes for that matter. And your script does not belong AFTER the form, e.g. in body, but rather in the HEAD element.
This works in IE, Firefox and Chrome.
<html>
<head>
<script language="javascript">
function b1click()
{
f.action="Login.jsp"; // better is document.f., but f. appears to work as well
f.submit();
}
function b2click()
{
f.action="Logout.jsp";
f.submit();
}
</script>
</head>
<body>
<form name="f">
<input type="button" value="Button1" onclick="b1click()">
<input type="button" value="Buttone2" onclick="b2click()">
</form>
</body>
</html>
There are a couple ways to reference your form.
If you define your form as <form name="Login" id="LoginFrom"></form>,
Method 1
If your form is the only one in the page, you can use:
document.forms[0].action = 'Login.jsp';
Method 2
If your form is not the only one form in the page, you can use the form name to reference the form, such as
document.Login.action = 'Login.asp';
Method 3
The form can also be referenced with DOM function getElementByID.
document.getElementByID('LoginForm').action = 'Login.asp'
hey Guys,
I am trying to write dynamic html bean using java script
but I keep geting the "function is not found" JS error when I press the button ..
here is a sample code
<html>
<html:form action="loginAction.do" >
<head>
<script type="text/javascript">
function test(){
document.getElementById('dd').innerHTML =
"<html:text property='pid'/>";
}
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<input type="button" value="addprod" onclick="test()"/>
</td>
</tr>
<tr>
<td align="center">
<div id="dd"></div>
</td>
</tr>
</table>
</html:form>
</body>
</html>
I don't know about the
<html:form action="loginAction.do" >
where it should be located
I tried to locate it within the <body>
but I got a big exception due to writing <html:text property='pid'/> in JavaScript outside the <html:form>
...
need your help,
Regards,
I think struts is trying to parse the <html:text /> as a tag in your script, rather that just a javascript string. Try moving the <html:form action="loginAction.do" > into the body AND the <script> within the <html:form> similar to this fiddle http://www.jsfiddle.net/pL4Aq/1/
However, it works in the fiddle because it is just straight HTML... I don't think what you are trying to do will work. <html:text > is a custom tag that gets processed on the server, does a bunch of stuff, and then generates HTML for you. You will never actually see <html:text> if you view the source from your browser, even though it is in your jsp.
You might want to try changing the <html:text > to a straight <input type="text"> tag (in which case, you could just move the <html:form> into the body and leave the script where it is).
I am completely agreed with what Mike is saying.
Writing <html:text> inside javascript is useless since javascript is executing on client side while struts is required to translate this tag to html tag.
Better to write <input type="text"> inside javascript and keeps its name as "prop" if you want struts to fill the value of that text inside the form bean property "prop". Keep the <html:form in body tag. This will work for you.
It should work in a <body> tag.