Question

I'm a javascript/jQuery No0b and looking to use the addEventListener to print progress in a summary page. this is a 4 tabbed form.

HTML:

<table>
  <tr>
    <td id="summaryCustomerName"></td>
    <td id="summaryAccountManager"></td>
    <td id="summaryDescription"></td>
  </tr>
  <tr>
    <td id="summaryAccountCoordinator1"></td>
    <td></td>
    <td></td>
  </tr>
</table>

Portion of JS:

(function(){
  $(document).ready(function () {
    if (window.addEventListener) {
  document.getElementById("accountCoordinator1").addEventListener("change", accountCoordinator1GV, false);

  } 
  else if (window.attachEvent) {
  document.getElementById("accountCoordinator1").attachEvent("change", accountCoordinator1GV);
  }
});

This works just fine, I am trying to get ONLY the customerDescription portion into a <div class='summaryDIV'> + customerDescription + </div>

The portion I am having problems with:

var accountCoordinator1GV = function () {
    var accountCoordinator1GV = "<h3>Account Coordinator</h3>" + "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
    accountCoordinator1GV += document.getElementById("accountCoordinator1").value;
    document.getElementById("summaryAccountCoordinator1").innerHTML = accountCoordinator1GV;
};

I've tried other methods such as:

 var accountCoordinator1GV = function () {
    var accountCoordinator1GV = $("#accountCoordinator1").val();
    var ac1DIV = "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
    $("#summaryAccountCoordinator1").append(ac1DIV);
};

HELP! What am I doing wrong?

Here is the code as it's whole function:

(function(){

$(document).ready(function () {
    if (window.addEventListener) {
        document.getElementById("customerName").addEventListener("change", customerNameGV, false);
        document.getElementById("accountManager").addEventListener("change", accountManagerGV, false);
        document.getElementById("customerDescription").addEventListener("change", customerDescriptionGV, false);
        document.getElementById("accountCoordinator1").addEventListener("change", accountCoordinator1GV, false);
        document.getElementById("ContactSubmitButton").addEventListener("click", CompanyContacts, false);

    } else if (window.attachEvent) {
        document.getElementById("customerName").attachEvent("change", generalInformation);
        document.getElementById("accountManager").attachEvent("change", accountManagerGV);
        document.getElementById("customerDescription").attachEvent("change", customerDescriptionGV);
        document.getElementById("accountCoordinator1").attachEvent("change", accountCoordinator1GV);
        document.getElementById("ContactSubmitButton").attachEvent("click", CompanyContacts);
    }
});

var customerNameGV = function () {
    var customerNameGV = "<h3>Customer Name</h3>";
    customerNameGV += document.getElementById("customerName").value;
        document.getElementById("summaryCustomerName").innerHTML = customerNameGV;
};

var accountManagerGV = function () {
    var accountManagerGV = "<h3>Account Manager</h3>";
        accountManagerGV += document.getElementById("accountManager").value;
        document.getElementById("summaryAccountManager").innerHTML = accountManagerGV;
};

var customerDescriptionGV = function () {
    var customerDescriptionGV = "<h3>Customer Description</h3>";
    customerDescriptionGV += document.getElementById("customerDescription").value;
    document.getElementById("summaryDescription").innerHTML = customerDescriptionGV;
};

var accountCoordinator1GV = function () {
    var accountCoordinator1GV = "<h3>Account Coordinator</h3>" + "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
    accountCoordinator1GV += document.getElementById("accountCoordinator1").value;
    document.getElementById("summaryAccountCoordinator1").innerHTML = accountCoordinator1GV;
};

var accountCoordinator1GV = function () {
    var accountCoordinator1GV = $("#accountCoordinator1").val();
    var ac1DIV = "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
    $("#summaryAccountCoordinator1").append(ac1DIV);
};

})();
Was it helpful?

Solution

wrap

var ac1DIV = "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";

as

var ac1DIV = $("<div class='summaryDIV'>" + accountCoordinator1GV + "</div>");

try

var accountCoordinator1GV = function () {
    var accountCoordinator1GV = $("#accountCoordinator1").val();
    var ac1DIV = $("<div class='summaryDIV'>" + accountCoordinator1GV + "</div>");
    $("#summaryAccountCoordinator1").append(ac1DIV);
};

OTHER TIPS

Thanks! This is what I did to resolve the issue, stupid mistake, thanks a TON for the catch!

var accountCoordinator1GV = function () {
    var accountCoordinator1GV = $("#accountCoordinator1").val();
    var ac1DIV = $("<h3>Account Coordinator</h3>" + "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>");
    $("#summaryAccountCoordinator1").append(ac1DIV);
};
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top