Home/ Questions/Q 7075379
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:10:13+00:00

I´ve read a lot of post about jQuery serialize() but I cant get it

  • 0

I´ve read a lot of post about jQuery serialize() but I cant get it to work with my form!

I works when I print out the form using html+php but not when I use javascript to print out the form. What am I missing?

I know there is a bunch of post about this but every one I´ve found is about ppl forgetting name=”” or disabled the ( Try my code here: http://jsfiddle.net/ZBxkz/1/ ) 

<!DOCTYPE html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>MerBeer</title>

    <!-- //jquery -->
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <!-- //Ajaxscript: -->

    <script type="text/javascript">
        $(document).ready(function () {

         $("#knappen")    
        .delegate('button[name="minKnapp"]', "click", beer_insert);

        $("#theForm")    
        .delegate('button[name="beer_form_submit"]', "click", serial);

        function serial(){

            var f = $('#beer_form'); // CHANGE THIS VALUE TO CHANGE FORM!! #beer_form and #testForm
            var beerContainer = f.serialize();
            alert (beerContainer);

        }

        function beer_insert() {

                //hide first button
                $('#dold').hide();

               //Dynamically added form
                $('#theForm').html('Test :<br><form name="beer_form" id="beer_form"><table id="beers">');
                for (var i = 0; i < 1; i++){
                    $('#theForm').append('<tr><td><input type="text" name="beerCountry" id="beerNo_'+i+'_country" /></td></tr>');
                }
                $('#theForm').append('</table></form><br>');

                $('#theForm').append('<button name="beer_form_submit">Second button</button><br>')
        }
    });

    </script> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
    <!-- Form that works-->
    <form id="testForm" name="testForm">
        <table>
            <?php
                for($i = 0; $i < 3; $i++){
                    echo('<tr><td><input type="text" name="test" id="inget'.$i.'"/></td></tr>');
                }
            ?>
            <tr><td><input type="text" name="test" id="ingetA"/></td></tr>
            <tr><td><input type="text" name="test" id="ingetB"/></td></tr>
        </table>
    </form>        

    <div id="theForm"></div>
    <div id="knappen"><button id="dold" name="minKnapp">The Button</button></div>

</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I hope I got your question right, but probably you want this?: http://jsfiddle.net/jyM5Z/

    Don’t put your html together with many appends. Instead first build a complete html string and then add it to your container. This will not only make it much faster but will also protect you from unexpected behaviour because the browser parses your HTML fragment and changes it in order to make sense (like automatically close open tags).

    • 0