从 Modal 提交输入到 Div

Question

我希望能够：

1-点击一个 div (1, 2, 3)

2-打开一个模态

3-在模态文本输入中输入文本

4-点击保存

5-在 .item-edit div 中查看该文本

我有多个 div 可以打开带有输入的模式。如何在输入中输入文本以填充 div？

我正在尝试将文本提交到.item-edit div。

这是一个带有多个可点击 div 的示例，这些 div 打开带有文本输入和提交输入的模式：

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  box-sizing: border-box;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
 <div onclick="document.getElementById('id01').style.display='block'" class="grid-item"><div class="box-number">1</div><div class="item-edit"></div><div class="null-object"></div></div>
  <div onclick="document.getElementById('id01').style.display='block'" class="grid-item"><div class="box-number">2</div><div class="item-edit"></div><div class="null-object"></div></div>
  <div onclick="document.getElementById('id01').style.display='block'" class="grid-item"><div class="box-number">3</div><div class="item-edit"></div><div class="null-object"></div></div>
  
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Name</p>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
        <input onclick="document.getElementById('id01').style.display='none'" type="submit" value="SAVE">
      </div>
    </div>
  </div>

Answer 1

看，我声明了一个将值从输入传递到 .item-edit 的函数。

function submitInput(){
    //Get the value from the input
    var text = document.getElementById('fname').value;
    //Assign the value to the .item-edit[item]
    //Item is declared each time you open the modal.
    document.getElementsByClassName('item-edit')[item].innerHTML = text;
}

希望对您有所帮助！

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  box-sizing: border-box;
}

<script>
var item = 0;
</script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
 <div onclick="document.getElementById('id01').style.display='block';item=0;" class="grid-item"><div class="box-number">1</div><div class="item-edit"></div><div class="null-object"></div></div>
  <div onclick="document.getElementById('id01').style.display='block';item=1;" class="grid-item"><div class="box-number">2</div><div class="item-edit"></div><div class="null-object"></div></div>
  <div onclick="document.getElementById('id01').style.display='block';item=2;" class="grid-item"><div class="box-number">3</div><div class="item-edit"></div><div class="null-object"></div></div>
  
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Name</p>
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
        <input onclick="document.getElementById('id01').style.display='none';submitInput()" type="button" value="SAVE">
      </div>
    </div>
  </div>
<script>
function submitInput(){
var text = document.getElementById('fname').value;
document.getElementsByClassName('item-edit')[item].innerHTML = text;
}
</script>

Answer 2

我假设输入文本应该只填充点击的 div。 工作示例here。

我做了两个 JS 函数，并在 HTML 中稍作修改，帮助您解决问题。

showModal：显示模态（id01）并将其data-num属性设置为num参数以知道哪个是被点击的div。

submitModal: 从 modal (id01) 中获取输入，并通过 data-num 属性中的 num 将其放入点击的 div 中。它还会重置输入。

HTML：您需要在具有item-edit 类的div 中添加一个带有数字的id（例如：item-edit-1）以区分每个。这些数字将是showModal 函数中的参数（例如：showModal('1')）。

<script>
    function showModal(num) {

      document.getElementById('id01').style.display='block';
      document.getElementById('id01').setAttribute('data-num', num);
    };

    function submitModal() {

      var inputText = document.getElementById('fname').value;
      var inputFrom = document.getElementById('id01').getAttribute('data-num');

      document.getElementById('fname').value = "";

      document.getElementById('id01').style.display = 'none';
      document.getElementById('item-edit-' + inputFrom).innerHTML = inputText;
    };
</script>

在 HTML 中使用这些函数：

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div onclick="showModal('1')" class="grid-item"><div class="box-number">1</div><div id="item-edit-1" class="item-edit"></div><div class="null-object"></div></div>
<div onclick="showModal('2')" class="grid-item"><div class="box-number">2</div><div id="item-edit-2" class="item-edit"></div><div class="null-object"></div></div>
<div onclick="showModal('3')" class="grid-item"><div class="box-number">3</div><div id="item-edit-3" class="item-edit"></div><div class="null-object"></div></div>

<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
      <p>Name</p>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
      <input onclick="submitModal()" type="submit" value="SAVE">
    </div>
  </div>
</div>