We Keep Coding

Button onclick event does not redirect to another page although it calls the functions

The following code does not redirect to the given webpage
<form>
<button onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
</form>

It is so because when you create a button within the form tags, it is created as a submit button by default. So, instead of redirecting the webpage, it submits the data and reloads the current webpage.
The following code will do the required job because now, the type of the button is button and not submit.
<button type="button" onclick='window.location.replace("../magnet/index.php")'>Replace document</button>

Even better, you can place your redirect code into a JavaScript function. Then you can call that function from within your HTML code. Like this
<script type="text/javascript">
<!--
function redirectTo(sUrl) {
window.location = sUrl
}
//-->
</script>
<button onclick="redirectTo('../magnet/index.php')">Get HTML!</button>
Hope this will work for you. Cheers

The answer was to add type="button" like #shivamag00 explained.
But be careful with replace(), it's not possible to use "back" to navigate back to the original document since you are replacing the history state.
An alternative is to use the assign() function, (documentation here)
Suppose you have a base url as
www.website.come
and want to go to
www.website.come/new-page
it's simple
<button type="button" onclick='window.location.assign("new-page")'>Go to new page</button>
It's worked for me, hope it's useful for someone else.

Defining a default button when pushing enter key

I have a Grails app which contains a .gsp page with a number of textFields, several submitToRemote buttons, and a couple actionSubmit buttons on it. When filling out the textFields, I want to be able to hit enter after I'm done, and have it do the same as clicking a specific submitToRemote button. Currently it is acting as if I clicked a specific actionSubmit button that I never intentionally specified.
I found this: How to trigger HTML button when you press Enter in textbox? . It seems like what I want, so I adapted it to my page, but it doesn't appear to be doing anything.
I'll forgo posting the entire .gsp but add what I feel is appropriate for the question.
Here is the button that is being activated currently:
<br>
<g:hiddenField name="type" value="head"/>
<g:actionSubmit value="Get Reports" action="showReports"/>
<br>
Here is the button that I want to be activated:
<g:submitToRemote value="find" url="[action: 'findCustomer']"
update="results" />
So what I did was add an id to both the target submitToRemote button, and 1 textField, then added the <g:javascript> tag wrapping around the scrip from the above linked page. Which looks like this:
<g:textField name="lastName" id="inputTextBox"/>
...
<g:submitToRemote value="find" id="findCustomer" url="[action: 'findCustomer']"
update="results" />
...
<g:javascript>
$(document).ready(function(){
$('#inputTextBox').keypress(function(e){
if(e.keyCode==13)
$('#findCustomer').click();
});
});
</g:javascript>
Also, I am using the jQuery library as such:
<g:javascript library="jquery" />
I'm not sure if my approach here is flawed, as I do need it to work on any of the 10 textFields on the page. I went through the grails documentation and couldn't find anything that really matched this...

I found the solution was quite close to what I had.
First I had to add an id to my submitToRemote button:
<g:submitToRemote value="find" url="[action: 'findCustomer']" update="results" id="submitForm"/>
Then in my main.gsp I added the proper script:
$(document).bind("keypress", function (e) {
if (e.keyCode == 13) {
$("#submitForm").click();
return false;
}
});
The really important thing here is the return false; because without it, it will click the button, and then submit the form which is not what I needed.

Return to the previous page with inputs

