0

Tenho um form básico, e queria trocar o conteudo da div após click no enviar do form, quando eu executo sem o submit funciona, poem com o submit não funciona

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(document).ready(function(){

    $("#btnenviar").click(function(e){
        $("#formenvio").submit();
        $("#frame2").load("quiz.html");
        e.preventDefault();
        });
    });

</script>
</head>

<body>
    <div id="frame2">
    <form id="formenvio" class="form-horizontal" >
        <fieldset>
            <legend>Form Name</legend>
            <div class="form-group">
              <label class="col-md-4 control-label" for="textinput">Text Input</label>  
              <div class="col-md-4">
              <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
              <span class="help-block">help</span>  
              </div>
            </div>
            <!-- Button -->
            <div class="form-group">
              <label class="col-md-4 control-label" for="singlebutton">Single Button</label>
              <div class="col-md-4">
                <button id="btnenviar" name="singlebutton" class="btn btn-primary">Button</button>
              </div>
            </div>
            </fieldset>
        </form>
    </div>
</body>
</html>

3 Respostas 3

1

Não sei o que faz o submit da form, mas neste caso é melhor utilizar ajax:

$("#btnenviar").on('click', function(e){

var params = $('#formenvio input').serialize();

$.ajax({
    type: "POST",
    url: "/",
    data: params,
    success: function(response){
        $("#frame2").load("quiz.html");

    },
    error: function(){
        alert("Erro");
    }
});
});

Nota: verifique o url da ajax call, que deve ser o action da sua form

11
  • Fiz isso mas mesmo assim ele nao carrega o quiz.html após enviar Commented 30/11/2017 às 15:57
  • O que faz o submit da form? não tem um action? Se colocar um console.log no success da ajax call, ele aparece na consola do browser? Commented 30/11/2017 às 16:01
  • nao tenho o action pronto ainda Commented 30/11/2017 às 16:07
  • @IgorOliveira se tu usar a tag Form no html, tem de ter um e.preventDefault();
    – N. Dias
    Commented 30/11/2017 às 16:10
  • @RuiFerreira funcionou após colocar o console log Commented 30/11/2017 às 16:11
1

Então, quando você dá o submit teoricamente a página é recarregada, excluindo as próximas execuções.

O e.preventDefault(); impediria o <form> de ser enviado se ele estivesse antes do $("#formenvio").submit();.

Você pode usar soluções como AJAX ou exibir conteúdo que você deseja depois do reload da página, já que o submit vai descartar tudo o que vier depois.

1

Quando você submete um formulario ocorre um refresh na página, por esse motivo perde o contexto para o load que você deseja efetuar. Uma solução bem simples é usar ajax, sem a tag form por exemplo. Caso precise da Tag Form, confira o link https://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax

No exemplo abaixo uso ajax POST.

$("#btnenviar").click(function(e) {
  var data = {};
  $("#formenvio input").each(function(){
    data[this.name] = this.value;
  });

  //Ajax post
	$.post("Alguma url aqui", data).done(function() {
  
		$("#frame2").load("quiz.html");
    
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frame2">
        <div id="formenvio" class="form-horizontal" >
            <fieldset>
                <legend>Form Name</legend>
                <div class="form-group">
                  <label class="col-md-4 control-label" for="textinput">Text Input</label>  
                  <div class="col-md-4">
                  <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
                  <span class="help-block">help</span>  
                  </div>
                </div>
                <!-- Button -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="singlebutton">Single Button</label>
                  <div class="col-md-4">
                    <button id="btnenviar" name="singlebutton" class="btn btn-primary">Button</button>
                  </div>
                </div>
                </fieldset>
            </div>
        </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .