Search code examples
javascriptjqueryhtmlrequired

Required option not working on localhost

All required fields work good locally, but when I try to run same page from localhost - fields created with jQuery do not check if input is filled. Required option in select works fine in both situations. 

<html>
    <head>
        <title>Submit your data</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link href="style.css"  rel="stylesheet">
        <script src="jquery+ajax.js"></script>
    </head>
    <body>
    <div id="mainform">


 <h1>Insert your data</h1>
        <form method="post" action="add_product.php">
            <input type="hidden" name="submitted" value="true" required/>

            <fieldset id="product_list">
                <legend>New Product</legend>
                <label>SKU:<input  name="sku" required/></label>
                <label>Name:<input  name="name" required/></label>
                <label>Price:<input  name="price" required/></label>
                <label>Product Type</label>

                <select id="Product_Type" required>
                    <option value="" selected>Select product type</option>
                    <option value="Dvd" >DVD</option>
                    <option value="Book">Book</option>
                    <option value="Furniture">Furniture</option>
                </select>

            </fieldset>
    </div>
    <br  />
    <input type="submit" id="submit" value="Add"/>

    <div id='result'></div>
    <button id="back" class="back" onclick="location.href='index.html';">Go Back</button>
    </body>
    <!-- onClick="window.location.reload()" -->
    </html>

Form creation with jQuery, fields which are generated here not working on localhost

    var $input_DVD = $('<input id="dvd" placeholder="Size in Mb" required/>');
var $input_Book = $('<input id="book" placeholder="Weight in Kg" required/>');
var $input_FurnitureHeight = $('<input id="furnh" placeholder="Height in Cm" required/>');
var $input_FurnitureWidth = $('<input id="furnw"  placeholder="Width in Cm" required/>');
var $input_FurnitureLength = $('<input id="furnl" placeholder="Length in Cm" required/>');


$(document).ready(function() {
    $('select#Product_Type').on('change', function() {
        $('#container').remove();

        var val = $(this).val()
        $container = $('<fieldset id="container" class="inner" ></fieldset>');

        if (val == "Dvd")$input_DVD.appendTo($container);
        if (val == "Book") $input_Book.appendTo($container);
        if (val == "Furniture"){
            $input_FurnitureHeight.appendTo($container);
            $input_FurnitureWidth.appendTo($container);
            $input_FurnitureLength.appendTo($container);
        }
        $container.insertAfter($(this)).val();
    })
});
Solution

  • Please make sure you have internet connection in local system as you have not used local jquery library file and also check browser console if it shows any error..

    var $input_DVD = $('<input id="dvd" placeholder="Size in Mb" required/>');
var $input_Book = $('<input id="book" placeholder="Weight in Kg" required/>');
var $input_FurnitureHeight = $('<input id="furnh" placeholder="Height in Cm" required/>');
var $input_FurnitureWidth = $('<input id="furnw"  placeholder="Width in Cm" required/>');
var $input_FurnitureLength = $('<input id="furnl" placeholder="Length in Cm" required/>');
$(document).ready(function() {
    $('select#Product_Type').on('change', function() {
        $('#container').remove();

        var val = $(this).val()
        $container = $('<fieldset id="container" class="inner" ></fieldset>');

        if (val == "Dvd")$input_DVD.appendTo($container);
        if (val == "Book") $input_Book.appendTo($container);
        if (val == "Furniture"){
            $input_FurnitureHeight.appendTo($container);
            $input_FurnitureWidth.appendTo($container);
            $input_FurnitureLength.appendTo($container);
        }
        $container.insertAfter($(this)).val();
    })
});
    <html>
    <head>
        <title>Submit your data</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link href="style.css"  rel="stylesheet">
        <script src="jquery+ajax.js"></script>
    </head>
    <body>
    <div id="mainform">


 <h1>Insert your data</h1>
        <form method="post" action="add_product.php">
            <input type="hidden" name="submitted" value="true" required/>

            <fieldset id="product_list">
                <legend>New Product</legend>
                <label>SKU:<input  name="sku" required/></label>
                <label>Name:<input  name="name" required/></label>
                <label>Price:<input  name="price" required/></label>
                <label>Product Type</label>

                <select id="Product_Type" required>
                    <option value="" selected>Select product type</option>
                    <option value="Dvd" >DVD</option>
                    <option value="Book">Book</option>
                    <option value="Furniture">Furniture</option>
                </select>

            </fieldset>
    </div>
    <br  />
    <input type="submit" id="submit" value="Add"/>

    <div id='result'></div>
    <button id="back" class="back" onclick="location.href='index.html';">Go Back</button>
    </body>
    <!-- onClick="window.location.reload()" -->
    </html>