javascript not returning the value of a text input

Question

I have this field on my screen which is a text input field, but when I try to access the value from JS it returns null

Below I've attached a screen shot where you can see that Chrome has the value stored (see left panel) and that JavaScript could not get the value (bottom panel) and the top half of the bottom panel you can see the html code.

Now I am also not sure if this will help but the fields are created dynamically using PHP, and the script is registered at the top of the html document. And there is only one of the fields with that name on my HTML Page

FULL HTML CODE

<body>
<link href="Objects.css" rel="stylesheet" type="text/css">
<script src="eFarmClicks.js"></script>
<div class="ContentPanel"><label class="HeadingLabel">ADD GROUP</label>
    <table>
        <tbody>
            <tr>
                 <td><label>GROUP NAME</label></td>
                 <td><input type="text" name="edtGroupName"></td>
            </tr>
            <tr>
                <td><label>MAX ANIMALS</label></td>
                <td><input type="text" name="edtMaxAnimal"></td>
            </tr>
            <tr>
                <td><label>MAX MALE ANIMALS</label></td>
                <td><input type="text" name="edtMaxMAnimal"></td>
            </tr>
            <tr>
                <td><label>MAX FEMALE ANIMALS</label></td>
                <td><input type="text" name="edtMaxFAnimal"></td>
            </tr>
        </tbody>
    </table>
    <input type="submit" name="btnSubmitAddGroup" value="Add Group" onclick="btnSubmitAddGroup_click()" ;="" onmousemove="mousemove(this)" onmouseout="mouseout(this)" style="background-color: green;">
</div>
</body>

Sorry about the way the code pasted. It was copied directly out of chrome.

屏幕截图

** edit **

My javascript code :

function btnSubmitAddGroup_click(){
var xmlhttp = new XMLHttpRequest();
var groupname = document.getElementsByName('edtGroupName').item(0).value;
var max1 = document.getElementsByName('edtMaxAnimal').item(0).value;
var max2 = document.getElementsByName('edtMaxMAnimal').item(0).value;
var max3 = document.getElementsByName('edtMaxFAnimal').item(0).value;
alert(max1); // to test the value
};

** mouse move functions **

function mousemove(obj){
    if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue")
    {document.getElementsByName(obj.name).item(0).style.backgroundColor="Green";};
};

function mouseout(obj){
    if(document.getElementsByName(obj.name).item(0).style.backgroundColor!="blue"){
        document.getElementsByName(obj.name).item(0).style.backgroundColor="transparent";
    };
};

****EDIT 4 OF TODAY**

(ALSO IN MY COMMENTS)

Guys, how will this impact my code? I just realized it might be relevant to mention that the edits are in an iframe. I realized this might be relevant when I checked this command document.getElementsByTagName('input')

Answer 1

okay i found the problem, and i would like to thank This link and This Link for helping me get to the answer.

Okay so this was the actual problem:

The iframe is created dynamically
and the inputs were in the iframe (which i at first didnt feel the need to say in the original question)
but after some further research and review i found that this was the cause of the problem

I assume its because the input was in the iframe which is a seperate document (and i still stand under correction). So the actual code to get the value was

document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value

which could also be solved using the methods mentioned in the links.

for all beginners with js this is what the code does:

//this gets the i frame of the current page
document.getElementById('content')
// this is the document (or if you will, the page loaded in the iframe)
document.getElementById('content').contentDocument
//this gets my edit on my page of the frame
document.getElementById('content').contentDocument.getElementsByName('edtGroupName')
// and this simply gets the input value
document.getElementById('content').contentDocument.getElementsByName('edtGroupName').item(0).value

javascript not returning the value of a text input

Question

1 answers

solution1
0 ACCPTED 2013-09-09 13:28:24

javascript not returning the value of a text input

Question

1 answers

solution1 0 ACCPTED 2013-09-09 13:28:24

solution1
0 ACCPTED 2013-09-09 13:28:24