submit a form when selecting a select option, without re-loading the page

Asked

Viewed 343 times

2

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

I have the following code, which works well but does not send (POST) the form data that are 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> 

It is possible to serialize instead of specifying strings?

2 answers

2

You are not sending Hidden data. Use serialize to send all the data of your form. Ex:

var dataString = $("form").serialize();
  • where "form" is the name of the form (form name)? I tried to put how you told me by replacing : var id_seccoes = window.dateForm.id_seccoes.value = selectObject.options[selectObject.selectedIndex]. value; var dataString = "id_seccoes=" + id_seccoes; but

  • It is a Jquery selector, can call by tag, id, name etc. The serialize should work yes, check if the function is being called correctly. If not, try changing your select to: <select name="id_seccoes" class="form-control" onchange="postSelection(this);">

1


Try this way but you will have to change your form by putting an id. and in 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;
    });
  • But I need the select to trigger the form submission (Submit) I didn’t want it to be a button

  • edited the question, try this way above and return here what happens

  • Dear @Victor, thank you for your help. Forgive me but I am weak in javascript, with the code you send me I cannot understand how select will trigger the form Submit.

  • will change again @Ruibanha

  • consegiu @Ruibanha

  • Dear @Victor, sorry I only got back to this today. The problem now is that as soon as I open the page in question appears Alert (in popup). or let the code run. Because it will be?

  • post your code again updated, and answer, now the problem is this and select that does not do Submit or only this ?

  • Sorry just now reply. It’s solved. Thanks for the help.

  • @Ruibanha mark the answer that best served you as the best answer, this way users will know which way to go when they have the same question

Show 4 more comments

Browser other questions tagged

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