By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,302 Members | 1,788 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,302 IT Pros & Developers. It's quick & easy.

Mootools, ajax and checkboxes

P: n/a
Hi,

I just made my very first ajax form submitting. This works perfectly
(myAjax01 is a variable external to this function).

****************************
Code >>
****************************
$("formRecherche").addEvent("submit", function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();

/**
* This empties the log and shows the spinning indicator
*/
$("formRecherche").className = "ajax_loading_01";
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
myAjax01 = this.send({
onComplete: function() {
formRechercheMaj (myAjax01);
}
});
});
****************************
<< Code
****************************

but i'd like to remove the submit button (visually), and to make the
checkboxes "active" : they should make the same ajax call as if the form
is submitted, each time a checkbox is checked or unchecked, and this
doesn't work (i'm probably not using the event propagation the right
way, but i don't get it).

****************************
Code >>
****************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");
});
}
});

****************************
<< Code
****************************

Could someone used tu mootools and ajax help me, please ?
Dec 10 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Dec 10, 6:04 pm, Jean Ceugniet <jean.ceugn...@gmail.comwrote:
Hi,

I just made my very first ajax form submitting. This works perfectly
(myAjax01 is a variable external to this function).

****************************
Code >>
****************************
$("formRecherche").addEvent("submit", function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();
I love how these Prototype-like libraries force you to create a new
object to accomplish the simplest tasks.
>
/**
* This empties the log and shows the spinning indicator
*/
$("formRecherche").className = "ajax_loading_01";
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
myAjax01 = this.send({
onComplete: function() {
formRechercheMaj (myAjax01);
}
});});

****************************
<< Code
****************************

but i'd like to remove the submit button (visually), and to make the
checkboxes "active" : they should make the same ajax call as if the form
is submitted, each time a checkbox is checked or unchecked, and this
doesn't work (i'm probably not using the event propagation the right
way, but i don't get it).

****************************
Code >>
****************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");
Unless I miss my guess about MooTools fireEvent method, that won't
submit the form. What you need to do is name your submit listener
function. Then you can call it from here.
});
}

});

****************************
<< Code
****************************

Could someone used tu mootools and ajax help me, please ?
I know virtually nothing about MooTools (sp?) other than the code was
inspired by Prototype and augments host objects. In other words, it
should be avoided.
Dec 10 '07 #2

P: n/a

Could you explain the "name your submit listener" method in deeper, please ?

TIA

David Mark a écrit :
On Dec 10, 6:04 pm, Jean Ceugniet <jean.ceugn...@gmail.comwrote:
>Hi,

I just made my very first ajax form submitting. This works perfectly
(myAjax01 is a variable external to this function).

****************************
Code >>
****************************
$("formRecherche").addEvent("submit", function(e) {
/**
* Prevent the submit event
*/
new Event(e).stop();

I love how these Prototype-like libraries force you to create a new
object to accomplish the simplest tasks.
> /**
* This empties the log and shows the spinning indicator
*/
$("formRecherche").className = "ajax_loading_01";
/**
* send takes care of encoding and returns the Ajax instance.
* onComplete removes the spinner from the log.
*/
myAjax01 = this.send({
onComplete: function() {
formRechercheMaj (myAjax01);
}
});});

****************************
<< Code
****************************

but i'd like to remove the submit button (visually), and to make the
checkboxes "active" : they should make the same ajax call as if the form
is submitted, each time a checkbox is checked or unchecked, and this
doesn't work (i'm probably not using the event propagation the right
way, but i don't get it).

****************************
Code >>
****************************
$$("#formRecherche input").each (function (champ)
{
if (champ.type == "checkbox")
{
champ.addEvent ("click", function ()
{
$("formRecherche").fireEvent ("submit");

Unless I miss my guess about MooTools fireEvent method, that won't
submit the form. What you need to do is name your submit listener
function. Then you can call it from here.
> });
}

});

****************************
<< Code
****************************

Could someone used tu mootools and ajax help me, please ?

I know virtually nothing about MooTools (sp?) other than the code was
inspired by Prototype and augments host objects. In other words, it
should be avoided.
Dec 11 '07 #3

P: n/a
On Dec 11, 5:18 am, Jean Ceugniet <jean.ceugn...@gmail.comwrote:
Could you explain the "name your submit listener" method in deeper, please ?
Give it a name so you can call it directly in your click listeners.
Looking at your code again, I am unsure as to why the MooTools
fireEvent method is not working for this as it doesn't need to
actually submit the form. In theory it should work. But in reality,
you don't need it to work.
Dec 11 '07 #4

P: n/a
Ok. So, here is my html code. For now, the only way i found to work
around the problem was to click the submit button when the checkboxes
are actually clicked (that triggers the form submit, which is
intercepted ...). If you can show me how to name the click listeners
(i'm not quite used to javascript, and i don't see how to launch the
form submit event when the checkbox click event is triggered : how to
"create" a non-real event and pass it as a parameter ?). Thanks.

***************************
Code >>
***************************
<form action="code-recherche.php" method="post" id="formRecherche">
<input name="id_motscles[]" id="motcle_1" value="1" type="checkbox">
<input name="id_motscles[]" id="motcle_2" value="2" type="checkbox">
<input name="id_motscles[]" id="motcle_3" value="3" type="checkbox">
<input name="id_motscles[]" id="motcle_4" value="4" type="checkbox">
<input name="id_motscles[]" id="motcle_5" value="5" type="checkbox">
<input name="id_motscles[]" id="motcle_6" value="6" type="checkbox">
<input name="id_motscles[]" id="motcle_7" value="7" type="checkbox">
<input name="id_motscles[]" id="motcle_8" value="8" type="checkbox">

<input value="Enregistrer" type="submit">
</form>
***************************
<< Code
***************************
Dec 11 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.