writing html bean within JavaScript - javascript

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.

Related

Creating HTML with intentional HTML Injection

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>

Script is not running when added dynamically

{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

Very simple javascript doesn't work at all [duplicate]

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.

JavaScript simple echo/print query

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.

jQuery remove() issue with IE

I'm having an issue with jQuery's remove() method in IE. It's removing the element, but not entirely: it's leaving the last 2 closing tags.
I'm using ASP.Net Web Forms. In the page, we're using a 3rd party widget, which is a Javascript include. Part of the 3rd party widget is a search box and button inside of a form. (Everything in the div class="getquote" container below comes from the 3rd party widget).
Here is the page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="TestFooBar.aspx.cs" Inherits="MyProject.TestFooBar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="top">Some Stuff</div>
<div class="getquote">
<div class="box">
<form style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px;
padding-top: 0px" action="http://foo.com/?q=bar"
method="post" target="_self">
<input class="ticker" onclick="this.select()" value="Enter foo" maxlength="15"
type="text" name="fooInput" jquery123456789="42" />
<input class="go" value="Get Foo" type="submit" name="Go" />
</form>
</div>
</div>
<div id="bottom">Some More Stuff</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(function() {
alert($("div").length)
$('div.getquote').remove();
alert($("div").length)
});
</script>
</div>
</form>
</body>
</html>
ASP.Net developers will immediately recognize a huge issue: you cannot have a form inside an ASP.Net web form, because web forms uses a single outer form element wrapped around the entire page.
So my solution is to use jQuery to remove the form and its functionality like so:
$(function() { $('div.getquote').remove(); });
Unfortunately, remove() doesn't work correctly in IE. It leaves the following markup behind:
</form></DIV>
Can anyone explain why this is occuring and what a possible solution may be?
ANALYSIS UPDATE
I still don't have a definitive solution, but believe the problem may be the improperly formed html. when you view the source through IE developer toolbar, here is the result.
<FORM id=form1 method=post name=form1 action=TestFooBar.aspx>
<DIV><INPUT id=__VIEWSTATE value=/wEPDwULLTE2MTY2ODcyMjlkZJK6qpmH4eDoZyoX9RueM4keR6Hd type=hidden name=__VIEWSTATE> </DIV>
<DIV>
<DIV id=top>Some Stuff</DIV></FORM>
<DIV id=bottom>Some More Stuff</DIV>
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript>
$(function() {
alert($("div").length)
$('div.getquote').remove();
alert($("div").length)
});
</SCRIPT>
</DIV></FORM>
So, while jQuery successfully removed most of the <div>, it left behind the closing </form> artifact.
As far as I can see with the given HTML the remove() method is working fine... It is removing the div with class getquote and all its children.
The form and divs left in the page are outside of the said element so it will not be removed by the given command $('div.getquote').remove();.
I think you may have to rethink about the contents of your HTML since there is a form element inside another form element, I think it is not a properly formatted html.
I've come to the conclusion that what I'm trying to do is not possible in the browser layer. The problem with nesting a <form></form> element. IE will ignore the <form>, but when it gets to the </form>, it will close off the outer form, which throws of parsing.
I've then got several options:
1) Never, ever use ASP.Net Web Forms again. Instead go with ASP.NET MVC. OK, this is my dream, but not realistic for legacy apps.
2) Prefer XML feeds over JS includes when using web forms. Generally, this is probably better anyway, but managers love being told by a 3rd party that their widget can be dropped into a page in 5 minutes with only 1 line of code.
3) Don't call the 3rd party JS include in the browser, but instead, call it from a custom server method. Then, use Regex to strip the offending markup and pass what you need to the browser. Ugly hack that should only be done if 2) is not available.

Categories