How get the value from a link and send the form using mootools?

Question

I have a such form with many links:

<form name="myform" action="" method="get" id="form">

<p>
<a href="getValue('A')" class="del">My link</a> 
</p>
<p>
<a href="getValue('B')" class="del">My link 2</a> 
</p>
<p>
<a href="getValue('C')" class="del">My link 3</a> 
</p>

<input type="hidden" name="division" value="" />        
</form>

I would like to send the form's value from the link that was clicked to php script and get the response (not reloading the page).

I'm trying to write a function that gets the value from a link:

<script type="text/javascript">
window.addEvent('domready', function() {
getValue = function(division)
{
var division;
division=$('form').getElements('a');        
}
</script>

but I don't know how to write it in a right way. Next I would like to send the form:

$$('a.del').each(function(el) {
    el.addEvent('click', function(e) {
    new Event(e).stop();

    $('form').submit(); 

    });
});

How I should send it to get the response from a php file not reloading the page?

Answer 1

This works for me:

<form id="form">
<a data-value="A">My link</a>
...
</form>

<script>
 var links = document.id('form').getElements('a');
 links.each(function(link) {

link.addEvent('click', function(e) {
    e.stop();  

    var value = link.getProperty('data-value');

var req = new Request.HTML({
url: "/path/to/your/listener", 
data: value,
onRequest: function(){
$('display').set('text', 'Search...');
  },
onComplete: function() { 

},
update    : $('display') 
}).get( 
{data: value}   
);  
});
})      
</script>

Answer 2

Instead of putting in javascript inline in the HTML, I would suggest using a delegated event instead. I would also send the form using an ajax call instead of a form submit.

<form id="form">
    <a data-value="A">My link</a>
    ...
</form>

<script>
    var formEl = document.id('form');
    formEl.addEvent('click:relay(.del)', function() {
        var value = this.getProperty('data-value');
        new Request.JSON({
            url: '/path/to/your/listener',
            onSuccess: function(data) {
                // ...
            }
        }).get({
            value: value
        });
    });
</script>