Variables in javascript, auto populate form

Question

I'm having problem receiving more than 8 values from javascript on this script... It should auto populate fields on dropdown option (select), it does work properly, but i can't get more than 8 values... Where's the problem? THanks!

<script type="text/javascript">
    // Format of StoreDetails()
    // Name,Addr1,Addr2,Addr3,Phone,FAX,Email,Webpage, Url
    var StoreDetails = [
        ['Please select','','','','','','','',''],
        ['Please select','test1','test2','test3','test4','test5','test6','test7','test8']
        // Note: no comma
    ];
    function Setup(TA) {
        var str = "<select id='Store' class='styled-select' onchange='StoreInfo()'>";
        for (var i=0; i<StoreDetails.length; i++) {
            str += '<option value="'+StoreDetails[i].join('|')+'">'+StoreDetails[i]   [0]+'</option>';
        }
        str +='</select>';
        document.write(str);
    }
    function StoreInfo() {
        var sel = document.getElementById('Store').selectedIndex;
        var tmp = [];  tmp.push(sel);
        for (var i=1; i<8; i++) { 
            tmp.push(StoreDetails[sel][i]); 
        }
        document.getElementById('txtName').value = tmp[1];
        document.getElementById('txtAddr1').value = tmp[2];
        document.getElementById('txtAddr2').value = tmp[3];
        document.getElementById('txtAddr3').value = tmp[4];
        document.getElementById('txtPhone').value = tmp[5];
        document.getElementById('txtPhone2').value = tmp[6];
        document.getElementById('txtEmail').value = tmp[7];
        document.getElementById('txtWebpage').value = tmp[8];
        document.getElementById('txtUrl').value = tmp[9];
    }
</script>
</head>
<body>
    <div class="container">     
       <header class="clearfix">            
          <img src="logo.png"/>
          <nav class="codrops-demos">
             <a class="current-demo" href="index.php">Some text</a>
          </nav>                
       </header>
       <section class="main clearfix">
           <div class="fleft">
               <p>Da bi porucili vizit karte, izaberite ime i kolicinu, zatim potvrdite.</p>
           </div>
           <div class="fleft">
           <form id="testconfirmJQ" name="testconfirmJQ" method="post" action="output.php">
<script type="text/javascript">Setup();</script>
    <table border="0">
       <input type="text"  hidden="hidden"  id="txtName" name="txtName" size="30" value="">    </td></tr>
       <input type="text"  hidden="hidden" id="txtAddr1" name="txtAddr1"  size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtAddr2" name="txtAddr2" size="30" value=""></td></tr>
       <input type="text"  hidden="hidden" id="txtAddr3" name="txtAddr3" size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtPhone" name="txtAddr3" size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtPhone2" name="txtPhone2" size="30" value=""></td></tr>
       <input type="text"  hidden="hidden" id="txtEmail" name="txtEmail" size="30" value=""> </td></tr>
       <input type="text"  hidden="hidden" id="txtUrl" name="txtUrl" size="30" value=""></td> </tr>
     <tr><td>How much?:</td><td><input type="text" id="kolicina" name="kolicina" size="5"  value=""></td></tr>
     <tr><td><input id="submitJQ" name="submitJQ" type="submit" class="styled-button-1"   value="Confirm" /></td></tr>
     </table>
</form>

Can you make a jsfiddle.net of this as it stands not working? By the way your html is invalid. — slinky2000
– slinky2000, Commented May 9, 2013 at 14:01

jterry · Accepted Answer · 2013-05-09 14:01:31Z

2

You're limiting the size of tmp in the for loop (ranging from i = 1 to i < 8). A few changes:

var StoreDetails = [
    ['A store','test1','test2','test3','test4','test5','test6','test7','test8','url']
    // Note: no comma
];

function Setup() {
    var str = "<select id='Store' class='styled-select' onchange='StoreInfo()'>";

    str += '<option disabled="disabled" selected="selected">Please Select</option>';

    for (var i=0; i<StoreDetails.length; i++) {
        str += '<option value="'+StoreDetails[i].join('|')+'">'+StoreDetails[i]   [0]+'</option>';
    }

    str +='</select>';

    document.write(str);
}

function StoreInfo() {
    var sel = document.getElementById('Store').value;

    var values = sel.split("|");

    document.getElementById('txtName').value = values[1];
    document.getElementById('txtAddr1').value = values[2];
    document.getElementById('txtAddr2').value = values[3];
    document.getElementById('txtAddr3').value = values[4];
    document.getElementById('txtPhone').value = values[5];
    document.getElementById('txtPhone2').value = values[6];
    document.getElementById('txtEmail').value = values[7];
    document.getElementById('txtWebpage').value = values[8];
    document.getElementById('txtUrl').value = values[9];
}

Setup();

...and the form:

<form>
    <input id="txtName" />
    <input id="txtAddr1" />
    <input id="txtAddr2" />
    <input id="txtAddr3" />
    <input id="txtPhone" />
    <input id="txtPhone2" />
    <input id="txtEmail" />
    <input id="txtWebpage" />
    <input id="txtUrl" />
</form>

This code is working in my environment.

edited May 9, 2013 at 14:01

answered May 9, 2013 at 12:44

jterry

6,2473 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jterry Over a year ago

Updated code is working for me - I think part of the problem is that there were only 8 variables in the StoreDetails string beyond the name of the line item :)

Vladimir Cvejic Over a year ago

Joe Terry, do you mind sharing the form as well? For one or other reason it still doesn't work for me, i've tried everything. Thank you.

Vladimir Cvejic Over a year ago

That's it, i was missing whole input field, and i had 8 of them, that's why it couldn't write the data! Thank you very much for making it clear for me. Cheers

Vladimir Cvejic Over a year ago

Just a question regarding this as someone might be helpful as well. I'm trying to change the div content (i have a modal popup that has background image on it, i would like it to change on each selection of dropdown), is it possible somehow with this script i use? Thanks in advance once again.

slinky2000 · Accepted Answer · 2013-05-09 14:15:04Z

0

On the 8th var

document.getElementById('txtWebpage').value = values[8];

but there is no element called "txtWebpage" so by the time it gets to:

document.getElementById('txtUrl').value = values[9];

it's undefined.

Also instead of using the value 8 to count with I would use:

StoreDetails[sel].length

answered May 9, 2013 at 14:15

slinky2000

2,6631 gold badge17 silver badges12 bronze badges

3 Comments

Vladimir Cvejic Over a year ago

Just a question regarding this as someone might be helpful as well. I'm trying to change the div content (i have a modal popup that has background image on it, i would like it to change on each selection of dropdown), is it possible somehow with this script i use? Thanks in advance once again.

slinky2000 Over a year ago

Not related but inside the change function put something like this document.getElementById('modalId').className = "newBackgroundImageCssClass"

Vladimir Cvejic Over a year ago

Do you mind helping me out with that as well? I've fixed the issue i had with this, should i open a new discussion or...? I'm trying to learn this, thanks!:)

Collectives™ on Stack Overflow

Variables in javascript, auto populate form

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related