0

jQuery ライブラリを使用して、入力からテーブルに製品情報を追加する必要があります。私はかなり長い間努力していますが、どこにも行きません。まず、入力にデータを入力し、適切なラジオ ボタンを選択して、入力フィールドを検証する必要があります。エラーがない場合は、製品情報をテーブルに追加する必要があります。次のコードで試しました: jsFiddle

意図したとおりに機能するものは何もありません。私は何を間違っていますか？

JS コード:

$(document).ready(function () {

//Global variables
var productName = "";
var price = 0;
var onStack = "N/A";

$("body > form").submit(function () {
    //Check if any of requested inputs is empty
    if ($("#name").val().length == 0) {
        //Missing name alert
        $("#errors").val('Missing product name');
        break;
    } else if ($("#price").val() == 0) {
        //Missing price alert
        $("#errors").val('Missing price');
        break;
    }

    //Get values from text inputs
    productName = $("#name").val();
    price = $("#price").val();

    //Check radio buttons and assign values
    if ($('input[value = "true"]'.is(':checked')) {
        onStack = "Product available";
    } else if ('input[value = "false"]'.is(':checked') {
        onStack = "Not available";
    }

    //Add values to table
    $("table tr:last").after("<tr><td>$productName</td><td>$price</td><td>$onStack</td></tr>");
    });
});

HTML コード:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<body>
    <form method="" action="">
        <input type="text" id="name" placeholder="Product name" />
        <br />
        <input type="text" id="price" placeholder="Price" />
        <br/>
        <input type="radio" name="stack" value="true">Product available
        <br />
        <input type="radio" name="stack" value="false">Product not available
        <br />
        <input type="submit" value="Submit">
    </form>
    <div id="errors"></div>
    <br />
    <table border="1">
        <tr>
            <th>Product name</th>
            <th>Price</th>
            <th>Stack</th>
        </tr>
    </table>
    <div id="sumOnStack">Sum of available products</div>
    <div id="SumNotOnStack">Sum of unavailable products</div>
    <input type="button" id="resetForm" value="Reset form" />
    <br />
</body>
</html>
4

1 に答える 1

0 
$(document).ready(function () {

    //Global variables
    var productName = "";
    var price = 0;
    var onStack = "N/A";

    $("body > form").submit(function ( e) {
        //Check if any of requested inputs is empty
         $("#errors").html('');
        if ($("#name").val().length == 0) {
            //Missing name alert
            $("#errors").html('Missing product name');
            return false;

        } else if ($("#price").val() == 0) {
            //Missing price alert
            $("#errors").html('Missing price');
            return false;
        } else if($('input[name="stack"]:checked').length == 0) {
            $("#errors").html('Missing product availibility');
            return false;

        }

        //Get values from text inputs
        productName = $("#name").val();
        price = $("#price").val();
        var stack = $('input[name="stack"]:checked');
        console.log( $(stack).val() );
        //Check radio buttons and assign values
        if ($(stack).val() == 'true') {
            onStack = "Product available";
        } else {
            onStack = "Not available";
        }

        //Add values to table
        $("table tr:last").after("<tr><td>"+productName+"</td><td>"+ price +"</td><td>"+ onStack +"</td></tr>");
        return false;
        });
    });

これを試してください。上記のコードが役立つことを願っています。

于 2013-05-24T12:20:04.250 に答える