Question

我将使用append()从桌面视图中添加表单并将其添加到移动视图（包括脚本）中。由于Iam在提交表单时为表单元素添加了相同的类名和ID，因此它正在标识移动布局表单，并在尝试使用document.getElementsByClassName('txtbox').value获取值时传递空值。

根据我的要求。我需要在附加时提供索引以标识每种形式。像document.getElementsByClassName('txtbox')[0].value。我已经做了一个相同的方法。但是没有获得如何在添加时增加索引值。我已经为此创建了plunker。请让我知道我错过了什么。

这是示例代码

$(document).ready(function(){
    var data = $(".div1").html();
    $(".div2").append(data);
    $("form").submit(function(){
      
      console.log(document.getElementsByClassName('txtbox').value);
      /*console.log(document.getElementsByClassName('txtbox')[0].value);
      console.log(document.getElementsByClassName('txtbox')[1].value) ; */
    });
  });

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
       <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="script.js"></script>
 
  </head>

  <body>
    <div class="div1">
      // data to be copied
      <form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');">
         <input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
      <input type="submit" name="submit" /></form>
    </div>
    
    <div class="div2">
      //data to be appended
    </div>
  </body>
</html>

Answer 1

您可以使用$(this).find()在表单内选择.txtbox。

$("form").submit(function() {
    console.log($(this).find('.txtbox').val());
    return false; // for debugging
});

另外，请注意id在文档中应该是唯一的。

Answer 2

我已经在函数调用中传递了表单对象，并使用该参数来标识当前表单。

$(document).ready(function(){
    var data = $(".div1").html();
    $(".div2").append(data);
});

function submitForm(form){
  var txtValue = $(form).find('.txtbox').val();
  console.log(txtValue);
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
       <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="script.js"></script>
 
  </head>

  <body>
    <div class="div1">
      // data to be copied
      <form class="search-container" onsubmit="event.preventDefault();submitForm(this);">
         <input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
      <input type="submit" name="submit" /></form>
    </div>
    
    <div class="div2">
      //data to be appended
    </div>
  </body>
</html>

Answer 3

您可以像这样遍历课程列表：

    var txtboxes = document.getElementsByClassName("txtbox");
    for(var i = 0; i < txtboxes.length; i++){
        // ... process each element here
        $(txtboxes[i]).append(data);
    }

如何自动检测具有相同类名的当前表单元素

3 个答案: