Mootools, ajax and checkboxes

[Jean Ceugniet]

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 ?

 

[David Mark]

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.

 

[Jean Ceugniet]

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

TIA



David Mark a écrit :

 

[David Mark]

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.

 

[jean.ceugniet]

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

 

[VK]

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

I don't know how to do it with "moo cows" but with JavaScript
itself it could be like:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function init() {
var chk = document.getElementsByName('id_motscles[]');
for (var i=0; i<chk.length; i++) {
chk.onclick = submitter;
}
}

function submitter() {
document.forms['MySearchForm'].submit();
}

window.onload = init;
</script>
</head>

<body>
<form name="MySearchForm" action="code-recherche.php" method="post">
<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">
<noscript><input value="Enregistrer" type="submit"></noscript>
</form>
</body>
</html>

 

[Jean Ceugniet]

Yes, but how to do it, since the normal submit event is intercepted (see
previous messages) ?


VK a écrit :

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

I don't know how to do it with "moo cows" but with JavaScript
itself it could be like:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function init() {
var chk = document.getElementsByName('id_motscles[]');
for (var i=0; i<chk.length; i++) {
chk.onclick = submitter;
}
}

function submitter() {
document.forms['MySearchForm'].submit();
}

window.onload = init;
</script>
</head>

<body>
<form name="MySearchForm" action="code-recherche.php" method="post">
<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">
<noscript><input value="Enregistrer" type="submit"></noscript>
</form>
</body>
</html>

 

[Jim]

Yes, but how to do it, since the normal submit event is intercepted (see
previous messages) ?

Jean,

I think you're going about this the long way around. Let's take a
step back and think about what you are wanting to accomplish.

From what I can gather, you are wanting to fire off an ajax call every
time a check box is clicked, right? So why bother "submitting" the
form to begin with? You need something more like this:

<html><head><title>dummy</title>
<script>
function CheckBoxChange(){
//okay, a checkbox has changed value
//so call your ajax function

DoAjax();

//and return
}

function PageLoaded(){
var chk = document.getElementsByName('id_motscles[]');
for (var i=0; i<chk.length; i++) {
chk.onclick = CheckBoxChange;
}
}

window.onload = PageLoaded;
</script>
<body>

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

 

[VK]

Yes, but how to do it, since the normal submit event is intercepted

Intercepted by what? I guess I still missing the root of your problem.
In the code I have posted onclick event for each checkbox invokes
submit() method of the form. If you don't want to submit the form but
do something else instead - then don't submit the form and do
something else instead. As easy as that. So instead

function submitter() {
document.forms['MySearchForm'].submit();
}

it might be:

function submitter() {
checkFormInput();
doAnyOtherStuff();
serializeFormData();
sendFormDataByAjaxRequest()
}

 

[Jean Ceugniet]

Ok, it seems like i've forgotten to give you some info which was in the
previous posts. I already have this, which works : it intercepts the
normal submit from my form, and makes an ajax call instead.

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

Since this works, i'd like my checkboxes to "make the same thing as when
the form is submitted", that is to say "no real form submit, and the
same ajax call as if the form was asked for submission".

Jim a écrit :

Yes, but how to do it, since the normal submit event is intercepted (see
previous messages) ?

Jean,

I think you're going about this the long way around. Let's take a
step back and think about what you are wanting to accomplish.

From what I can gather, you are wanting to fire off an ajax call every
time a check box is clicked, right? So why bother "submitting" the
form to begin with? You need something more like this:

<html><head><title>dummy</title>
<script>
function CheckBoxChange(){
//okay, a checkbox has changed value
//so call your ajax function

DoAjax();

//and return
}

function PageLoaded(){
var chk = document.getElementsByName('id_motscles[]');
for (var i=0; i<chk.length; i++) {
chk.onclick = CheckBoxChange;
}
}

window.onload = PageLoaded;
</script>
<body>

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

 

[pixelchutes]

$("formRecherche").fireEvent ("submit");


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

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

I had to pass to pass the calling event to the fireEvent function in
order to get fireEvent('submit') working as one might expect:

element.addEvent('click',function(event){

new Event(e).stop();
$('your_form_id').fireEvent('submit',event);

});

Regards,

Mike Reid
www.pixelchutes.com