将单独的div值传递给javascript函数

我有一个表单中有三个独立的div。将单独的div值传递给javascript函数

<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）作为它的参数。如果我想在每个按钮被按下后进行检查，我不知道如何执行此操作或以什么方式传入参数。

来源

2015-11-19 user3264355

你的问题有点混乱。因此，当您单击输入按钮时，您想知道如何在JavasScript中获取相关输入值？ – Seano666

实施在哪里？你要求太多。至少试一试，当你有任何问题时，你可以在这里问。 –

价值检查会发生什么？如果价值不足以满足您的需求，它会停止显示下一个div吗？另外，添加您的JavaScript功能。 – AtheistP3ace

简单地模拟出希望让你成为你的方式。

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

来源

2015-11-19 20:55:58 AtheistP3ace

感谢您的回答。我会试试这个，但是当我在每个div中有多个输入值时会发生什么。我可以通过使用它们各自的名称属性来表示不同的值吗？ – user3264355

当然只是''（按钮）.siblings（'input [name =“someName”]'）;'为每一个。 – AtheistP3ace

你能解释一下CSS代码吗？窗体> div做什么？感谢您的帮助 – user3264355

从我的假设，这是你在找什么： 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 
    }); 
});

来源

2015-11-19 21:03:53

将单独的div值传递给javascript函数

回答

相关问题