Question

I have an application you can use below but basically it is a text input not changing after the user adds information from a row.

Here is the application:

Application

Please follow the steps below:

1: When you open the application, You will see a “Add Question” button, click on this button and you will see a table row appended underneath.

2: Within the appended row, click on the buttons “B” and “C”, these buttons will turn green meaning they are on and underneath you will see 2 text inputs appear showing the values of the buttons you have turned on.

3: You will see a green plus button on the left hand side of the row. Please click on this button and you will see a modal window appear.

4: You will see a search bar in the modal window, in the search bar type in “dog” and then click on the search button.

5: A row will appear which is relevant from your search, please click on the “Add” button on the right hand side to add the info.

6: You will see in the appended row that now button “A” is highlighted and the other buttons are off.

But the problem is that the text inputs underneath has not changed. IT still displays text inputs for values “B” and “C”, which is incorrect, as button “A” is turned on and is the only button turned on, it should only display as text input for button “A”, the other text inputs should be removed.

So my question is that how after the user has added information from the modal window that it changes the text inputs to only display the value of the buttons which are turned on?

Below is the code where it updates the answer buttons:

    updateAnswer(context , iQuestionIndex, bDisableAppend);

    var container = $btn.closest(".optionAndAnswer");
    $(".answertxt", container).val( $(".answerBtnsOn", container).length );

    return false;
}


function updateAnswer(context, iQuestionIndex, bDisableAppend) {
    var _sCurrQ_Class = 'q_' + iQuestionIndex;
    var _oCurrAnswerContainer = jQuery('#answer_selections .' + _sCurrQ_Class);
    if (!_oCurrAnswerContainer.length) {
        _oCurrAnswerContainer = jQuery(document.createElement('div')).addClass(_sCurrQ_Class);
        !bDisableAppend && jQuery('#answer_selections').append(_oCurrAnswerContainer);
    }

    _oCurrAnswerContainer.html('');

    var value, id;
    // loop through all buttons with 'on' status and their info to the current answer container
    $('.answerBtnsOn', context).each(function(i, btn) {

        var $btn = $(btn);
        value = btn.value;
        id = $btn.attr('id');

        var n = $("input[name='" + id + "value']").length;
        var hid = "hidden" + id + n + "value";    
        $(btn).attr("data-hid", hid);


        if (!bDisableAppend) {
            // append those values to the form
            var input = '<input type="text" id="' + hid + '" value="' + value + '" name="' + id + 'value" />';
            _oCurrAnswerContainer.append(input);
        }
    });        
}

Below is the code where it controls the modal window and everything in it:

function addwindow(btn) {

    var answers = $.map(btn.split(''),function(chr){   return "#answer"+chr;  }).join(', 
    var answersrow = $.map(btn.split(''),function(chr){   return "#answer"+chr+"Row";  }).join(', ');
}



    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { //green plus button at top of application


        $('#answerSection').find('.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');

        } else { 
//green plus button within an appended row
            $(plusbutton_clicked).closest('tr').find('.answerBtnsOn').removeClass('answerBtnsOn').addClass('answerBtnsOff');
            $(plusbutton_clicked).closest('tr').find(answersrow).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');

            }

    $.modal.close(); 
    return false;
} 

Answer 1

As I mentioned in a comment, use updateAnswer to update the text inputs.

You need to send in the node that contains all of the buttons for that answer. In the addwindow I think it should be $(plusbutton_clicked).closest('tr'). You also need to send in the question index somehow.

It would perhaps be easier if you attached a few data attributes to some elements to simplify retrieving various values instead of creating classes for each one.