submit a form when selecting a select option, without doing page reload

Question

submit a form when selecting a select option, without doing page reload

Navigation

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

2

I need to submit the data of a form (they are hidden) when selecting the option in select, this with ajax without reload of the page.

I have the following code, which works fine, but does not send (POST) form data that is hidden:

<form class="form-horizontal" method="POST" action='#' name="dateForm">
<input type='hidden' name='cond_acao' class='form-control' value="edit_seccao_formando">
<input type="hidden" name="id_formando" value="<?=$linha_formandos[id_formando];?>">                             


<select name="id_seccoes" class="form-control" onchange="return postSelection">
    <option selected="selected" value="1">car</option>
    <option value="2">boat</option>
    <option value="3">plane</option>       
</select>

<div id='response_seccoes'></div>    

  <script>
    function postSelection(selectObject) {

        var id_seccoes = window.dateForm.id_seccoes.value = selectObject.options[selectObject.selectedIndex].value;
        var dataString = "id_seccoes=" + id_seccoes;

        $.ajax ({
        type:"post",
        url: "url.php",
        data:dataString,
        success: function (response) {

            $('#response_seccoes').html("ok").fadeIn(100).delay(2000).fadeOut("slow");
            //$("#list").html(response);


        }
      });
        return false;
    };
 </script> 
</form>

Is it possible to serialize rather than specify strings?

php mysql jquery

asked by anonymous 08.11.2017 / 13:23

2 answers

2

You are not submitting hidden data. Use serialize to submit all the data on your form. Ex:

var dataString = $("form").serialize();

08.11.2017 / 13:40

How to use a function of an object as an argument of another function Two events in function - jQuery

score 1 · Accepted Answer

Try to do it this way however you will have to change your form by placing an id. and on your select do this

<select name="id_seccoes" class="form-control" onchange="document.forms['dateForm'].submit();">

<form id='selector' class="form-horizontal" method="POST" action='#' name="dateForm">

$(document).ready(function(){

        var dataString = $( "#selector" ).serialize();

        $.ajax({
            type: "POST",
            url: "url.php",
            data: dataString,
            success: function( data )
            {
                alert( data );
            }
        });

        return false;
    });