When designing desktop apps, websites, and mobile applications, more than once I have tried using an application like mockingbird or Pencil Project. On one hand, mockingbird, is a web application that can be accessed from any browser and allows you to design multiple pages with different elements. On the other hand, Pencil Project, initially born as a Firefox extension, now has a multiplatform desktop application that allows you to mockup easily.
The drawback I see on these two applications is that for some reason, I always end up making simple mockups with a simple pen and paper. This way I can organize my ideas faster than using these applications. I guess the main reason for this is that I’m not a designer, so to me it is the same doing a shitty design in paper, than a shitty design with an application. Moreover, usually using a computer app for this task I end up spending more time to do the same…
Anyway, the other day I discovered Wireframe.cc, and the truth is that I was quite impressed by the UI. It is super-easy and fast to use. You just drag the mouse while clicking and voila, you have an item of the size of your selection. You click on the type of item you want and you are done with the item. Even if you want to change attributes, you just have to double click on it, and select the attributes you want to change.
Actually, it is the first time I feel that I do not waste my time doing mockups with an application of this kind. From what I’ve seen, this application is starting, and it still lacks of some functionalities and needs some polishment, but I suppose that those will be added in the future. Even I think this lack of complexity and lack of tons of box types is what makes you go faster.
I think choosing the right tool for a job is a matter of personal preferences and personal needs, but I would recommend trying wireframe.cc and taking a look at the other apps I pointed out at the beginning of the post.
Feel free to share any other tool you find useful in the comments 😉
Español
23/07/2009 at 8:33 pm Permalink
Saludos,
Muy buen tip!
Seria bueno mejorarlo para que solo funcion para forms o elementos DOM que acepten reset.
Suerte, hasta luego.
01/04/2010 at 7:38 am Permalink
A better reset function would be:
jquery.fn.reset = function(fn) {return fn ? this.bind("reset", fn) : this.trigger("reset");
};
This would allow you to attach a reset function using:
$("#FormID").reset(function(){ /* do something */ })In the same way as you would attach a submit function:
$("#FormID").submit(function(){ /* do something */ })in addition to being able to trigger a reset by calling:
$("#FormID").reset()06/09/2011 at 8:13 pm Permalink
Thanks Pau, it works 😉
15/10/2011 at 5:44 am Permalink
$(‘#myform’).get(0).reset();
08/05/2012 at 10:14 am Permalink
Simpler method:
HTML:
jQuery:
$('#myForm')[0].reset();Or, if you just need a JS version:
15/05/2012 at 10:42 pm Permalink
@Jake I really like the simplicity of your method 😉
25/06/2012 at 11:14 am Permalink
using jquery to reset the form by id
$(‘#myForm’).get(0).reset();
10/10/2012 at 3:00 am Permalink
Using the native JS reset function doesnt work in FireFox or mozilla type browsers though it works in IE hence i guess a manual function to reset each field would be appropriate. Thanx for the info though 🙂
10/01/2013 at 11:27 pm Permalink
Hi,
I am trying to get the id of the element of each element in the form. But the below is not getting each element id. Can I know why ??
$(‘#sample_form’).each (function(){
this.reset();
});
jQuery.fn.reset = function () {
$(this).each (function() {
this.reset();
alert(this.id);
});
}
Thank You,
Uma Mahesh
27/01/2013 at 7:13 pm Permalink
Wow. The .each() method is kinda overkill if you’re just targeting one element.
I’ve wrote a small blog post about the topic myself including examples of the most common pitfalls when trying to reset a jQuery form and the shortest code possible to reset a form. It can be found here:
http://forwebonly.com/how-to-reset-an-html-form-with-jquery/
26/02/2013 at 6:45 pm Permalink
@Uma:this = form object,not object in form
18/03/2013 at 5:43 pm Permalink
I have two forms on my site. The first form contains a single drop down with two options. The 2nd form contains two drop down fields. Any time the first form changes I want the second form to reset. I know this sounds strange but its for a hack. So I need a change function and clear from function. Lets say that a user selects option 1 from the first form then selects an option in each of the fields in form 2, the user then decides to select option 2 from the first form. The second form needs to reset.
15/06/2015 at 3:24 am Permalink
can any one help me in setting the reset button and coding for that in jquery and when i click the reset button all the history of product should be clear? thanks in advance