Home/ Questions/Q 7674837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T16:49:33+00:00

I’m trying to add the selected value from the autocomplete search box to my

  • 0

I’m trying to add the selected value from the autocomplete search box to my id=”merkenlijst”.The problem is that when the brand gets added now it only flashes for a sec and then dissapears. I can’t find what i’m doing wrong.

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"  rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
    $(document).ready(function() {
        $("input#autocomplete").autocomplete({
            source: ["Adidas", "Airforce", "Alpha Industries", "Asics", "Bikkemberg", "Birkenstock", "Bjorn Borg", "Brunotti", "Calvin Klein", "Cars Jeans", "Chanel","Chasin", "Diesel", "Dior", "DKNY", "Dolce & Gabbana"]
        });

        $("#add-brand").click(function(){
            var merk  = $("#autocomplete").val();
            $("#merkenlijst").append( merk );  
        });
    });
</script>

<style type="text/css">
    body{    margin: 0 auto; width: 540px; }
</style>

<title>Form add brands </title>
</head>

<body>
    <div id="brands-form-holder">
        <form id="brands-form" action="" method="">
            <dl>
                <dt>
                    <h1>
                        <label for="brands-form-brand">Add your brands</label>
                    </h1>
                </dt>
                <dd>
                    Search for brand:
        <input id="autocomplete" type="text" name="brand" />
        <input id="add-brand" type="submit" value="Add brands" />
                </dd>
            </dl>
        </form>

        <hr />

        <p class="section-title">
            <strong>Brands selected</strong> (including from the database)
        </p>

        <div id="merkenlijst">  </div>
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The form will be submitting / reloading the page when you click the “Add brands” submit button. Return false from the click event to prevent the form being submitted (or use preventDefault)

        $("#add-brand").click(function(){
        var merk  = $("#autocomplete").val();
        $("#merkenlijst").append( merk );  
        return false;
    });

    Alternatively, just use a type="button" input instead of a submit button:

    <input id="add-brand" type="button" value="Add brands" />
    • 0