I can not submit the form!

Question

I can not submit the form!

Navigation

#1 by (0 votes)

1

I have this form in a Modal, but when I submit it it does not send anything by the post or get method, and the problem I encountered was modal itself, it does not submit inside modal. Someone could give me a help, I messed up something in the creation of modal or form, follow the code I created. Thank you in advance.

<div class='modal-header'>
    <h5 class='modal-title' id='exampleModalLabel' style='text-align: center !important;margin-left:40%;font-size:1.8em;font-weight:bold'>Registro</h5>
    <button type='button' class='close' data-dismiss='modal' aria-label='Close'> 
        <span aria-hidden='true'>&times;</span>
    </button>
</div>
<div class='modal-body'>
    <form method='post' action='GG.php'>
        <div class='form-group row'>
            <label style='font-size:1.2em;padding-left:8px !important' class='col-5'>Ordem de serviço</label>
            <input class='col-6' type='number' name='ordem' id='ordem0'>
        </div>
        <div class='form-group row'>
            <label style='font-size:1.2em;padding-left:8px !important' class='col-5'>Prisma</label>
            <input class='col-6' type='number' maxlength='2' id='Prisma0' name='prisma'>
        </div>
        <div class='form-group row'>
            <label style='font-size:1.2em;padding-left:8px !important' class='col-5'>Previsão de saída </label>
            <input class='col-6' type='time' name="Hsaida" id='HSaida0'>
        </div>
        <div class='form-group row'>
            <label style='font-size:1.2em;padding-left:8px !important' class='col-5'>Funcionário</label>
            <input class='col-6' type='text' name='func' id='func0'>
        </div>
        <div class='form-group row'>
            <label style='font-size:1.2em;padding-left:8px !important' class='col-5'>Carro</label>
            <input class='col-6' type='text' name='carro' id='carro0'>
        </div>
        <div class='form-group row'>
            <label style='font-size:1.2em;padding-left:8px !important' class='col-5'>Placa</label>
            <input class='col-6' type='text' name='placa' id='placa0'>
        </div>

        <input style='margin-left:82%' type='submit' class='btn' value='Enviar' onclick='animacao(0)' data-dismiss='modal' style='margin-top: 20px;'>

    </form>
</div>

PHP

<?php 
if(isset($_POST["ordem"]) || isset($_POST["func"]) ||isset( $_POST["prisma"]) || isset($_POST["Hsaida"]) || isset($_POST["carro"]) || isset($_POST["placa"])){
    $ordem = $_POST["ordem"];
        $func = $_POST["func"];
        $prisma = $_POST["prisma"];
        $saida = $_POST["Hsaida"];
        $carro = $_POST["carro"];
        $placa = $_POST["placa"];
        echo $ordem;
        echo $func;
        echo $prisma;
        echo $saida;
        echo $carro;
        echo $placa;
    }
?>

JAVASCRIPT

I'm still learning to use Javascript so ignore the gambiarras xD.

