Symphony.

Found some discussion on AJAX and form and quite interested to know how I can simplify further to work with JQuery Post function.

In symphony, every fields is fields[name],fields[name] syntax, is it a string or array? Could it be add to a variable like this:

var postData = fields[name]=proyb2&fields[email]=proyb2@mail.com&...

How do I activate action[event] when a submit button is press?

The fields variable is an Array.

How do I activate action[event] when a submit button is press?

No need to. Given you are using jQuery you can serialize the whole form, e.g. an ajax call would look like this (myformrefers the the form element);

$.ajax({
    url: 'myurl',
    type: 'post',
    data: myform.serialize()
    …
});

[edit:] You might want to look at this. Quite automates the whole process, plus it has inline validation. I haven't maintained the plugin for a while since I tend to handle ajax forms with Backbone nowadays, but It should still work.

Oh, not sure about myform part, is it use as in <div id="myform"></div>?

myform will come from a name attribute, not id

<form name="myform" ...>

no, myform refers to the formElement as jQuery object. to be precise, myform variable would be something likevar myform = $('#myform') or var myform = $('form[name=myform]')

jquery serialize

I would prefer to use a more simple version. Can't seem to pin point where submit a data didn't appear in the entries although contactevt has been attached to the page.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml"
    doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    omit-xml-declaration="yes"
    encoding="UTF-8"
    indent="yes" />

<xsl:template match="/">
<header>
&lt;script src="http://localhost/xampp/symphony/workspace/js/jquery.js">&lt;/script>
&lt;script src="http://localhost/xampp/symphony/workspace/js/validate.js">&lt;/script>
</header>
<form name="myForm" method="post" action="" enctype="multipart/form-data" id="a">
  <label>Name
    <input name="fields[name]" type="text" />
  </label>
  <label>Email
    <input name="fields[email]" type="text" />
  </label>
  <label>Contact
    <input name="fields[contact]" type="text" />
  </label>
  <label>Message
    <textarea name="fields[message]" rows="15" cols="50"></textarea>
  </label>
  <input class="button" name="action[contactevt]" type="submit" value="Submit" />
</form>
</xsl:template>
</xsl:stylesheet>

Javascript:

$(function() {      
    $(".button").click(function() {

        var myform = $('form[name=myForm]');
        //alert(myform.serialize());

        $.ajax({
            type: 'post',
            url: 'http://localhost/xampp/symphony/contact-form/',
            data: myform.serialize()
        }); //ajax
        return false;
    }) //button
});

How do I activate 'action[event]' when a submit button is press?

If you're serializing your fields, then your data should probably look like this:

myform.serialize() + '&action[event]=submit'

Or you could just apply that &action[event]=submit to the end of your postData variable.

rather than binding your formsubmission to a click event you should bind it to the submit event of your form.

var myform = $('form[name=myform]');

var callback = function (event) {
 event.preventDefault(); //omit the return false at the end, just prevent default behavior. 
// your stuff here (ajax call etc)
};

myform.on('submit', callback);

You also have to track, if your submission was successful or not. Basically you'd create a page that contains nothing but your form submit event. Ideally it would return a json string of the event node. Then post your form submission to that page and handle the results in your success callback

[edit:] the page template would look like this. Note, that in your case post-comment would be contactevt. You'll also need the xml2json xslt utility.

I suppose there is no on function on jquery?

myform.on('submit', callback);

depends which version.

In deprecated jquery version (< 1.7) it used to be bind and unbind instead of on and off

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document

Give .submit() a shot, @proyb2:

$(function() {      
    $('form[name="myForm"]').submit(function(event) {

        // disable default submit behavior
        event.preventDefault();

        var myform = $(this);
        //alert(myform.serialize());

        $.post(
            'http://localhost/xampp/symphony/contact-form/',
            myform.serialize() + '&action[event]=submit',
            function(data){
                // Do stuff after success
            }
        );

    });
});

.submit() is just a shorthand method for .on('submit') respectively .bind('submit')

@XBleed

what's that '<xsl:value-of select="$root"/>/contact-form/'?

I think I missed all shots, tried to check the inputs is accurate and it's strange to say it isn't success sending any entries.

so whats the page like your are posting your form to?

what's that '<xsl:value-of select="$root"/>/contact-form/'?

I suppose this only works if the js is in an xsl file, rather than a separate js.. But it's just the URL to his submit event. The $root param can be set static if need be.

I edited the post to reflect that instead, to prevent confusion.

@iwyg, the form was posted to http://localhost/xampp/contactform/, tried to replace with another page with http://localhost/xampp/submitform/ is still no luck.

When came across this code:

'&action[event]=submit'
Look like the & is need to convert to & and should the [] be convert to %5B and %5D which should follow the same format as `myform.serialize`?

Does it works at your end?

Ok, I really have no idea what kind of page typehttp://localhost/xampp/submitform/ is.

But lets try this one by one (I assume you are familiar with the basic concept of form submission in symphony).

Normally you'd attach the submit event to the page that contains your form, but if you want to submit your form via xhr, this has no use since you want to have some kind of response you can work with.

There're different approaches you might consider, but lets keep this simple. For pure testing purpose create a page, call it e.g. xhrsubmit. At this time, it doesn't matter what page type you choose, but attach your submit event to it.

In your form markup change the action attribute to action=http//yoursymphonysite/whatever-you-called-thepage?debug. Notice the ?debug url parameter. This will give you the chance to look up the source xml including the submit event results. Just don't submit the form via ajax yet since this would't work at this point.

On the debug page you should see now if your submission was successful or not (/data/events/yousubmitevent).

When it works, its time to move on. As I said earlier, you'll need a response type that you can work with in your xhr request. Both, xml and json are suitable, but I'd prefer json since it's easier to handle in javascript.

If submission via ajax still doesn't work:

• make sure your request was a POST request. jQuery will automatically trigger GET if e.g. you omit a trailing slash on the requested URL
• keep track of your response. Both Webinspector (Webkit) and Firebug have very good tools to monitor xhttp request/resonses.

So, after all, your ajax call would roughly look like this

myform.submit(function (event) {
    event.preventDefault();
    $.ajax({
        url: "http//yoursymphonysite/whatever-you-called-thepage",
        type: "POST",
        dataType: 'json' // choose 'text' if your response data is xml, don't choose 'xml' since this will kill IE
        success: function (response) {
           console.log(response) // look up your javascript console
        },
        error: function () {
           console.log('there was an error: ', arguments);
        }
    })

});

After narrow down to replace the code in event.contactevt.php:

public function load(){
if(isset($_POST['action']['contactevt'])) return $this->__trigger();
}

to

public function load(){
return $this->__trigger();
}

I was able to receive a new entries successfully. Seem the $_POST['action']['contactevt'] wasn't sent capture correctly. Will try to debug with firebug and see how it goes.