羊驼表单提交，停留在同一页面答案

【问题标题】：Alpaca form submission, stay on same page羊驼表单提交，停留在同一页面
【发布时间】：2023-03-15 18:40:02
【问题描述】：

我正在使用 PHP 和 ALPCA (jquery,ajax) 构建一个表单。我在提交文件和停留在同一页面时遇到问题。我已经尝试了使用 AJAX event.preventDefault(); 的推荐技术，也使用隐藏框架但没有成功。我的问题是 ALPACA 包需要不同的方法吗？

表格部分

    <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 文件

<?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);

?>

谢谢

【问题讨论】：

标签： javascript php jquery ajax forms

【解决方案1】：

如果您希望 alpaca 表单仅通过 ajax 提交，您可以使用这些方法。

首先，要使提交按钮在单击时使用 ajax，请将其click 属性（即options.form.buttons.submit.click）设置为：

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

现在，单击提交按钮将使用 ajax 保存表单，并且用户将留在页面上。剩下的是处理标准提交。这可以通过将postRender（根回调，请参阅documentation）设置为以下内容来完成：

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

希望这仍然有帮助。

【讨论】：