javascript - 将值从单独的 div 传递到 JavaScript 函数

Question

我有一个表单，其中包含三个独立的 div。

<form method="post">
    <div id = "f1">
        <div class="label">Value 1:</div>
            <input type="text" name="name"/>
            <button id = "next1" type="button" onclick="checkValue()">Next</button>
        </div>
    <div id ="f2">
        <div class="label">Value 2:</div><br>
            <input type="text" name="name"/>
            <button type="button" onclick="checkValue()">Next</button><br>
        </div>
    <div id ="f3">
        <div class="label">Value 3:</div><br>
        <input type="text" name="name"/>
        <button type="button" onclick="checkValue()">Next</button><br>
    </div>
</div>
</form>

在我的 JavaScript 函数中。

当下一个按钮时，我在每个div上附加了fadein和fadeout被按下。当按下“next1”button时，第一个div将淡出，第二个div将淡入。

我想检查当用户按下第一个下一个按钮时在第一个 div 中输入的值。

如果我只是将整个表单传递到最终提交按钮上的 javascript 函数中，我知道如何执行此操作，但我会想知道在按下每个下一个按钮后如何执行此操作。

我还将在每个 div(f1、f2、f3)中拥有多个值，但为了简单起见，我只包含一个值。

编辑*:进一步解释如果我通过将表单传递到 checkValue 来做到这一点。我可以只执行 onsubmit = "checkValue()"。然后在我的 JS 文件中，我只包含 checkValue(form) 作为其参数。如果我想在按下每个按钮后进行检查，我不知道如何执行此操作或将什么作为其参数传递。

Answer 1

简单的模型希望能帮助您找到自己的方式。

fiddle :http://jsfiddle.net/AtheistP3ace/krr3tgLx/1/

HTML:

<form method="post">
    <div id="f1" style="display: block;">
        <div class="label">Value 1:</div>
        <input type="text" name="name" />
        <button id="next1" type="button" onclick="checkValue(this)">Next</button>
    </div>
    <div id="f2">
        <div class="label">Value 2:</div>
        <br>
        <input type="text" name="name" />
        <button type="button" onclick="checkValue(this)">Next</button>
            <br>
    </div>
    <div id="f3">
        <div class="label">Value 3:</div>
        <br>
        <input type="text" name="name" />
        <button type="button" onclick="checkValue(this)">Next</button>
            <br>
    </div>
    </div>
</form>

JS:

function checkValue (button) {
    // Finds the sibling input of the button
    var input = $(button).siblings('input');
    // Gets input value
    var value = input.val();
    // Stops showing next div if no value
    if (value == '') {
        return false;
    }
    else {
        // Finds the parent div holding button and input
        var div = $(button).closest('div');
        // Fades out current div
        div.fadeOut();
        // Gets next div and fades it in
        div.next().fadeIn();
    }
}

CSS:

form > div {
    display: none;
}