‘Processing’ Submit Button On HTML Forms

submit_button

My boyfriend was telling me about one of the smaller tasks he had to do at work. He was implementing the submit buttons for HTML forms so that they displayed the word processing when clicked. He created two buttons in the body, each with a different id value. The first one calls a function when clicked. The other has its display set to none:

<input type=”button” id=”btn1″ value=”Submit” onClick=”disableButton()” />

<input type=”button” id=”btn2″ disabled=”disabled” value=”Processing…” style=”display: none;” />

The Javascript function then hides the first button and displays the second one – with the text ‘processing’ – in its place:

 <script type=”text/javascript”>

function disableButton()

{

document.getElementById(‘btn1’).style.display = “none”;

document.getElementById(‘btn2’).style.display = “inline”;

}

</script>

It’s a really simple idea and easy to implement, but I thought it was pretty nifty and wanted to add it to my own forms. If something is going to take a while to load it’s always good to give the user additional feedback so that they know something is definitely happening in response to their input. Plus I enjoy adding these types of finishing touches to my work. I decided to create my own version using Jquery. As some of my forms have multiple submit buttons I add an attribute to the button that was clicked so that I know which one to change:

$(“form input[type=submit]”).click(function()
{
$(this).attr(“clicked”, true);
});

I then catch the submit event on the form and change the value of the clicked button to ‘processing…’:

$(‘form’).submit(function()
{
$(“input[type=submit][clicked=true]”).val(“Processing…”);
});

Doing it this way meant that I didn’t have to change the HTML on any of my already existing forms and could just include the file at the top.

Advertisements

Tags: , , , , , , ,

About wallcat

I have a strong passion for computing. In particular programming for which I am able to use a variety of languages including C++, Visual C#, Blitz Basic, Actionscript 2.0, Python and Lua. I also enjoy web-design and have some knowledge of HTML/CSS, PHP/SQL and Javascript. As well as programming I have a strong background in art and enjoy drawing in my spare time. When I’m not sat at my computer I like to keep fit by going to the gym or using my exercise ball.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: