Because my load does not load after submit

Navigation
0

I have a basic form, and wanted to change the contents of the div after clicking on the submit form, when I run without the submit works, put with the submit does not work 

<!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>
    
asked by anonymous 30.11.2017 / 16:30

3 answers

1

I do not know what the form submit does, but in this case it is better to use 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");
    }
});
});

Note: check the ajax call url, which should be the action of your form

    
30.11.2017 / 16:50
1

So when you give submit theoretically the page is reloaded, excluding future executions.

e.preventDefault(); would prevent <form> from being sent if it was before $("#formenvio").submit(); .

You can use solutions such as AJAX or display content you want after the reload page, since submit will discard everything that comes later.

    
30.11.2017 / 16:43
1

When you submit a form, a refresh occurs on the page, so it loses the context for the load you want to perform. A very simple solution is to use ajax, without the form tag for example. If you need the Tag Form, check out the link

In the example below use 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><divid="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>
    
30.11.2017 / 16:57
I need help to create the makefile Convert monetary values "R $" to double type