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

时间:2015-04-11 20:44:24

标签: javascript php jquery ajax forms

我正在使用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);

?> 

谢谢

1 个答案:

答案 0 :(得分:3)

如果你想要羊驼毛形式只通过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;
    });
}

希望这仍有帮助。