Problem sending form with AJAX

Question

Problem sending form with AJAX

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

3

The "success" of the AJAX submission function works, but the "url" does not do its function of executing the code. Just check if the directory exists and then go to "success"; If in the "url" I put a false directory it does not go to "success".

For the FORM I have

<form method="POST" id="botones_estado" name="botones_estado" action="estados/quebueno.php">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="submit" onclick="quebueno();" name="btn_quebueno_estado" class="btn btn-default" value="<?php echo $usuario_posteando['id_posteando']; ?>">Qué bueno</button>
    </div>
  </div>
</form>

For functions I have

function quebueno(){
	    $('#botones_estado').submit(function() {
	        $.ajax({
	            type: 'POST',
	            url: 'quebueno.php',
	            data: $(this).serialize(),
	            success: function(data) {
	                location.reload(true);
	            }
	        });      
	        return false;
	    });
	}

The PHP code found in "quebueno.php" I already tried it with the ACTION of the FORM and it works perfectly. But I want my page to AVOID the update when sending the form. Someone that please correct me.

javascript html ajax

asked by Mattew Janeey 03.06.2016 в 08:26

source

3 answers

Convert a list Key Value to MultiLine and inverse in Java Collect substring in each line of a file in CMD

score 2 · Answer 1

Try it like this:

<form method="POST" id="botones_estado" name="botones_estado" action="?">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="submit" onclick="quebueno();" name="btn_quebueno_estado" class="btn btn-default" value="<?php echo $usuario_posteando['id_posteando']; ?>">Qué bueno</button>
    </div>
  </div>
</form>

function quebueno(){
	    $('#botones_estado').submit(function() {
	        $.ajax({
	            type: 'POST',
	            url: 'estados/quebueno.php',
	            data: $(this).serialize(),
	            success: function(data) {
	                location.reload(true);
	            }
	        });      
	        return false;
	    });
	}

score 1 · Answer 2

I suggest you remove the type="submit" of the button and leave it type="button"

In your function if you leave it in submit:

function quebueno(){
    $('#form').submit(function(e) {
        e.preventDefault()//evitas hacer el submit
        $.ajax({
            type: 'POST',
            url: 'estados/quebueno.php',
            data: $('#form').serialize(),
            success: function(data) {
                //location.reload(true);
                console.log("sin refresh");
                //acciones a hacer cuando se recibe la info
            }
        });
    });
}

The e.preventDefault() you avoid sending the form since you are going to do the sending by ajax.

Or you can leave your function in this other way and it will be the best when the button is not submit.

function quebueno(){
  $.ajax({
      type: 'POST',
      url: 'estados/quebueno.php',
      data: $('#form').serialize(),
      success: function(data) {
          //location.reload(true);
          console.log("sin refresh");
          //acciones a hacer cuando se recibe la info
      }
  });
}

score 1 · Answer 3

Try placing the button tag type="button" so you will react to an event javascript instead of going to the action of the form, something like this:

<form method="POST" id="botones_estado" action="#?">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button type="button" onclick="quebueno();" name="btn_quebueno_estado" class="btn btn-default" value="<?php echo $usuario_posteando['id_posteando']; ?>">Qué bueno</button>
    </div>
  </div>
</form>

In the function that receives the form data, in this case the value of the button, it is not necessary to call the submit event, use the FomData for the sending of the data of the form, in my opinion it is better to do it that way

function quebueno(){
    // con el FormDAta envias todos los elementos del formulario
    // y los recibes en la pagina php con el name que tengan estos elementos
    // ejemplo $valueBoton = $_REQUEST["btn_quebueno_estado"];

    var  formData = new FormData("form");
        $.ajax({
            type: 'POST',
            url: 'estados/quebueno.php',
            data: formData,
            success: function(data) {
                location.reload(true);
            }
        });      
 }

I hope I help you