Question

点击按钮，我显示一个带有一个文本区域和一个提交按钮的弹出窗口。

我能够在textarea中输入一个值（例如：＆＃34; hello1＆＃34;），当点击提交按钮时，我正在检查textarea的输入值，它给了我＆＃34; hello1＆＃34;，并淡出弹出窗口。（正如预期的那样）

问题：第二次，我再次点击同一个按钮，我输入了值＆＃34; hello2＆＃34;，提交后，它会显示警报中最后输入的值并淡出。

以下是我的代码：

function onCalChange(cal) {
    // inputField = cal.inputField;
    startDate = cal.date;
    var calVal = this.id;
    popup2(calVal);
}

function popup2(calVal) {
    idValue = calVal.split("-");
    $('.popup2').css('display','block');
    //$('.popup2').addClass('pop_up_bckgd');
    $(".popup2").append("<div class='pop_up_bckgd'></div>");
    $(".popup2").append("<div class='pop_up_container'><form>\n\
\n\
\n\
<label  style='margin-left:65px;margin-top:40px;'class = 'label-value' for = 'reason-for-change-" + idValue[2] + "'>Reason for change</label>\n\
<br>\n\
<textarea id='reasontxt" + idValue[2] + "'style = 'width: 74%;margin-left: 62px;height:100px' class = 'text-box' name = 'reason' required></textarea>\n\
<br>\n\
<div style = 'text-align:center'><input class = 'submit-value2' type = 'button' value = 'Submit' name = 'submit1' onclick= 'clicksubmit(idValue[2]);' '></div ></form>")
}

function clicksubmit(id) {

    var idNum= parseInt(id);

    if ($('#reasontxt' + idNum).val() == "") {
        // alert("1");
        $('#reasontxt' + idNum).next(".validation").remove();
        $('#reasontxt' + idNum).after("<div class='validation' style='color:red;margin-top:5px'>Please enter Reason for change Field</div>");               
    }  else {
        alert('2');
        alert($('#reasontxt' + idNum).val());
        $('#reason' + (idNum)).val($('#reasontxt' + idNum).val());
        //    $('#reasontxt' + idNum).val() == ""
        $('.popup2').fadeOut(); 
    }

}

Answer 1

在erkaner对评论进行了更改后，我能够通过将代码复制到这个JSFiddle中来重现这个问题：http://jsfiddle.net/v2djohhw/（我不得不进行另一个小改动来硬编码{{1}的值用于测试）。

从我看到的，问题是：

每次点击该按钮，弹出窗口都会附加calVal form和textarea按钮（使用submit）;
textarea的$(".popup2").append(...)取决于所点击按钮的id（id）;
所以如果多次点击相同的按钮[或按钮不同但它有calVal第三部分（当你拆分它时只使用第三个值id）匹配之前点击过的按钮之一]，随着时间的推移，您将追加多个idValue[2]，所有这些都会使用相同的textarea。
当您提交并阅读id的值时，因为有多个具有相同的textarea，浏览器将使用指定的{id的值{1}}。
因此，您将始终获得与第一个textarea <。li>相同的值

如何解决？避免使用具有相同id的多个元素。

一种可能的解决方案：每次要显示时都删除textarea框的内容，这样就可以确保文本框的id非常独特而且不会面临意外错误：

.popup2

您可以在此处看到它：http://jsfiddle.net/v2djohhw/1/

如果您不想（或不能）删除id框的内容，并希望显示所有以前的textareas，另一个解决方案是跟踪按钮的次数单击并将该值添加到textarea的id中。这样你就可以确保文本框ID真的是唯一的。

你可以在另一个小提琴上看到它：http://jsfiddle.net/v2djohhw/2/

如果更新了textarea值，则无法填充它？

1 个答案: