More than one Date Field in Ajax

Asked

Viewed 655 times

2

Good morning.

I have the following code:

<form id="enviavenda" method="POST" action="" autocomplete="off">
    <input class="input_codBarras" id="codBarras" name="codBarras" type="number" />
    <input class="input_quantidade" id="on2Focus" name="quant" type="text" />
    <input id="btn_cadVenda" type="submit" value="enviar" style="display: none;">
</form>    

<script type="text/javascript">
        $(function(){
            var newcodBarras = $("#codBarras").val();
            var newquantidade = $("#on2Focus").val();
            var sdata = { codBarras : newcodBarras, quantidade : newquantidade }
            $('#enviavenda').submit(function(){
                $.ajax({
                    url: '../arquivos/php/caixaCadastraVenda.php',
                    type: 'POST',
                    data: sdata,
                    success: function(data){
                        $('.recebeDados').html(data);
                    }
                });
                $("#codBarras").val('');
                return false;
            });
        });
</script>

Problem:

Fields that have been entered into jQuery variables are not being passed to the url page. It only works when I step 

data: $("#codBarras").serialize(),

But I need to pass two input fields (or more).

In the box fileCadastraVenda.php , when I call $_POST['quantity'] or $_POST['codBarras'] it has an error that there is no such field.

How to pass more than one variable on the Ajax date?

javascript jquery ajax

  • The ajax is working or the page is being reloaded?

  • The page is not being reloaded according to the command of the script Return false, but the registration in the database does not happen because PHP informs that the file $_POST["quantity"] does not exist.

  • 1

    If the page is not being reloaded, in principle just put the 3 lines that start with var ... within Ubmit. you are picking up data that has not been filled in yet and you are using it in the form

3 answers

0

Pass to formData, It is worth mentioning that in php when using formData, you need to use the same HTML Names, ie codBarras and Quant

<form id="enviavenda" method="POST" action="" autocomplete="off">
    <input class="input_codBarras" id="codBarras" name="codBarras" type="number" />
    <input class="input_quantidade" id="on2Focus" name="quant" type="text" />
    <input id="btn_cadVenda" type="submit" value="enviar" style="display: none;">
</form>    

<script type="text/javascript">
        $(function(){
            //Serializa o formulário
            var sdata = new FormData(document.getElementById('enviavenda'));

            $('#enviavenda').submit(function(){
                $.ajax({
                    url: '../arquivos/php/caixaCadastraVenda.php',
                    type: 'POST',
                    data: sdata,
                    success: function(data){
                        $('.recebeDados').html(data);
                    }
                });
                $("#codBarras").val('');
                return false;
            });
        });
</script>

IN PHP

<?php  $quantidade = $_POST['quant']; $codB = $_POST['codBarras']; ?>

  • The FormData will not work if PHP is not changed, because in the AP code it uses quantidade and in the form is quant. Of course this is just a detail, but without mentioning it your answer is incomplete.

  • Ready friend thanks for the remark @fernandosavio

0

If your php is expecting a model

Json:

$(function(){            

            $('#enviavenda').submit(function(){
             var modelnome= {
              codBarras :  $("#codBarras").val(),
              quantidade :$("#on2Focus").val()
              }

                $.ajax({
                    url: '../arquivos/php/caixaCadastraVenda.php',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json',
                    data: JSON.stringify(modelnome),
                    success: function(data){
                        $('.recebeDados').html(data);
                    }
                });
                $("#codBarras").val('');
                return false;
            });
        });

Form: 

$(function(){
        $('#enviavenda').submit(function(){
            $.ajax({
                url: '../arquivos/php/caixaCadastraVenda.php',
                type: 'POST',
                data: data: $('form#enviavenda').serialize(),
                success: function(data){
                    $('.recebeDados').html(data);
                }
            });
            $("#codBarras").val('');
            return false;
        });
    });

0


You are creating the object outside the Ubmit event, with this it will always be empty. Just put in it will pick up the values at the time of Submit:

$(function(){
   $('#enviavenda').submit(function(){
      var newcodBarras = $("#codBarras").val();
      var newquantidade = $("#on2Focus").val();
      var sdata = { codBarras : newcodBarras, quantidade : newquantidade }
       $.ajax({
           url: '../arquivos/php/caixaCadastraVenda.php',
           type: 'POST',
           data: sdata,
           success: function(data){
               $('.recebeDados').html(data);
           }
       });
       $("#codBarras").val('');
       return false;
   });
});

Browser other questions tagged javascript jquery ajax

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