Question

一直试图收集输入到尚未提交的输入字段的数据，并将该数据发布到另一个div按下按钮。

这可以通过脚本实现吗？

HTML

<form>
    <div class="div1"><input type="text" name="data1"></div>

    <div class="div2"><input type="text" name="data2"></div>

    <div class=submitformbutton" type="submit" name="submit" ></div>

</form>


<div class="capture_button"></div>
<div class="divoutput"> list data captured here </div>

Answer 1

目前还不清楚你要做什么，但这只是将数据从输入字段移出到你的输出区域。这样做不需要AJAX或表单提交。

＆＃13;

package main

import (
    "fmt"
    "log"
    "os/exec"
)

func main() {
    cmd := exec.Command("program") // or whatever the program is
    cmd.Dir = "C:/usr/bin"         // or whatever directory it's in
    out, err := cmd.Output()
    if err != nil {
        log.Fatal(err)
    } else {
        fmt.Printf("%s", out);
    }
}

＆＃13;

// Get references to the DOM elements we'll need to use
var frm = document.querySelector("form");
var capBtn = document.querySelector(".capture_button");
var out = document.querySelector(".divoutput");

// Set up click event handler for capture button
capBtn.addEventListener("click", function(){
  var outputString = "<ul>";

  // Loop through form elements and write data to output area
  for(var i = 0; i < frm.elements.length; i++){
    // Ignore the submit button
    if(frm.elements[i].type !== "submit"){
      outputString += "<li>" + frm.elements[i].name + " = " + frm.elements[i].value + "</li>";
    }
  }
  
  out.innerHTML = outputString + "</ul>";
  
  // Show the submit button for further processing
  document.querySelector(".submitformbutton").classList.remove("hidden");
  
  // Hide the capture button
  this.classList.add("hidden");
});

＆＃13;

.capture_button { 
  border:1px solid black;
  background-color:#e0e0e0;
  display:inline-block;
  margin:5px 0;
  padding:3px;
  cursor:pointer;
}

.hidden { visibility:hidden; }

＆＃13;

Answer 2

您可以使用此脚本。

$(".capture_button").click(function() {
     var data1 = $("[name='data1']").val();
     var data2 =  $("[name='data2']").val();

     $(".divoutput").append(data1+ " " + data2);//or you can use html instead of append

});

我希望，这个脚本可以解决你的问题。

从输入字段捕获数据

2 个答案: