Question

I’m trying to build a simple HTML to Flash communicator for a project, it’s working fine in Firefox, but I keep on getting an “Object doesn’t support this property or method” error in IE.

The line it says the error is having is
document.getElementById("flashTest").sendValFromHtml(form.connection.value, form.location.value, form.postcode.value);

Can someone please shed some light on this situation?

<script type="text/javascript">
    function submitFlashCheck() {
        var form = document.getElementById("formTest");
        var hasConnection = form.connection.value.length != 0; 
        var hasLocation = form.location.value.length != 0;

        document.getElementById("connection").className = hasConnection ? "" : "invalid";
        document.getElementById("location").className = hasLocation ? "" : "invalid";

        if(hasConnection && hasLocation){
            //apparently causing error:
            document.getElementById("flashTest").sendValFromHtml(form.connection.value, form.location.value, form.postcode.value);                              
        }
    }
</script>


<div class="test mb-20">
    <form id="formTest" name="formTest" method="post" action="">
        <fieldset class="form">
            <div class="connection">
                <label id="connection">Connection:*</label>
                <div class="textwrapper">
                    <select name="connection">
                        <option value="">Select connection</option>
                        <option value="">----------------------</option>
                        <option value="100">100</option>
                        <option value="200">200</option>
                        <option value="500">500</option>
                    </select>
                </div>
            </div>
            <div class="location">
                <label id="location">Location*:</label>
                <div class="textwrapper">
                    <select name="location">
                        <option value="">Select your location</option>
                        <option value="">----------------------</option>
                        <option value="syd">Sydney</option>
                        <option value="melb">Melbourne</option>
                        <option value="can">Canberra</option>
                        <option value="bris">Brisban</option>
                    </select>
                </div>
            </div>
            <div class="postcode">
                <label>Postcode:</label>
                <div class="textwrapper">
                    <input type="text" name="postcode" id="postcode">
                </div>
            </div>
            <div class="start clear">
                <input class="button" type="button" name="sendToFlash" id="sendToFlash" value="Start Test" onclick="submitFlashCheck();" />
            </div>
        </fieldset>
    </form>

The Flash:

<embed src="/flash/proj-3.swf" id="flashTest" name="flashTest" width="540" height="320" allowscriptaccess="always" type="application/x-shockwave-flash"  flashvars="jsfunc=pushResults&jsfunc2=showExtras" />

Answer 1

I have a feeling that IE does not like the <embed> element (still searching for references). Try this markup (lifted from the SWFObject documentation)

<object id="flashTest"
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="540"
        height="320"
        allowscriptaccess="always"
        flashvars="jsfunc=pushResults&jsfunc2=showExtras">
    <param name="movie" value="/flash/proj-3.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash"
            data="/flash/proj-3.swf"
            width="540"
            height="320"
            allowscriptaccess="always"
            flashvars="jsfunc=pushResults&jsfunc2=showExtras">
    <!--<![endif]-->
        <p>Alternative content</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>