Really unsure about the title question. Feel free to suggest. :)
Hi guys! I created a very simple code, that would represent my web.
Here is my home page:
<html>
<script type="text/javascript">
function getPage(linkPage,variables,divName){
$.get(linkPage + "?" + variables,function(data){$(divName).html(data);});
}
function show(){
//functionName("path","data","idName");
getPage("AjaxPages/hi.php","","#container");
}
</script>
<body>
<div id="container">
First Name<input type="text" />
<input type="button" value="next" onClick="show();"/>
</div>
</body>
</html>
Basically, it ask for information, Name for example. When the button NEXT is click it will call a javascript function that will call a certain page or the NEXT PAGE that will load on the div with the Id Container.
NEXT PAGE
On the next page, it will then ask another question, like Last Name for example. But then, I want to go back to the previous page to make same changes.
HERE is the code:
<script type="text/javascript">
function show(){
ajaxgetdata("index.php","","#container1");
}
</script>
<div id="container">
Last Name<input type="text" />
what to make changes on the previous page?<input type="button" value="back" onClick="show();"/>
</div>
When button back is clicked, it will just call the previous page, but will not include the text that you input on the textbox.
I know that it happens because it just call the page..
Is there a way? that when back button is clicked, it will reload the previous page, with all the contents/inputs.
:) :( :'( :/ :|

Don't load any additional pages. Do everything with AJAX.
If you don't want, some server-side script may help :D

If you can use HTML5 in your site, you can take a look at the History API which can handle navigation and fires a "popstate" event, to which you can pass data.
There's a good example here:
http://diveintohtml5.info/history.html
You could do something like this:
window.addEventListener("popstate", function(e) {
if(!e.state || !e.state.firstName) {
return;
}
document.getElementById('firstName').value = e.state.firstName;
});
That even will trigger everytime you go back or forward, and you could just organize some function or array with the information you need.
Hope it helps.

Firefox HTTP Form Action doesn't fire

In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...

Simple JavaScript problem: onClick confirm not preventing default action

I'm making a simple remove link with an onClick event that brings up a confirm dialog. I want to confirm that the user wants to delete an entry. However, it seems that when Cancel is clicked in the dialog, the default action (i.e. the href link) is still taking place, so the entry still gets deleted. Not sure what I'm doing wrong here... Any input would be much appreciated.
EDIT: Actually, the way the code is now, the page doesn't even make the function call... so, no dialog comes up at all. I did have the onClick code as:
onClick="confirm('Delete entry?')"
which did bring up a dialog, but was still going to the link on Cancel.
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%# taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<script type="text/javascript">
function delete() {
return confirm('Delete entry?')
}
</script>
...
<tr>
<c:if test="${userIDRO}">
<td>
<a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}"/>" />
<img src="images/edit.GIF" ALT="Edit this skill." border="1"/></a>
</td>
<td>
<a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}&remove=1"/>" onClick="return delete()"/>
<img src="images/remove.GIF" ALT="Remove this skill." border="1"/></a>
</td>
</c:if>
</tr>

There's a typo in your code (the tag a is closed too early).
You can either use:
<img ...>
note the return (confirm): the value returned by scripts in intrinsic evens decides whether the default browser action is run or not; in case you need to run a big piece of code you can of course call another function:
<script type="text/javascript">
function confirm_delete() {
return confirm('are you sure?');
}
</script>
...
<img ...>
(note that delete is a keyword)
For completeness: modern browsers also support DOM events, allowing you to register more than one handler for the same event on each object, access the details of the event, stop the propagation and much more; see DOM Events.

Well, I used to have the same problem and the problem got solved by adding the word "return" before confirm:
onclick="return confirm('Delete entry?')"
I wish this could be heplful for you..
Good Luck!

I use this, works like a charm. No need to have any functions, just inline with your link(s)
onclick="javascript:return confirm('Are you sure you want to delete this comment?')"

I had issue alike (click on button, but after cancel clicked it still removes my object), so made this in such way, hope it helps someone in the future:
$('.deleteObject').click(function () {
var url = this.href;
var confirmText = "Are you sure you want to delete this object?";
if(confirm(confirmText)) {
$.ajax({
type:"POST",
url:url,
success:function () {
// Here goes something...
},
});
}
return false;
});

Using a simple link for an action such as removing a record looks dangerous to me : what if a crawler is trying to index your pages ?
It will ignore any javascript and follow every link, probably not a good thing.
You'd better use a form with method="POST".
And then you will have an event "OnSubmit" to do exactly what you want...

First of all, delete is a reserved word in javascript, I'm surprised this even executes for you (When I test it in Firefox, I get a syntax error)
Secondly, your HTML looks weird - is there a reason you're closing the opening anchor tags with /> instead of just > ?

<img src="images/delete.png" onclick="return confirm_delete('Are you sure?')">
<script type="text/javascript">
function confirm_delete(question) {
if(confirm(question)){
alert("Action to delete");
}else{
return false;
}
}
</script>

If you want to use small inline commands in the onclick tag you could go with something like this.
<button id="" class="delete" onclick="javascript:if(confirm('Are you sure you want to delete this entry?')){jQuery(this).parent().remove(); return false;}" type="button">
Delete
</button>

try this:
OnClientClick='return (confirm("Are you sure you want to delete this comment?"));'

I've had issue with IE7 and returning false before.
Check my answer here to another problem: Javascript not running on IE