disable save button after clicked

Archived from the Xataface Users forum.

kevinwen — Tue Feb 23, 2010 12:42 pm

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.

shannah — Tue Feb 23, 2010 2:33 pm

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.

kevinwen — Tue Feb 23, 2010 3:10 pm

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.

shannah — Tue Feb 23, 2010 3:28 pm

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>'; }

amrcode1 — Thu Feb 25, 2010 5:18 pm

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

shannah — Thu Feb 25, 2010 5:37 pm

Check for javascript errors in your browser to see why it isn’t working.

amrcode1 — Thu Feb 25, 2010 5:42 pm

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

shannah — Thu Feb 25, 2010 5:55 pm

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)

amrcode1 — Thu Feb 25, 2010 6:23 pm

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???

shannah — Thu Feb 25, 2010 7:03 pm

Until you look at an error log to find out what went wrong you will be spinning your wheels on this one.

amrcode1 — Thu Feb 25, 2010 7:10 pm

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,

shannah — Thu Feb 25, 2010 8:17 pm

OK.. Can you show your code (just the block that you inserted). I think I know what’s going on.

amrcode1 — Thu Feb 25, 2010 8:24 pm

function block__custom_javascripts(){
echo ‘’;
echo ‘’;
}

shannah — Thu Feb 25, 2010 8:32 pm

Can you show the javascript in these files also.

amrcode1 — Thu Feb 25, 2010 8:37 pm

[submit.js]

[]

[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]:
});

shannah — Thu Feb 25, 2010 8:17 pm

OK.. Can you show your code (just the block that you inserted). I think I know what’s going on.

amrcode1 — Thu Feb 25, 2010 8:24 pm

function block__custom_javascripts(){
echo ‘’;
echo ‘’;
}

shannah — Thu Feb 25, 2010 8:32 pm

Can you show the javascript in these files also.

amrcode1 — Thu Feb 25, 2010 8:37 pm

[submit.js]

[]

[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]:
});

kevinwen — Fri Feb 26, 2010 4:13 pm

Did you look at the source html code and see if the JQuery package has been involved?

shannah — Fri Feb 26, 2010 5:09 pm

.js files shouldn’t contain

amrcode1 — Sat Feb 27, 2010 10:48 am

initially did not use the labels, i’m add tags thinking in a solution but don’t work, I will be trying out more things, thank’s

shannah — Sat Feb 27, 2010 11:14 am

The other problem might be that you haven’t included jquery before using it. Make sure you do that. i.e.

Code: Select all: echo '<script type="text/javascript" src="'.DATAFACE_URL.'/js/jquery.packed.js"></script>

amrcode1 — Mon Mar 01, 2010 8:12 am

Hi, problem solved!

Function need register in registerPloneFunction(function)

code here:

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

This work fine. Steve thank’s for you help. I’m change the value of bottom for test if funciton work.