how to stop user not click combo box untill value comes in combo box

mukeshrasm

Hi

I am creating a website to find car of different make and model.for that i am using two combo box one for car make and other for car model. when user clicks car make combo box and selects say audi then its all model should come in car model combo box which is coming and for that i have used ajax. since it takes one or two second to come record in car model combo box so what i want that during that time user should not able to click that car model combo box.

actually i wanted to do in this way here is url for the link:www.buyacar.co.uk.
the same thing is happening under buy your ideal new car online section

how can i do this.

gits

you may create a transparent div with a zindex that 'overlays' your div in question. therefor you just need to retrieve the coordinates of the node you wnat to overlay and set the position of the overlaying div ... in case you already use any JavaScript framework there should be methods to make that quite easy ... otherwise we could create some code here together :)

kind regards

mukeshrasm

Thanks gits!
I am not using any JavaScript framework and when that transparent div will be called. If you can give some example code to understand me better or any reference url where I can find it.

gits

here is a quickly hacked, quite short and FF-tested version:

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<script type="text/javascript">
 
function maskItem(id) {

    var node   = document.getElementById(id);

    var coords = getCoords(node);
 
    var mask = document.createElement('div');
 
    mask.style.backgroundColor = 'red';

    mask.style.opacity         = '0.5';

    mask.style.position        = 'fixed';
 
    for (var i in coords) {

        mask.style[i] = coords[i] + 'px';

    }
 
    node.parentNode.appendChild(mask);

}
 
function getCoords(node) {

    var coords = {

        top   : node.offsetTop,

        left  : node.offsetLeft,

        height: node.offsetHeight,

        width : node.offsetWidth

    };
 
    return coords;

}
 
</script>

</head>

<body>

    <input type="text" id="myInput" value="foo"/>

    <input type="button" onclick="maskItem('myInput');" value="mask item"/>

</body>

</html>

the getCoords() method might need to be extended to retrieve the correct position and measures in IE, you might have a further look here ... even the mask's css could be adapted with using a transparent image with a progress indicator or whatever ... :)

kind regards

how to stop user not click combo box untill value comes in combo box

re: how to stop user not click combo box untill value comes in combo box

re: how to stop user not click combo box untill value comes in combo box

re: how to stop user not click combo box untill value comes in combo box

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about