function animacao(ide){

    var valorr = document.getElementById("HSaida"+ide);
    console.log(valorr.value);
    var horaF = valorr.value;
    var agora = new Date();
    var horas = Horas(agora.getHours());
    var minutos = Horas(agora.getMinutes());
    var total = horas + ":" + minutos;
    console.log(diferencaHoras(total,horaF));
    var Tempo = diferencaHoras(total,horaF);
    var id = "#mudaCor"+ide;
    var parteTempo = Tempo / 4;
    // console.log("o ide é: "+id);
    // console.log("O quarto de hora é"+parteTempo);
    var cont = 0;
    var inter = setInterval(function(){
        // console.log("caiu cont = "+ cont);
        if (cont == 0) {
            $("#mudaCor"+ide).css("background-color","green");
        }
        if(cont == parteTempo){
            $("#mudaCor"+ide).css("background-color","yellow");
        }
         if(cont == parteTempo+parteTempo){
            $("#mudaCor"+ide).css("background-color","orange");
        }
         if(cont == parteTempo+parteTempo+parteTempo){
            $("#mudaCor"+ide).css("background-color","red");
        }
        if(cont == parteTempo+parteTempo+parteTempo+parteTempo+1){
            $("#mudaCor"+ide).css("background-color","black");
            $("#CorPrisma"+ide).css("color","white");
            $("#CorCarro"+ide).css("color","white");
            $("#CorFuncio"+ide).css("color","white");
            $("#CorPlaca"+ide).css("color","white");
            clearInterval(inter);
        }
        cont++;
    },1000);
    var carroo = document.getElementById("carro"+ide);
    var carro = carroo.value;
    var serviçoo = document.getElementById("ordem"+ide);
    var serviço = serviçoo.value;
    var funci = document.getElementById("func"+ide);
    var func = funci.value;
    var valorr = document.getElementById("HSaida"+ide);

    var prisma = document.getElementById("Prisma"+ide);
    var prisma_valor = prisma.value;
    var placaa = document.getElementById("placa"+ide);
    var placa = placaa.value;
    document.getElementById("mudaCor"+ide).innerHTML ="<div style='text-align:center;'><p id='CorPrisma"+ide+"' style='margin-bottom:0 !important;font-size:40px;font-weight:bold;line-height: 1'>"+ prisma_valor +"</p><input type='number' id='Prisma"+ide+"' style='display:none' value='"+prisma_valor+"'><p id='CorCarro"+ide+"' style='margin-bottom:0 !important;font-size:24px;font-weight:bold;margin-top:0px;line-height: 1'>"+carro+"</p><p id='CorPlaca"+ide+"' style='font-size:18px;font-weight:bold;margin-top:0px;margin-bottom: 0 !important;'>"+placa+"</p><p id='CorFuncio"+ide+"' style='font-size:18px;font-weight:bold;margin-top:0px;margin-bottom: 0 !important;'>"+func+"</p></div><button style='margin-left:44px;height:23px !important;width:100px;font-size:90%;padding:0;position:absolute;bottom:1%' type='button' class='btn btn-dark' data-toggle='modal' data-target='#exampleModal"+ide+"' style='margin-left: 40px'> Visualizar </button> <div class='modal fade' id='exampleModal"+ide+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'><div class='modal-header'> <h5 class='modal-title' id='exampleModalLabel' style='text-align: center !important;margin-left:40%;font-size:1.8em;font-weight:bold'>Registro</h5><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button></div><div class='modal-body'><br><input type='number' id='IdMudaCor"+ide+"' style='display:none' value='"+ide+"'><div class='row'><p style='text-align:right;font-size:1.2em;padding-left:8px !important' class='col-5'> Ordem de serviço: </p><p class='col-3' style='font-size:1.2em;padding-left:8px !important'>"+ serviço +"</p></div><input type='text' id='Oserviço"+ide+"' style='display:none' value='"+serviço+"'><div class='row'><p class='col-5' style='text-align:right;font-size:1.2em;padding-left:8px !important'> Funcionário: </p><p class='col-3' style='font-size:1.2em;padding-left:8px !important'>"+ func +"</p></div><input type='text' id='Funcio"+ide+"' style='display:none' value='"+func+"'><div class='row'><p class='col-5' style='text-align:right;font-size:1.2em;padding-left:8px !important'> Horário de entrada:</p><p class='col-3' style='font-size:1.2em;padding-left:8px !important'> "+total +"</p></div><input type='time' id='HoraIni"+ide+"' style='display:none' value='"+total+"' ><div class='row'><p class='col-5' style='text-align:right;font-size:1.2em;padding-left:8px !important'> Previsão de saída:</p><p class='col-3' style='font-size:1.2em;padding-left:8px !important'> "+ horaF+"</p></div><input type='text' id='HorarioSaida"+ide+"' style='display:none' value='"+horaF+"'><div class='row'><p class='col-5' style='text-align:right;font-size:1.2em;padding-left:8px !important'> Carro:</p><p class='col-3' style='font-size:1.2em;padding-left:8px !important'>" +carro +"</p></div><input type='text' id='NomeCarro"+ide+"' style='display:none' value='"+carro+"'><div class='row'><p class='col-5' style='text-align:right;font-size:1.2em;padding-left:8px !important'> Placa:</p><p class='col-3' style='font-size:1.2em;padding-left:8px !important'>"+placa+"</p><input type='text' id='Placa"+ide+"' style='display:none' value='"+placa+"' ></div><button class='btn btn-primary' style=';margin-right:10px' data-toggle='collapse' data-target='#CollapseExample"+ide+"' aria-expanded='false' aria-controls='CollapseExample"+ide+"' onclick='enviar("+ide+")' >Alterar</button><button class='btn btn-primary' style='margin-right:10px' onclick='enviar("+ide+")' data-toggle='collapse' data-target='#multiCollapseExample"+ide+"' aria-expanded='false' aria-controls='multiCollapseExample"+ide+"'>Extender</button><button class='btn btn-danger' style='margin-left:40%' data-dismiss='modal' onclick='deletar("+ide+")'>Terminar</button><div style='margin-top: 10px;' class='collapse multi-collapse' id='multiCollapseExample"+ide+"'><div class='card card-body'><div style='margin-bottom : -0px !important;' class='form-group row'><label style='font-size: 1.2em;' class='col-7'>Nova previsão de término</label><input id='HoraExtendida"+ide+"' class='col-3' type='time'><button  class='btn' onclick='extender("+ide+")' data-dismiss='modal'>Alterar</button></div></div></div> <div class='collapse' id='CollapseExample"+ide+"' style='margin-top:10px'><div class='card card-body'><div class='form-group row'><label class='col-5' style='font-size: 1.2em;padding-left: 8px !important;'>Ordem de serviço</label><input class='col-6' type='number' value='"+serviço+"' name='ordem' id='ordem"+ide+"'></div><div class='form-group row'><label style='font-size: 1.2em;padding-left: 8px !important;' class='col-5'>Prisma</label><input class='col-6' type='number' id='AltPrisma"+ide+"' value='"+prisma_valor+"' name='prisma'></div><div class='form-group row'><label style='font-size: 1.2em;padding-left: 8px !important;' class='col-5'>Funcionario</label><input class='col-6' type='text' value='"+func+"' name='func' id='func"+ide+"'></div><div class='form-group row'><label style='font-size: 1.2em;padding-left: 8px !important;' class='col-5'>Carro</label><input class='col-6' type='text' name='carro' value='"+carro+"' id='carro"+ide+"'></div><div class='row'><label style='font-size: 1.2em;padding-left: 8px !important;' class='col-5'>Placa</label><input class='col-6' type='text' name='placa' value='"+placa+"' id='AtPlaca"+ide+"'></div><div class='row'><button class='btn' type='button' style='left:77%;position:relative' onclick='alterar("+ide+")' data-dismiss='modal'>Salvar</button></div></div></div></div></div> </div></div></div>";

}

php html jquery modal

asked by anonymous 23.07.2018 / 19:18

1 answer

Pie Chart of Google gets deformatado to be called by Javascript function Use of undefined constant

score 0 · Answer 1

You could not execute your code here for lack of time, but what you needed was to get the form ID.

 <form method='post' action='GG.php' id="formid">

In javascript you get this id and assign it to a variable as you did with Input

var formid = document.getElementById("formid");

At the end of your JavaScript code you call the function to submit the form.

formid.submit();

This will be responsible for submitting your form to the GG.php file by the POST method you defined.

Why did this happen?

On the submit button you are calling the animation () function through onclick. But this function is only receiving the values and was missing to submit this data. To submit the form this is done through formid.submit ().