Question

我希望能够：

单击一个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;
}

希望有所帮助！

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

我在HTML中创建了两个JS函数和一些修改来帮助您解决问题。

showModal：显示模式（id01）并将其data-num属性设置为num参数，以了解哪个是点击的div。

submitModal：从模态（id01）获取输入，并通过num属性中的data-num将其放入点击的div中。它还会重置输入。

HTML ：您需要将id添加一个数字（例如：item-edit-1）到具有item-edit类的div，以区分每个。这些数字将是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>

将Modal的输入提交到Div

2 个答案: