羊驼表格提交，留在同一页面

Question

I am building a form with PHP and ALPCA (jquery,ajax). I am having trouble with file submitting and staying on the same page. I have tried the recommended techniques for doing as such with AJAX event.preventDefault(); , also using hidden frame but with no success. My question is does the ALPACA package require a different method?

FORM SECTION

    <script type="text/javascript">
        $(document).ready(function() {
           $("#form").alpaca({
            "schema": {
                    "title":"User Feedback",
                    "description":"What do you think about this Speaker?",
                    "type":"object",
                    "properties": {
                        "email": {
                            "type":"string",
                            "title":"Email",
                            "required":false
                        },
                        "feedback": {
                            "type":"string",
                            "title":"Feedback"
                        },
                        "ranking": {
                            "type":"string",
                            "title":"Ranking",
                            "enum":['It is Great', 'Not so cool', 'Very poor quality', 'I think there may be a Privacy or Copyright issue'],
                            "required":false
                        }
                    }
                },
                "options": {
                    "form":{
                        "attributes":{
                            "action":"FORM.php",
                            "method":"post"
                            "target":"hiddenFrame"
                        },
                        "buttons":{
                            "submit":{}
                        }
                    },
                    "helper": "What do you think about this Speaker?",
                    "fields": {
                        "email": {
                            "size": 20,
                            "placeholder": "email not nessasary"
                        },
                        "feedback" : {
                            "type": "textarea",
                            "name": "your_feedback",
                            "rows": 4,
                            "cols": 40,
                            "helper": ""
                        },
                        "ranking": {
                            "type": "select",
                            "helper": "",
                           "optionLabels": ["It is Great", "Not so cool", "Very poor quality", "I think there may be a Privacy or Copyright issue"]
                        }
                    }
                },
                e.preventDefault();
            });
        });
    </script>

PHP FILE

<?php

$file = "people.txt";
$feedback = $_REQUEST['feedback'];
$ranking = $_REQUEST['ranking'];
$email= $_REQUEST['email'];
$string = file_get_contents("/tmp/live-info");

$json = str_replace('***(', $callback, $string);
$json = rtrim($json, ')');

$json_a = json_decode($json, true);

$current_name = $json_a['current'][name];

$current_name .= "|$email|$ranking";

$feedback .= "|$current_name" .PHP_EOL;

file_put_contents($file, $feedback, FILE_APPEND | LOCK_EX);

?> 

Thank You

Answer 1

If you want an alpaca form to submit solely trough ajax you can use something along these lines.

First, to make the submit button use ajax when clicked set its click property (ie options.form.buttons.submit.click ) to something like:

function(){
    this.ajaxSubmit().done(function(){
        console.log('Saved');
    }).fail() {
        console.warn('Failed to save');
    });
}

Now, clicking the submit button will save the form with ajax and the user will remain on page. What's left is handling the standard submit. This can be done setting postRender (a root callback, see documentation ) to something along these lines:

function(control) {
    if (control.form) {
        control.form.registerSubmitHandler(function (e) {
        control.form.getButtonEl('submit').click();
        return false;
    });
}

Hope this still helps.