HTML 通过表单提交更改元素

Question

您好，我是 JavaScript 的新手，在为项目创建网页时遇到了问题。我有一个 table，如下所示：

<div class = "frame3" id = "frame3">
        <table id = "info_table" style = "width:100%">
            <tr>
                <th>Linie</th>
                <th>Start Datum</th> 
                <th>End Datum</th>
            </tr>
            <tr>
                <td id = "linie">24</td>
                <td id = "start">01.02.2020</td>
                <td id = "end">01.02.2020</td>
            </tr>
        </table>
    </div>

我有一个如下所示的表格：

<div class = "searchbar" id = "searchbar">
        <form onSubmit = "return process();">
            
            <label for = "label">Linie:</label>
            <input type = "number" id = "label" placeholder = "Linie">
            
            <label for = "time_start">Von:</label>
            <input type = date id = "time_start" name = "time_start">
            
            <label for = "time_start">Bis:</label>
            <input type = date id = "time_end" name = "time_end">

            <input type = "submit" id = "submit">
        </form>
    </div>

我希望表单提交替换table中的元素。我的想法如下，但是提交后，没有任何变化。如果有人知道我错过了什么，那就太好了！

function process(){
        document.getElementById("linie").innerHTML = document.getElementById("label").value;
        document.getElementById("start").innerHTML = document.getElementById("time_start").value;
        document.getElementById("end").innerHTML = document.getElementById("time_end").value;
    };

Answer 1

如果您的函数被调用，您的 DOM 可能会正确更改，但之后页面会刷新，为了防止默认行为，您需要 return false;。以下是有效的：

function process() {
  document.getElementById("linie").innerHTML = document.getElementById("label").value;
  document.getElementById("start").innerHTML = document.getElementById("time_start").value;
  document.getElementById("end").innerHTML = document.getElementById("time_end").value;
  return false;
};

<div class="frame3" id="frame3">
  <table id="info_table" style="width:100%">
    <tr>
      <th>Linie</th>
      <th>Start Datum</th>
      <th>End Datum</th>
    </tr>
    <tr>
      <td id="linie">24</td>
      <td id="start">01.02.2020</td>
      <td id="end">01.02.2020</td>
    </tr>
  </table>
</div>

<form onSubmit="return process();">

  <label for="label">Linie:</label>
  <input type="number" id="label" placeholder="Linie">

  <label for="time_start">Von:</label>
  <input type=d ate id="time_start" name="time_start">

  <label for="time_start">Bis:</label>
  <input type=d ate id="time_end" name="time_end">

  <input type="submit" id="submit">
</form>
</div>

HTML 通过表单提交更改元素

HTML change element via Form submission

html

javascript

dom-events