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" />
Related
Edit: Title makes more sense now.
I'm currently writing basic CRUD functionality using a popular web framework. In the edit section of my app, I have a 'Delete' button. When the button is clicked, I want a div containing text and two more buttons to appear, giving me the option to continue with the deletion. The delete functionality is handled by the framework, which is working just fine.
(I hate that inline CSS as much as you do, but bear with me, makes it easier for illustration purposes)
My HTML:
<style type='text/css'>
#overlay {
visibility: hidden; }
</style>
<form method='POST' action='', enctype='multipart/form-data'> {% csrf_token %}
{{form.as_p}}
<input type='submit' name='save' value='Save post'/>
<button onclick='toggleDeletion()'>Delete</button>
<div id='overlay'>
<p>Are you sure you want to delete this post? It‘ll be lost forever...</p>
<form method='POST' enctype='multipart/form-data'> {% csrf_token %}
<input type='submit' name='yes' value='Yes' />
<button onclick='toggleDeletion()'>No</button>
</form>
</div>
</form>
My JavaScript:
function toggleDeletion() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == 'hidden') ? 'hidden' : 'visible';
}
When I click the first 'Delete' button it works for about a half a second; the overlay div becomes visible. However it then vanishes, and doesn't come back. I'm relatively fresh to JavaScript, though not programming in general, and I am assuming there's some nuance of the language I'm completely missing out on. It doesn't appear to be looping through the function continuously, nor does it break. It just runs fleetingly. That or a stupid typo that's making me look like a fool.
You click the button
The JavaScript runs and modifies the DOM loaded into the browser
The form submits (because you clicked a submit button)
The browser loads a new page (which doesn't have the changes you made to the DOM with JS because they were only local)
If you don't want to submit the form when you click the button, don't use a submit button. Add type="button".
When your form submits, the page refreshes and you thus need to reapply the js/css changes on document load... or submit using AJAX and change the input type from submit to button / or return false on clicking the submit button.
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}
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>
My question may sound naive, but really struggling to do a very simple thing. Suppose I have to html page - send.html and receive.html.
In send.html page -
I have text field and a button in like following -
<body>
<form onsubmit="recieve.html">
<input type="text" id="mytextfield">
<input type="submit" id="submitbutton" value="Go">
</form>
</body>
Here I want to put something on the textfield and I want to see that value in the receive page some thing like - Hello 'value of textfield'. That's it.
Do I need to use JS cookie for that? If not, how can I do it in the most simple way?
Need help :(
The most simple way is PHP. Bottom line is you need something handling the data on the server side.
With javascript you can write a function to store the value in a cookie and read it on the next page. By the way, your page goes in the action attribute. onsubmit expects a javascript function, not a page.
i just can't get rid of such .... error
i'm using a free textbox control on my page that is hidden by setting css properties to "none"
i want to make this free textbox available for edit whenever a user clicks on another
button actually by setting style.. to "block" without postingback my page
the result is showing the textbox but in a way that it's not enabled
i need some event to post back the page to make it available for edit
i know the reason should be something with rendering and etc but how can i solve this
in a way i achieve my targets on page such as:no postbacks ,. ...
any hep would be appreciated
thank all
using jquery
$(document).ready(function() {
$("#buttontoclick").click(function()
{
$("#textboxtoshow").show();
});
html
<input id="buttontoclick" type="submit" Text="Click me" />
<input id="textboxtoshow" type="text" style="display: none" />