CODEWITHSUNDEEP
phpjavascripthtml
Brandon McAlees
Brandon McAlees

Reputation: 775

Javascript error: Object #<HTMLFormElement> has no method 'getElementById'

I'm getting a Javascript error: Object # has no method 'getElementById'. I'm trying to have a button that transfers a selected element to another select box in HTML. Have looked everywhere but nobodies solution seems to work for me =\

Javascript

<script language="javascript">
function addDivision()
{
    var selected = document.frmSubmit.getElementById("selectedDivisions");

    var div = document.frmSubmit.getElementById("divisions");
    var divId = div.options[div.selectedIndex].value;
    var divText = div.options[div.selectedIndex].text;

    var newOption = document.frmSubmit.createElement(divId);
    newOption.text = divText;

    selected.add(newOption,null);
}
</script>

HTML

<div id="content">
<form id="frmSubmit" name="frmSubmit" action="">


<div id="Step1Content">
    <h2 style="float:left">Step 1:</h2><p style="float:left; padding-top:10px; padding-left:20px;">Select your divisions</p>
    <div style="clear:both">
        <select id= "divisions" name="divisions" size="8">
    <?  //Getting divisions based on League_id
        $getDivisionsSQL = "Select * FROM level WHERE League_ID = '1' AND disabled = '0'";
        $getDivisionsQuery = $db->Query($getDivisionsSQL);
        while( $divRow = $db->GetRow($getDivisionsQuery) )
        {
            echo "<option id=".$divRow['id'].">".$divRow['description']."</option>";
        }
    ?>
        </select>
    <?  
        echo "<img id='doAdd' width='40px' height='25px' style='position: relative; bottom:75px; cursor:pointer;' src='".$baseImagesPath."greenArrow.png'/>";
        echo "<img id='doAdd' width='40px' height='25px' cursor:pointer; style='position: relative; bottom: 25px; right:40px; cursor:pointer;' src='".$baseImagesPath."redArrow.png'/>";
    ?>  
        <select style="position:relative; right:40px;" name="selectedDivisions" id="selectedDivisions" size="8">
    <?  //List of divisions to use

    ?>  <option>Apple</option>
        </select>
    </div>

</div>





<div style="padding-top:50px; padding-left:50px; width:100%; float:left; ">
    <h2 style="float:left">Step 2:</h2><p style="float:left; padding-top:10px; padding-left:20px;">Select the starting date of games</p>
</div>

<div style="padding-top:50px; padding-left:50px; width:100%; float:left">
    <h2 style="float:left">Step 3:</h2><p style="float:left; padding-top:10px; padding-left:20px;">Select the total number of weeks in the season</p>

<div style="padding-top:50px; width:100%; float:left">
    <input type="submit" value="Create Schedule">
</div>
</div>

</form>
</div>

Upvotes: 4

Views: 4417

Answers (4)

Peter Jirak Eldritch
Peter Jirak Eldritch

Reputation: 821

A form object is of type HTMLFormElement. As already noted you can invoke getElementById on a document but not on an element, including not on an HTMLFormElement.

But a form contains elements and it is reasonable that given an HTML form element object one would want to access specific elements within that form element, so how to do that?

Well, your HTMLFormElement provides a property named elements. Accessing the elements on your HTMLFormElement yields a HTMLFormControlsCollection which contains the elements found within your form. HTMLFormControlsCollection is derived from the type HTMLCollection. There is one read-only property for an HTMLFormControlsCollection and two methods.

The property is length which returns the count of elements found within the collection (which in this case would be elements in your form element).

The two methods are:

  • item(index) - which returns the specific node at the specified zero-based index. Returns null if index is out of range.
  • namedItem(id) - Returns the specific node whose ID or, as a fallback, name matches the string specified by id. Matching by name is only done as a last resort, only in HTML, and only if the referenced element supports the name attribute. Returns null if no node exists by the given id/name.

So thge solution if one has a form object of type HTMLFormElement is to access the object's elements property, invoke namedItem( id ) on it using the id of the element you want to retrieve from your HTMLFormElement.

The syntax is:

let element_obj = form_obj.elements.namedItem( id )

Where form_obj is your HTMLFormElement and id is the id of the element in the form that you want to access.

Upvotes: 2

Cavanaugh Sean
Cavanaugh Sean

Reputation: 1

I would try to use jQuery for this. You can just grab the the element you want from one select and append it to the other.

    $('#selectedDivisions').append($('#divisions'));

Upvotes: 0

Marlon Bernardes
Marlon Bernardes

Reputation: 13843

This problem is happening because you're trying to use getElementById from a node element, and this method belongs to document. It's logical when you think about it: IDs are supposed to be unique inside your page, so there is no point in using a dom element in order to "filter" an element by id.

So, if you change from:

document.frmSubmit.getElementById("selectedDivisions");

to:

document.getElementById("selectedDivisions");

everything should work as expected.

As a sidenote, getElementsByTagName and getElementsByClassName are supported for node elements - they are used to select all the child nodes which match the name of the tag/class specified.

Check API reference: https://developer.mozilla.org/en-US/docs/Web/API/element

Upvotes: 5

Jeff Noel
Jeff Noel

Reputation: 7618

You are trying to use a function which belongs to a DOMDocument, not a DOMElement (MDN).

document.getElemendById()

The valid version of your code is actualy:

document.getElementById("selectedDivisions");

Note: ID attribute should be unique, which means if two or more elements have the same ID in your document, the page is considered invalid by W3c.

Upvotes: 0

Related Questions