Develop Reference

Button not executing window.location

Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?

Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".

You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />

Why any html button cause postback in aspx page?

I have created .aspx page on my SharePoint site and inserted within the page HTML button.
Example
<PublishingWebControls:editmodepanel PageDisplayMode="Display" runat="server" SuppressTag="True">
...
<button>Click Me!</button>
...
</PublishingWebControls:editmodepanel>
Every time I hit 'Click Me!' the post back occurs. This is not my desired behavior, but I have found a way how to not cause post backs. I added javascript code to onclick property <button onclick='return false;'>Click Me!</button>
My question is, why the post back occurs, even if the button does not contain type="submit" property?
I checked also master page, which contains <form runat="server"> and wraps all the content and there is also no action="page.aspx" property.

Check this link, http://www.w3schools.com/tags/tag_button.asp
There is a note on page, which says, that different browsers can use different default type for button, if you don't specify it by yourself. Seems like your browser uses "submit".

I know this is an old post. #Dmytro 's post leads in the right direction but is not the exact answer. To prevent the postback you need to make use of the type attribute of the button tag. i.e.
<button type="button">Click Me!</button>

Using iFrame's OnSubmit function for a Parent Window's Button's OnClick Event

Basically, I want to use this HTML Form (Which loads in an iframe on a parent page) to submit using a parent page's button that when clicked will submit using the iFrame's built-in OnSubmit function. The problem here is that I could just use the javascript code with document.getElementById('Cable_Extraction_Worksheet').contentWindow.uploaddata(); which would fire off the required function in the JS, but I need to use the form's onsubmit and action attributes because the form needs to redirect correctly and send session variables, only on submit, to be loaded on the NEXT form that is being called via the form's action. HELP? Any better way to do this since I am stuck using iFrames? Tried using php include, but the HTML and CSS is terribly misconstrued in the parent window.
Code is simplified for sample purposes.
IFRAME HTML
<form name="prepform" method="post" onsubmit="uploaddata();" action="http://gp21.idmyasset.com/mobile/prep_b/index.php">
HTML CODE HERE
</form>
PARENT HTML
<div data-role="content">
<iframe src="prep_new/index.html"
frameborder="" name="prep_new" id="prep_new" class="contentiframe"></iframe>
</div>
<li>
<a onclick="document.getElementById('prep_new').contentWindow.document.forms['prepform'].submit();" data-transition="flip" data-theme="" data-icon="check">
Continue
</a>
</li>

I found another way to implement this...

Can an onsubmit event insert an image into the page before the page submits?

Can an onsubmit event insert an image into the page before the page submits/transfers control to the next page?
I am using classic asp.

Of course. The function resolves before the form is submitted.
(Although… while an img element may be inserted into the page, it might not load before the browser has gone to the next one, and even if it does, the user might not have time to see it clearly)

Yes . You can insert the HTML code (through javascript):
<img src="imgsrc">
But it takes a little time for loading the image. The form send the user to another page in new window or in the same window? Why would you want to insert an image in the current window if the page will be replaced with the new one?

Yes you can do this. It would be easier (for me to write) if you used jquery:
html:
<form id="myForm" action="">
<input type="text" id="someId" />
<input type="submit" id="submit" value="submit" />
</form>
and then JavaScript would be:
$(document).ready(function() {
$("#myForm").submit(function() {
$(this).append('<img src="someImage.jpg" alt="" />');
});
});
http://jsfiddle.net/rYUbQ/
But like others have said it might not be loaded and displayed before the form submits so you might want to instead look in to preloading the image and then just setting it to visible before the page submits.

observe form submit response targetting an iframe

I have an app which runs in a new window. There are several forms to generate a PDF export. When I submit one of these forms, the window loses its focus and the original window pops up again when the download appears.
I created an iframe, so the forms can target the iframe and the current window doesn't lose its focus. It works great, but I have no idea how to observe the response inside the iframe if everything went right.
Here is how its working so far. I'm using prototypeJS.
<iframe id="pdf_frame" name="pdf_frame" style="display:none;"></iframe>
<form id="PDF_gen" name="PDF_gen" target="pdf_frame" action="pdf.pl">
<input type="hidden" name="size" value="">
<!-- more hidden inputs -->
</form>
<input type="button" id="pdf_submit" value="generate pdf">
JS:
$('pdf_submit').observe('click', function(){
//write stuff to hidden inputs
$('PDF_gen').submit();
});
If something goes wrong, the download dialogue does not appear. When using prototypes form.request() the browser does not know how to handle the response and does not bring up the download dialogue. How can I do it right?
Thanks in advance!

When something goes wrong in the iframe you can try to fire an event from the iframe to its parent window (assuming we're on the same domain; it won't work cross-domain):
parent.document.fire('something:went_wrong')
and have the parent document listen for that event:
document.observe('something:went_wrong', function() {...});