Why any html button cause postback in aspx page? - javascript

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>

Related

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")';" />

Trying to get a button to work as a submit button

I am trying to figure out how to make this HTML submit button work correctly. Below is the code for the submit button:
<form action ="itms-services://?action=download-manifest&url=https://icustomer.apsresource.com/ipad_apps/survey/user/APSSurvey.plist">
<button type="submit" name="Download" value="download" onclick="JavaScript:alert('You will be downloading the APS Resource iPAD PRODUCT SURVEY.')" style="width:255px; height:310px; -webkit-appearance: none; -webkit-border-radius:0px;">
<img src="apple.png" />
</button>
</form>
When the button is clicked, it is supposed to open up the URL in the "action" part in the form tag. However, all I get is the JS pop-up, but no URL is opened (looking at the console, a GET function is triggered, then instantly canceled). IS there something I need to add/remove in order for this to work?
Submit the form with the onclick event
onclick="alert('You will be downloading the APS Resource iPAD PRODUCT SURVEY.');this.form.submit();"
You don't need to put the work JavaScript in your event either.
BTW, you don't really need to have this.form.submit() at all. I took your original and removed JavaScript from the onlick and changed the action and your code works fine. I'm not sure what itms-services:// is but it's not a valid HTTP protocol like http:// or https://.
Here's a jsfiddle illustrating this.

When I use input type="button" a function works well but when I use button it doesn`t

I call the same function with those two types of button. With the first it works perfectly but with button it works well at the first but in less than one second it looks like refresh the page.
<input type="button" id="bProv" value="filtrar" onclick="filtroP()"/>
<button id="bProv" onclick="filtroP()">filtrar</button>
The type of a <button> element defaults to submit, so it will run the JS and then immediately submit the form.
Use <button type="button" ... if you don't want form submission.
That said, hard coding a button (which does nothing without JS) goes against the principles of unobtrusive JavaScript (which are part of best practise programming for the WWW).

Changes made to HTML output (ASP.Net) using JavaScript immediately undone

I have a page on which a list of properties is displayed (i.e houses). This list is made up using CSS. So I've built a second CSS class, which makes the properties/houses align properly in 2 columns. Until now I did this by pressing a button, posting back, and outputting different html (basicly the same, but with other Css class references).
Now I found this question on SO and I implemented a basic scenario. A div with the class "yellow" is written to the html page, and a button changes this class to "red". This happens, but the div immediately changes back to class "yellow".
I'm a very very beginner in JS but not a beginning programmer. This would be a great addition to my site, but I can't find a proper answer. I apologize if this question is redundant.
<script type="text/javascript">
function changeView() {
document.getElementById("box").className = " red";
}
Grtz, thanks in advance, Christophe,
By default a button element is of type 'submit' - which will cause your browser to post back to the server.
Try changing the type to button instead.
<input type="button" ....
More info on the difference here... Difference between <input type='button' /> and <input type='submit' />
If your button causes a postback (possibly a server control with an asp: tag), the javascript changes you made will be lost as by default an asp button submits a page to the server as a result of which your page reloads.
If all you need to change the class of a div make it a simple html button like
<input type="button" onclick="changeView()" value="Change" />

html5 form submission issue

I have a piece of javascript which is initialized on the click of a button, and takes information from a form input to perform geolocation etc based on the data.
The issue I am having is that I have to place the button outside of the form in the html, otherwise when it is clicked, no javascript is fired!
This of course means that my users cannot hit enter in the offending text box (as they lose their data!)
Is there a way I can stop this from happening and be able to include the button in the form?
The HTML is:
<form>
<input id="addyInput" placeholder="Don't forget postcode!" size="25">
</form>
<button id="start" onclick="initialize()">Find Me!</button>
I can also include some of the javascript if needs be! (although that works fine!) :)
Thanks!
use :
<button id="start" onclick="return initialize()">Find Me!</button>
and then make sure initialize() returns false.

Categories

Resources