HTML javascript form submitted when image input button - javascript

I have a form that contains this single input field, which is nothing more than a button to Print the current web page:
<div align="center">
<input type="image" src="../Images/print.jpg" value="Print" onclick="printpage();" /></div>
</div>
After the printing, the page re-submits itself (to itself). Why does it do this and can I stop it?
If I just change the type to "input", this code does not re-submit itself after printing:
<div align="center">
<input type="input" src="../Images/print.jpg" value="Print" onclick="printpage();" /></div>
</div>
Unfortunately, our style conventions require me to use that button image rather than the standard input button.

Change the onclick handler to onclick="printpage(); return false;" - that will prevent the button from doing anything besides running the JavaScript.

add 'return false;' to your onClick event:
onclick="printpage();return false;"

Have you tried adding a
return false;
at the end of your code
therefor
<input type="input" src="../Images/print.jpg" value="Print" onclick="printpage();return false;" /></div>

Related

Trigger onserverclick without physically clicking button

I want to abstract the file-browse dialog from the user and only show one button for upload, like so:
<input type="button" id="uploadFile" value="Upload" />
<div class="hidden">
<form id="uploadFileForm" method="post" enctype="multipart/form-data">
<input type="file" id="browseForFiles" />
<input type="button" id="submitFile" value="Submit File" runat="server"
onclick="return true;"
onserverclick="SubmitFile_Click" />
</form>
</div>
$("#uploadFile").click(function () {
// trigger hidden file dialog
$("#browseForFiles").click(); // works
});
$("#browseForFiles").change(function () {
$("#submitFile").click(); // doesn't work; doesn't call onserverclick
});
Physically clicking on the submitFile button works fine and calls the server-side method, but since I want the actual server-side button to be hidden, the user can't physically click it. How do you fake a physical click in jQuery/Javascript?
EDIT :
I also tried:
<input type="submit" id="submitFile" value="Submit File" runat="server"
onclick="return true;"
onserverclick="SubmitFile_Click" />
$("#uploadFileForm").submit(); // doesn't work either
Have you tried this?
$('#uploadFileForm').submit()
$("input[id$='submitFile']").click(); works.
I didn't realize that ASP.NET was replacing the ID of the element to something like ctl00_PlaceHolderMain_submitFile even if regular HTML controls were used!
$("input[id$='submitFile']")[0].click(); works as well.

form is not submiting with onclick event

I am trying to submit form on image click event but I am getting Uncaught TypeError: Object #<HTMLInputElement> has no method 'submit' this error after click event fire.
My Code:
<form name="searchRef" id="searchRef" method="get" action="#">
<input type="text" name="s" id="ref" value="" class="ref_search" />
<input type="submit" name="submit" id="ref_submit" value="GO" class="ref_submit" />
</span> <span> <img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onClick="document.getElementById('searchRef').submit();"> </span>
</form>
Any ideas or suggestions? Thanks.
You have to remove/change attribute name of submit button, e.g:
name="btnSubmit"
Otherwise, submit() method of FORM element is overwritten.
Change your submit button name from submit to ref_submit
as shown below
<input type="submit" name="ref_submit" id="ref_submit" value="GO" class="ref_submit" />
this is just an idea, but try using
document.forms["searchRef"].submit();
instead of
document.getElementById('searchRef').submit();
please change the form tag action attribute , repalce # with the target page name say action.php, and also add onsubmit="javascript:return false" in form tag
There is probably already an html element with id=searchRef in your page, so the getElementById() get the wrong one.
A better solution would be to replace your submit button by an input type=image:
<input type="image" name="ref_submit" id="ref_submit" value="GO" class="ref_submit"
src="path/to/your/image" />
Notice this will result in server side by a POST request with $_POST['submit_x'] and $_POST['submit_y'] (which corresponds to the (x,y) mouse coordinates from the top left of the image)
This error occurs because your name attribute as submit, try to change the name attribute or try below code.
<img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onclick='window.searchRef.submit();' />

Onclick javascript stops form submit in Chrome

I have the following form:
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Bestätigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Bestätigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all.
In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
Would appreciate any ideas why it breaks in Chrome.
Thanks!
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).
First, when you want to allow / block a click you should use onclick="return someFunction()" and not onclick="someFunction()" - then the action will follow through only if that function returns true.
Now to make this work, you would have to submit the form from your function:
$(this).parents('form').submit()
You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.
And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();

Img acting as button in HTML form submitting when it shouldn't

I have a simple image inside an HTML form that acts as a button. When a normal button is clicked I act upon that using the onClick attribute, but with my images when you click on them the onClick does work, but the image also submits the form, when it actually shouldn't.
My code:
<input type="image" id="button" value="Assign" src="/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Assign')" />
Any help with this would be greatly appreciated!
Specifying the type attribute of an input as image makes it a submit button. Add return false to the onclick.
<input type="image" id="button" value="Assign" src="/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Assign');return false" />
You're wrong. It should according to w3c docs.
To prevent that you could user preventDefault method of the event:
$('#button').click(function(e){
//do something
e.preventDefault();
});
It's because you are using <input type='image' />
If you just want a normal image use the <img /> tag

Writing text on "div" using JavaScript

I'm having some trouble whenever I want to add some text to my div tag, here's my code:
<html>
<body>
<div id="comments">
</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>
<script type="text/javascript" >
function writeComment()
{
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML=comment;
}
</script>
</body>
</html>
It does what it has to do correctly, but then it switches back to the text box only and the comment I just wrote disappears. Any idea of what's going on here?
Thank you so much for your time.
It is because you are submitting the form.
Quick fix:
<input type="submit" value="Ready!" onClick="writeComment()" />
to
<input type="button" value="Ready!" onClick="writeComment()" />
In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:
function writeComment(e) {
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML = comment;
e.preventDefault();
return false;
}
What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.
Try swapping the type='submit' to 'button' on the button.
When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:
<input type="submit" value="Ready!" onclick="writeComment(); return false;" />
Or, if you don't want the button to ever submit the form change type="submit" to type="button".
PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.
This is because you use not just a regular button but a submit button which by default submits the form to the server. You can see that your comment is submitted via URL as you didn't specify the method(GET and POST and GET is default).
Simply write:
onclick="writeComment();return false;"
Returning FALSE prevents from default behaviour - submitting the form.
Its making another request to the server, which is causing the page to be rendered again.
Just return false from writeComment.
You'll have to prevent your form from submitting:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
change this
<input type="submit" value="Ready!" onClick="writeComment()" />
to this:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
try <input type="button" value="Ready!" onClick="writeComment()" />
you should switch
<input type="submit" value="Ready!" onClick="writeComment()" />
for
<input type="button" value="Ready!" onClick="writeComment()" />
Or another option is to convert your submit into a button and take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.

Categories