按钮未重定向到正确的页面

Question

我试图让一个按钮将表单中的数据保存到数据库中，然后将其重定向到另一个页面，但保存到数据库不起作用，重定向也不起作用，这是我使用的表单。

<div id="newFormPage">
        <form id="useForm">
        <!--barra de topo-->
        <div class="container-fluid">
            <div class="row topbar">
                <div class="col-4"></div>
                <div class="col-1" style="align-content:right;">Template</div>
                <div class="col-2">
                    <select name="Tipos" class="form-control" value="tipo" id="tipo">
                        <option value="nenh">Nenhum</option>
                        <option value="def">Default</option>
                        <option value="inq">Inquérito</option>
                        <option value="ques">Questionario</option>
                        <option value="vot">Votação</option>
                    </select>
                </div>

                <div class="col-1">
                    <button class="btn" id="createbtn"  name="useform" style="background-color: #5e5e5e; color:white;">
                        Usar</button>
                </div>
                <div class="col-4"></div>
            </div>
        </div>
        <br>
        <br>
        <div class="container">
            <div class="row">
                <div class="col">
                    //the content here is irrelevant to the problem
                </center>
                </div>
                <div class="col">
                    <input type="text" class="form-control" placeholder="Nome" id="formnome" required>
                    <textarea rows="7" cols="40" maxlength="370" placeholder="Descrição" id="formdesc" required></textarea>
                </div>
            </div>
        </div>
    </form>
    </div>

这是我正在使用的控制器文件，如果状态结果成功，我尝试使用 window.location.href 但它不起作用

 $('#useForm').on('submit', function(e) {
//se submeter com erros
if (e.isDefaultPrevented()) {
    alert("form with errors") // handle the invalid form...
}
//se estiver tudo bem
else {
    console.log("eque");
    event.preventDefault();
    //carregamento dos dados do form para variávels JS
    //como a chamada é feita do lado do cliente o carregamento é com jQuery
    var data = {};
    data.tipo =$("#tipo").val();
    data.formnome = $("#formnome").val();
    data.formdesc = $("#formdesc").val();

    //chamada AJAX para envio dos dados para o servidor via POST convertendo o array em JSON
    $.ajax({
        type: 'POST',
        url: '../useform',
        data: JSON.stringify(data),
        contentType: 'application/json',
        success: function(result) {
            console.log(result);
            //analisa a resposta (res.end) que está no result e se o status for 200 envia um alerta
            if (result.status == 200) {
                window.location.href = "https://ea10-cfportela.c9users.io/criarform";
            }

        },
        error: function(data) { console.log(data) }
    });
}
});

这是路由文件。

//rota inicial
global.app.get('/criarform', function(req, res) {
console.log('GET /');
//leitura do ficheiro estático - view do user
   var html = global.fs.readFileSync('./view/criar-form.html');
res.writeHead(200, {
    'Content-Type': 'text/html'
});
    res.end(html);
});
    global.app.post('/useform', function(req, res) {
    console.log('body: ' + JSON.stringify(req.body));
    //chamada da função save que está no contacts.model e envio dos parâmetros
    var tipo = global.connect.con.escape(req.body.tipo);
    var nome = global.connect.con.escape(req.body.formnome);
    var desc = global.connect.con.escape(req.body.formedesc);
    global.modelUsarForm.usarform(tipo,nome,desc);
    res.send('{"success" : "Updated Successfully", "status" : 200}');
 });

这是模型文件

 function usarform(tipo, formnome, formdesc) {
if(tipo == "def"){
    tipo = 1;
}
else if(tipo == "inq"){
    tipo = 2;
}
else if(tipo == "ques"){
    tipo = 3;
}
else if(tipo == "vot"){
    tipo = 4;
}
else if(tipo == "nenh"){
    tipo = 5;
}

 var post = {formdesc: formdesc , formnome: formnome ,id:5, tipo: tipo};
var query = global.connect.con.query('INSERT INTO Formulario SET ?', post, function(err, rows, fields) {
    console.log(query.sql);
    if (!err) {
        console.log("Number of records inserted: " + rows.affectedRows);
    }
    else
        console.log('Error while performing Query.', err);
  });
 }
 //função de leitura que retorna o resultado no callback
  function read(callback) {
  //criar e executar a query de leitura na BD
   global.connect.con.query('SELECT * from Formulario', function(err, rows, 
    fields) {
    if (!err) {
        //gravar os resultados rows no callback
        callback(null, rows);
    }
    else
        console.log('Error while performing Query.', err);
     });
     };
   //exportar as funções
 module.exports = {
     read: read,
     usarform: usarform
 }

Answer 1

您正在使用一种陈旧且已弃用的方式来处理提交。

我的解决方案

在你的按钮上添加一个 onClick 按钮

<button onclick="myFunction()">Click me</button>

然后你的 myFunction 需要你所有的表单处理和你已经向后端发出的请求

您的代码出了什么问题

您需要在按钮上添加 type="submit"

<input type="submit" class="btn" id="createbtn" name="useform" style="background-color: #5e5e5e; color:white;">
  Usar
</input>