I can’t do the form Ubmit!

Asked

Viewed 99 times

1

I have this form in a Modal, but when I give Submit it does not send anything by the post or get method, and the problem I found was the modal itself, it does not Ubmit within the modal. Someone could give me a hand, I missed something in the creation of modal or form, follows the code I created. Thanks from now on.

<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 skip the xD gambiarras.

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

  • Does not indicate any error, enter the back-end code and the javascript you are using for animation(0)

  • the animation javascript is very extensive and not the need for it, I tested without it and there was no error.

  • @Douglas does not accuse any error? Because I did a test aq and it worked normal

  • It does not accuse any error, I will send the animation code , will that for some reason the problem is it,

  • Your code works, don’t answer your question, edit your question.

  • There must be an error then in Onclick , because here it is not working @Jorgecosta

  • Take out the onclick and forehead

Show 2 more comments

1 answer

0

I could not run your code here for lack of time, but what was missing was you take the form ID.

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

In javascript you take 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 Ubmit button you are calling the animation() function through the onclick. But this function is only receiving the values and it was missing to submit this data. To submit the form this is done through formid.Ubmit().

  • I think just because it is an input type="Submit" it already "Ubmit" direct, no? Unless in the animation() function there was an e.preventDefault.

  • Try to remove type Submit and leave only by onclick function. I have already been through this problem, I believe Submit is not working because the script eh run preventing the form to be sent.

Browser other questions tagged php html jquery modal

You are not signed in. Login or sign up in order to post.