Обязательный параметр не работает на локальном хосте - PullRequest
Новая
       9

Обязательный параметр не работает на локальном хосте

0 голосов
/ 24 мая 2018

Все обязательные поля работают локально, но когда я пытаюсь запустить ту же страницу с локального хоста - поля, созданные с помощью jQuery, не проверяют, заполнен ли ввод.Обязательный параметр в select отлично работает в обеих ситуациях.

<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>

Создание формы с помощью jQuery, сгенерированные здесь поля не работают на 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();
    })
});

1 Ответ

0 голосов
/ 24 мая 2018

Пожалуйста, убедитесь, что у вас есть подключение к Интернету в локальной системе, так как вы не использовали файл локальной библиотеки jquery, а также проверьте консоль браузера на наличие ошибок. 

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>
...