CODEWITHSUNDEEP
javascriptjqueryhtml
dummytestuser4
dummytestuser4

Reputation: 3

Not able to populate textarea value if it's updated?

On click of a button, I am showing a popup with one text area and a submit button.

I am able to enter a value in the textarea (e.g.: "hello1"), and when clicking on the submit button, I am checking the textarea's entered value, it gives me "hello1", and fades out the pop up. (as expected)

Issue: the second time, I click the same button again, I entered the value "hello2", and after submitting, it shows me the last entered value in an alert and fades out.

Below is my code:

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

}

Upvotes: 0

Views: 210

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29645

After making he change specified by erkaner on the comments, I was able to reproduce the issue by copying your code into this JSFiddle: http://jsfiddle.net/v2djohhw/ (I had to make another minor change to hardcode the value of calVal for testing).

From what I saw, the issue is:

  • Every time that you click on the button, a form with a textarea and a submit button are appended to the popup (using $(".popup2").append(...));
  • the id of the textarea depends on the id of the button that was clicked (calVal);
  • so if the same button is clicked several times [or the button is different but it has an id which third part (as you are splitting it and only using the third value idValue[2]) matches the one of a previously clicked button], you will be appending multiple textarea over time, all of them with the same id.
  • when you submit, and read the value of the textarea, as there are multiple with the same id, the browser will take the value of the first textarea with the specified id.
  • Because of that you get always the same value that is the one of the first textarea.

How to fix it? Avoid having multiple elements with the same id.

One possible solution: delete the content of the .popup2 box every time you are going to display it, that way you make sure that the id of the textbox is really unique and you don't face unexpected errors:

$(".popup2").html("");

You can see it working here: http://jsfiddle.net/v2djohhw/1/

If you don't want to (or you cannot) delete the content of the .popup2 box, and want to show all the previous textareas, another solution would be keeping track of the number of times the button was clicked and add that value into the id of the textarea. That way you'll make sure the textbox id will be really unique.

You can see it on this other fiddle: http://jsfiddle.net/v2djohhw/2/

Upvotes: 1

Related Questions