CODEWITHSUNDEEP
javascripthtml
Lanibox
Lanibox

Reputation: 43

How to split and insert dropdown box value to 2 text inputs with javascript?

When users select value at dropdown list, it should split that value and give it to 2 text inputs, could somebody help me with this? I hav no idea how to do this...

            <div class="formitem">
          <p style="float:left; width:300px;">Select Ad Size: <em>*</em></p>
          <select class="formitem" id="s7" style="float:left;" name="size">
            <option value="0;0">Custom</option>
            <option value="300;250">Medium Rectangle (300x250)</option>
            <option value="250;250">Square Pop-Up (250x250)</option>
            <option value="240;400">Vertical Rectangle (240x400)</option>
            <option value="336;280">Large Rectangle (336x280)</option>
            <option value="180;150">Rectangle (180x150)</option>
            <option value="300;100">3:1 Rectangle (300x100)</option>
            <option value="720;300">Pop-Under (720x300)</option>
            <option value="468;60">Full banner (468x60)</option>
            <option value="234;60">Half banner (234x60)</option>
            <option value="88;31">Micro bar (88x31)</option>
            <option value="120;90">Button 1 (120x90)</option>
            <option value="120;60">Button 2 (120x60)</option>
            <option value="120;240">Vertical banner (120x240)</option>
            <option value="125;125">Square button (125x125)</option>
            <option value="728;90">Leaderboard (728x90)</option>
            <option value="160;600">Wide skyscraper (160x600)</option>
            <option value="120;600">Skyscraper (120x600)</option>
            <option value="300;600">Half page ad (300x600)</option>
          </select>
        </div>
        <div class="specialitem" style="height:90px;">
          <p style="float:left; width:100px;">Width: <em>*</em></p>
          <input type="text" name="widthbox" id="widthbox" class="textInput text-p5" style="width:80px;"/>
          <p style="float:right;">px</p>
        </div>
        <div class="specialitem last" style="height:90px;">
          <p style="float:left; width:100px;">Height: <em>*</em></p>
          <input type="text" name="heightbox" id="heightbox" class="textInput text-p5" style="width:80px;"/>
          <p style="float:right;">px</p>
        </div>

So if I select "Medium Rectangle (300x250) it should update Widthbox value to 300 and Heightbox value to 250.

Some help would be nice :)

Thanks

Upvotes: 1

Views: 2229

Answers (3)

David Thomas
David Thomas

Reputation: 253396

Just a suggestion, but for a plain JavaScript (no library) version:

function splitToUpdate(source, to1, to2) {
    if (!source || !to1 || !to2) {
        return false;
    }
    else {
        source = source.nodeType == 1 ? source : document.getElementById(source);
        to1 = to1.nodeType == 1 ? to1 : document.getElementById(to1);
        to2 = to2.nodeType == 1 ? to2 : document.getElementById(to2);

        var selOpt = source.selectedIndex,
            vals = source.getElementsByTagName('option')[selOpt].value;
        to1.value = vals.split(';')[0];
        to2.value = vals.split(';')[1];
    }
}

var sel = document.getElementById('s7'),
    opt1 = document.getElementById('widthbox'),
    opt2 = document.getElementById('heightbox');

This can be called as follows, using the node-references:

sel.onchange = function(){
    splitToUpdate(sel, opt1, opt2);
};

JS Fiddle demo.

Or by using the id attributes of the relevant form elements:

sel.onchange = function(){
    splitToUpdate('s7', 'widthbox', 'heightbox');
};

JS Fiddle demo.

Upvotes: 1

Behnam Esmaili
Behnam Esmaili

Reputation: 5967

with jquery you can go this way:

  $("#s7").change(function(){
           var selectedValue = $("option:selected",$(this)).val().split(";");

           $("#widthbox").val(selectedValue[0]);
           $("#heightbox").val(selectedValue[1]);
     });​

check working DEMO

Upvotes: 0

Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

Here is a simple solution, please perform the empty checks etc.

HTML:

<select class="formitem" id="s7" style="float:left;" name="size" onchange="setValue(this)">

JS:

function setValue(dropdown)
{
   document.getElementById("widthbox").value=dropdown.value.split(";")[0];
   document.getElementById("heightbox").value=dropdown.value.split(";")[1];

}

Upvotes: 0

Related Questions