Page 1 of 2

disable save button after clicked

PostPosted: Tue Feb 23, 2010 12:42 pm
by kevinwen
Hi,

I want to use javascript to disable the the save button in the new/edit form after the button is clicked to prevent duplicates from happening. How do I add the onclick event to the save button. I know that this button is created in the QuickForm. Thanks.

Re: disable save button after clicked

PostPosted: Tue Feb 23, 2010 2:33 pm
by shannah
Use one of the blocks on the edit form to insert some javascript. JQuery would make it very easy to attach such a handler to the save button.

Re: disable save button after clicked

PostPosted: Tue Feb 23, 2010 3:10 pm
by kevinwen
I know there are some blocks available after the save button like block_after__widget() for me to insert the javascript. However, the save submit button itself looks like the following and doesn't have the onclick event defined:

Code: Select all
<input type="submit" value="Save" name="--session:save">


How do I bind an onclick event to this button after this form element is rendered? can you show me the example how to use it or how to use JQuery to get it done? I'm not familiar with JQuery. Thanks.

Re: disable save button after clicked

PostPosted: Tue Feb 23, 2010 3:28 pm
by shannah
Here's the javascript code. You could save this in a file called submithandler.js.

Code: Select all
jQuery(document).ready(function($){
    $("input[type='submit']").click(function(){
        $(this).attr("disabled","disabled");
    });
});


Then add this to any block on the page.

Code: Select all
function block__xxx(){
    echo '<script type="text/javascript" src="submithandler.js"></script>';
}

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 5:18 pm
by amrcode1
good idea, but don't work for me, i add custom js in Aplication Class, but when i click Save button this don't change to disabled
i have xataface 1.2.2

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 5:37 pm
by shannah
Check for javascript errors in your browser to see why it isn't working.

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 5:42 pm
by amrcode1
Ok, the system is on my work, but the new record form work fine, record was saved, i'm use FF 3 and i don't see error messages from js

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 5:55 pm
by shannah
Firefox 3 shows errors Under Tools > Error Console.
Safari is another really good one for debugging if you enable the develop menu. (http://www.macosxhints.com/article.php? ... 0063041629)

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 6:23 pm
by amrcode1
Hi, i try use this tip on html/static page, and work fine, i can see buttons disabled, but i don't know why don't work with xataface, possible plone_register js function???

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 7:03 pm
by shannah
Until you look at an error log to find out what went wrong you will be spinning your wheels on this one.

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 7:10 pm
by amrcode1
Hi, this error is from xataface system when button don't change, i'm follow you instruccion, add js.file, add custom_javascript in Aplication_class and when i load any page of this system i can see this error on my consolo in FF, curiously this "error" don't happen in html/statis form file

Error: $ is not defined
[Source File][Archivo de origen]: https://x.x.x.x/db/PD/submit.js
[Line][Línea]: 1,

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 8:17 pm
by shannah
OK.. Can you show your code (just the block that you inserted). I think I know what's going on.

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 8:24 pm
by amrcode1
function block__custom_javascripts(){
echo '<script src="javascripts.js" type="text/javascript" language="javascript"></script>';
echo '<script src="submit.js" type="text/javascript" language="javascript"></script>';
}

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 8:32 pm
by shannah
Can you show the javascript in these files also.

Re: disable save button after clicked

PostPosted: Thu Feb 25, 2010 8:37 pm
by amrcode1
[submit.js]
<script type="text/javascript">
jQuery(document).ready(function($){
$("input[type='submit']").click(function(){
$(this).attr("disabled","disabled");
});
});
</script>
[]

[javasvript.js]
function nextField(field,nextfield){
    if ( field.value.length == 1 ){
        document.getElementById(nextfield).focus();
    }
}
[]


PD: now i can see other message error of console:

Error: missing } in XML expression
[source file]Archivo de origen: https://x.x.x.x/db/PD/submit.js
[line 5, crow 3]Línea: 5, columna: 3
[Código fuente][source code]:
});