javascript - 从不同 div 中的输入值填充文本区域

Question

我正在为我的网站开发上传部分。 当用户想要上传新应用程序时，他们需要填写一个表格，其中包含版本号等。

有 27 种不同的应用程序可以上传。为此我做了一个 while 循环

示例:

<select id="type">
<option value="choose" selected>choose here</option>
<?php

require("Function/applist.php");
while($showtablerow = mysql_fetch_array($showtablequery_result))
{
echo "<option value=".$showtablerow[0].">".$showtablerow[0]."</option>";
}

?>  
</select>   
</div>
<div id="choose" class="add" style="display:none;"></div>


<?php

require("Function/applist.php");
while($showtablerow = mysql_fetch_array($showtablequery_result))
{

    echo "<div class='add' id=".$showtablerow[0]." style='display:none;'><h2 id='amx-label'>".$showtablerow[0]."</h2>
    <div id='formadd' style='opacity:1;'>

    <form name='addamx' id='addamx' method='post'>

        <div id='version' class='uploadform' style='opacity:1;'>
            Version: <input style='opacity:1;' required type='text' name='versie' id='versie' width='3' onchange='process1()' ><br>

        </div>
        <div id='date' class='uploadform' style='opacity:1;'>
            Release Date(yyyy-mm-dd): <input required type='date' style='opacity:1;' size='10' maxlength='10' name='date'  id='date'>

        </div>
    <div id='build' style='opacity:1;'>
            Build By: <input required type='text' style='opacity:1;' size='5' maxlength='25' name='build'  id='build' >


        </div>
        <div id='platform' style='opacity:1;'>
            Platform: <span>32 Bit:</span><input required type='radio' style='opacity:1;' id='platform'  name='platform' value='32bit'>
                  <span>64 Bit:</span><input required type='radio' style='opacity:1;' id='platform'  name='platform' value='63bit'>
        </div>
        <div id='application'>
        <input type='hidden' name='app' value=".$showtablerow[0]." />
        </div>  
        <div id='notes' style='opacity:1;'>
            Release Notes: <textarea id='notess' name='test' onblur='process1()'></textarea>
        </div>

        <div id='uploadfooter' style='opacity:1;'>
            <button type='submit' id='uploadamx' name='uploadamx'>Upload
        </div>  
    </form>


    </div>



</div>";
}
?>

在选择框中，他们选择要上传的应用程序，并根据该选择获得一个表单。

他们在文本区域中写下发行说明。

我希望当他们填写版本号时，该版本号会自动归档到文本区域中。

我使用以下 javascript 得到了这样的效果:

function process1() {
var appname = document.getElementById('type').value;
var version = document.getElementById('versie').value;
var textvalue = "changes for " + appname + " version " + version;

document.getElementById("notess").value = textvalue;

}

该函数仅适用于第一个表单 div 当我在第二个 div 上尝试时，文本区域保持为空，并且第二个 div 的版本号被插入到第一个 div 的文本区域中

我如何制作该函数，以便文本区域仅填充该表单中的版本号？ 有什么想法吗？

编辑***

AboQutiesh 是一个很好的初创公司，它唯一需要的调整是 他写了: onblur='process1(".$showtablerow[0].")' 结果是 onblur='process1(argument)' 这不起作用，因为参数需要 onblur='process1('argument')' 因为它处于 while 循环中，所以我不能只放置“”，因为它会破坏整个 onblure 感谢我的一位大学老师给我指点了 ASCII 表 解决方案:

我将其更改为 onblur=process1('".$showtablerow[0]."')

(删除asccii末尾的;，否则这里不会正确显示) 感谢 AboQutiesh 的启动

Answer 1

你需要为每个文本区域提供不同的 id，就像在 php 中这样:

    <div id='notes' style='opacity:1;'>
        Release Notes: <textarea id='notess_".$showtablerow[0]." name='test' onblur='process1(".$showtablerow[0].")'></textarea>
    </div>

和js中

    function process1(appId) {
     var appname = document.getElementById('type').value;
     var version = document.getElementById('versie').value;
     var textvalue = "changes for " + appname + " version " + version;

    document.getElementById("notess_"+appId).value = textvalue;
}

我认为这就是你所需要的