Why my load does not load after Submit

Asked

Viewed 173 times

0

I have a basic form, and wanted to change the contents of the div after clicking on the send form, when I run without Submit works, poem with 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>
javascript jquery

3 answers

1

So when do you give the Submit theoretically the page is reloaded, excluding the next executions.

The e.preventDefault(); would prevent the <form> to be sent if he was before the $("#formenvio").submit();.

You can use solutions like AJAX or display content you want after the Reload of the page, since the Submit will discard everything that comes after.

1


I do not know what the form Ubmit 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 url of ajax call, which should be the action of your form

  • I did this but still it does not load the quiz.html after sending

  • What does form Submit do? not have an action? If you put a.log console in the ajax call Success, it appears in the browser console?

  • I haven’t got the action ready yet

  • @If you use the Form tag in html, you must have one e. preventDefault();

  • @Ruiferreira worked after putting the console log

  • On the #btnenviar button put type="button"

  • The.log console is just a print for the console, that’s not what you solved for sure, but I’m glad you helped!

  • @Igoroliveira enter no input probably also generates a form Ubmit, note this

  • It was this then, I removed the fields of dento from the form

  • Just change the Form tag to a div, if it’s not useful, like the answer q gave. vlw

  • But then put type="button" on the button and no longer send the form Ubmit

Show 6 more comments

1

When you submit a form there is a refresh on the page, for this reason you lose the context for the load you want to perform. A very simple solution is to use ajax, without the tag form for example. If you need the Tag Form, check the link https://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax

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>
<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>

Browser other questions tagged javascript jquery

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