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函数中。

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

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

如果我只是将整个表单传递到最终提交按钮上的javascript函数，我知道怎么做，但我想知道怎么做按下每个下一个按钮后。

我在每个div（f1，f2，f3）中也会有多个值，但为简单起见，我只包含一个值。

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

Answer 1

希望简单地模拟你的方式。

小提琴：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;
}

Answer 2

根据我的假设，这就是你要找的东西： Multipart form handler

基本上我用类

连接了每个按钮

<button id = "next1" type="button" class="check-btn">Next</button>

然后我使用Jquery获取所有这些按钮并找到父div（基于您的结构），然后获取所有子输入（可以包括选择等）。从这里开始，您可以继续调整以检查每种类型的输入等。

$(document).ready(function(){
    $('.check-btn').on('click',function(){
        var parent = $(this).parent('div');
        var elems = parent.find('input');
        alert(elems.length);
        //DO checks here for each element
    });
});

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

2 个答案: