Text not carrying over to POST variable

Question

Here is the HTML: Line 18 below is not carrying over to $_POST['storename'] after Submit is hit. All other text fields are carrying over just fine. The only difference is that this autofills with data from database using PHP and AJAX. I've attached all coding in reference to that field.

Here's the link to the site: http://drmwebdesign.com/project002/product-insert.php

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div class="row uniform 50%">
        <div class="6u 12u(mobilep)">
            <input type="text" name="pname" id="pname" value="<?php echo $pname;?>" placeholder="Product Name" />
        </div>
        <div class="6u 12u(mobilep)">
            <input type="text" name="brand" id="brand" value="<?php echo $brand;?>" placeholder="Product Brand" />
        </div>
        <div class="6u 12u(mobilep)">
            <input type="text" name="price" id="price" value="<?php echo $price;?>" placeholder="Product Price" />
        </div>
        <div class="6u 12u(mobilep)">
            <input type="text" name="upc" id="upc" value="<?php echo $upc;?>" placeholder="Product UPC" />
        </div>
    </div>
    <div class="row uniform">
        <div class="12u">
            <input type="text" name="storename" id="storename" class="form-control" placeholder="Enter Store Name" />
            <div id="storeList"></div>
        </div>
        <div class="12u">
            <ul class="actions align-center">
                <li><input type="submit" value="Submit Product" /></li>
            </ul>
        </div>
    </div>
</form>

<script>
    $(document).ready(function(){
        $('#storename').keyup(function(){
            var query = $(this).val();
            if(query != '')
            {
                $.ajax({
                    url:"php/storelist.php",
                    method:"POST",
                    data:{query:query},
                    success:function(data)
                    {
                        $('#storeList').fadeIn();
                        $('#storeList').html(data);
                    }
                });
            }
        });
        $(document).on('click', 'li', function(){
            $('#storename').val($(this).text());
            $('#storeList').fadeOut();
        });
    });
</script>

I tried filing the store name and it worked fine, where is the problem? EDIT: a tip, load the jquery library before loading the bootstrap js file — Spoody, Jul 22 '17 at 21:03
Remove the document.on("click","li", function(){ ... }); as it empty storename because you're just taking li's text to it. This event occur when you click the submit button because submit button is directly within

Posttwo · Answer 1 · 2017-07-22T21:21:20.100

0

$(document).on('click', 'li', function(){
    $('#storename').val($(this).text());
    $('#storeList').fadeOut();
});

Triggers when you press the submit button, setting #storename value to nothing.
Add a class to the store names and target onclick using that.

edited Jul 22 '17 at 21:21

answered Jul 22 '17 at 21:07

Posttwo

1,274
2
9
13

score 0 · Answer 2 · answered Jul 22 '17 at 21:14

Try the following : 1) Use the chrome network to check the request / response 2) If the field contains a long data check the max post size 3) If the field is a list, and you are selecting multiple choices you need to check this question 4) check if multiple fields have the same name/id

Text not carrying over to POST variable

2 Answers2