Javascript 打开弹出窗口会使当前窗口中的某些文本区域被禁用_Javascript_Html_Css

Javascript 打开弹出窗口会使当前窗口中的某些文本区域被禁用

javascript html css

Javascript 打开弹出窗口会使当前窗口中的某些文本区域被禁用,javascript,html,css,Javascript,Html,Css,因此，我有一个简单的电子存档系统，一旦我单击“新建”按钮，禁用的文本区域和按钮现在将在单击时启用，但当我尝试单击“销售给”区域附近的另一个按钮时，它会弹出另一个窗口，其中附加了公司的特定详细信息，已启用的文本区域和其他按钮将变为禁用状态，恢复到其原始状态。单击新按钮后，必须始终启用该按钮。你认为问题出在哪里以下是我的全部html代码： <!DOCTYPE html> <html> <head> <title>e-Scan

因此，我有一个简单的电子存档系统，一旦我单击“新建”按钮，禁用的文本区域和按钮现在将在单击时启用，但当我尝试单击“销售给”区域附近的另一个按钮时，它会弹出另一个窗口，其中附加了公司的特定详细信息，已启用的文本区域和其他按钮将变为禁用状态，恢复到其原始状态。单击新按钮后，必须始终启用该按钮。你认为问题出在哪里

以下是我的全部html代码：

<!DOCTYPE html>
<html>
    <head>
        <title>e-Scan Archiving - Accounting</title>
        <link href="main1.css" rel="stylesheet" type="text/css">
        <script type="text/javascript">
            window.resizeTo(900, 600);
        </script>

    </head>

    <body>
        <SCRIPT LANGUAGE="JavaScript"><!--
            function codename(e, elm) {
                if(document.formname.New)
                    {
                        document.formname.Add.disabled=false;
                        document.formname.Cancel.disabled=false;
                        document.formname.SapCode.disabled=false;
                        document.formname.LaneCode.disabled=false;
                        document.formname.SoldTo.disabled=false;
                        document.formname.attachmentSoldto.disabled=false;
                        document.formname.SoldAddress.disabled=false;
                        document.formname.ContactPerson.disabled=false;
                        document.formname.DeliveredTo.disabled=false;
                        document.formname.attachmentDeliveredto.disabled=false;
                        document.formname.DeliveredAddress.disabled=false;
                        document.formname.ContactNumber.disabled=false;
                        document.formname.MySelect.disabled=false;
                        document.formname.referenceNo.disabled=false;
                        document.formname.dateReceived.disabled=false;
                        document.formname.receivedBy.disabled=false;
                        document.formname.Remarks.disabled=false;
                    }

                else
                    {
                        document.formname.Add.disabled=true;
                        document.formname.Cancel.disabled=true;
                        document.formname.SapCode.disabled=true;
                        document.formname.LaneCode.disabled=true;
                        document.formname.SoldTo.disabled=true;
                        document.formname.attachmentSoldto.disabled=true;
                        document.formname.SoldAddress.disabled=true;
                        document.formname.ContactPerson.disabled=true;
                        document.formname.DeliveredTo.disabled=true;
                        document.formname.attachmentDeliveredto.disabled=true;
                        document.formname.DeliveredAddress.disabled=true;
                        document.formname.ContactNumber.disabled=true;
                        document.formname.MySelect.disabled=true;
                        document.formname.referenceNo.disabled=true;
                        document.formname.dateReceived.disabled=true;
                        document.formname.receivedBy.disabled=true;
                        document.formname.Remarks.disabled=true;
                    }

                if(elm.type=='button')
                    {
                        var e = e || window.event;
                        if(e)
                         e.preventDefault()
                        elm.type='submit';
                        elm.value="Save";
                        elm.className= 'btn4';
                        elm.name= "Save";
                    }              
            }

            //window pop for QUERY
            function windowpop(width, height) {
                var leftPosition, topPosition;
                //Allow for borders.
                leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
                //Allow for title and status bars.
                topPosition = (window.screen.height / 2) - ((height / 2) + 50);
                //Open the window.
                window.open("query.html", "Window2", "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
            }

            //window pop for SOLD TO ATTACHMENT
            function windowpop1(width, height) {
                var leftPosition, topPosition;
                //Allow for borders.
                leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
                //Allow for title and status bars.
                topPosition = (window.screen.height / 2) - ((height / 2) + 50);
                //Open the window.
                window.open(".html", "Window2", "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
            }

            //window pop for DELIVERED TO ATTACHMENT
            function windowpop2(width, height) {
                var leftPosition, topPosition;
                //Allow for borders.
                leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
                //Allow for title and status bars.
                topPosition = (window.screen.height / 2) - ((height / 2) + 50);
                //Open the window.
                window.open(".html", "Window2", "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
            }

        //-->
        </SCRIPT>
        <div id="container">
            <form method="post" name="formname">
                <div id="header">
                    <div id="img">
                        <img src="dimensiondata.jpg" alt="dimension data" width="250" height="60">
                    </div>
                    <div id="indexno">
                        <center>Index No.</center>  <input type="text" name="indexNo" size="13"> 
                    </div>                  
                        <input type="button" onclick="codename(event, this)" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px"/>
                        <input type="submit" disabled value="Add" class="btn1" name="Add" style="height: 60px; width: 90px">
                        <button class="btn2" target="_blank" onclick="return windowpop(545, 433)" name="Query" style="height: 60px; width: 90px">Query</button>
                        <input type="submit" disabled value="Cancel" class="btn3" name="Cancel" style="height: 60px; width: 90px">                  
                </div>

                <div id="center">

                        <div id="topleft">                      
                            <b>Category Entry</b><font color="red">*</font>&nbsp    
                                <input type="radio" name="category" value="commercial">Commercial
                                <input type="radio" name="category" value="noncommercial">Non-Commercial<br><br>                        
                        </div>

                        <div id="topright">
                            <div id="topr">
                                Sap Code/SO<br>
                                <input type="text" disabled name="SapCode" size="24">
                            </div>

                            <div id="topl">
                                Lane Box Code<br>
                                <input type="text" disabled name="LaneCode" size="24">
                            </div>
                        </div>

                    <div id="left">
                        Sold To<font color="red">*</font><br>
                        <textarea disabled cols="51" rows="2" name="SoldTo"></textarea><button disabled class="btnA" target="_blank" onclick="return windowpop1(545, 433)" name="attachmentSoldto" style="height: 40px; width: 32px">...</button><br>

                        Sold Address<br>
                        <textarea disabled cols="57" rows="2" name="SoldAddress"></textarea><br>

                        Contact Person<br>
                        <input type="text" disabled name="ContactPerson" size="56">                 
                    </div>

                    <div id="right">
                        Delivered To<br>
                        <textarea disabled cols="51" rows="2" name="DeliveredTo"></textarea><button disabled class="btnA" target="_blank" onclick="return windowpop2(545, 433)" name="attachmentDeliveredto" style="height: 40px; width: 32px">...</button><br>

                        Delivered Address<br>
                        <textarea disabled cols="57" rows="2" name="DeliveredAddress"></textarea><br>

                        Contact Number<br>
                        <input type="text" disabled name="ContactNumber" size="56">                 
                    </div>
                </div>

                <div id="footerleft">
                    <div id="bottomleft">
                        Attachment Value
                    </div>

                    <div id="bottomright">
                        Attachment Type
                    </div>
                </div>

                <div id="footerright">
                    Attachment Type<font color="red">*</font>

                        <select disabled name="MySelect" id="myselect" size="0">
                        </select>

                    Reference Number<font color="red">*</font> <input type="text" disabled name="referenceNo" size="31">

                    Date Received<font color="red">*</font>&nbsp&nbsp&nbsp Received By<font color="red">*</font><br>
                    <input type="text" disabled name="dateReceived" size="12">&nbsp&nbsp&nbsp <input type="text" disabled name="receivedBy" size="34">

                    <table>
                        <tr>
                            <td>Remarks</td> 
                            <td><textarea disabled cols="45" rows="2" name="Remarks"></textarea></td>
                        </tr>
                    </table>

                </div>
            </form>
        </div>
    </body>

</html>

*注意：请不要尝试在JSFIDLE中运行代码，它无法正确运行，请尝试在google chrome中测试它，谢谢

哦，你的代码可能需要很多优化…我的目标是当我点击按钮“新建”按钮时，所有表单都将被启用，然后当我点击按钮时会出现一个弹出窗口。。。按钮，但每次我单击该按钮，弹出窗口就会出现，所有启用的表单都会恢复为禁用状态。它不能再回到残废状态，你认为这有什么不对？

.btn, .btn4{
    margin-left: 395px;
    position: absolute;
    z-index: 1;
}

.btn1{
    margin-left: 490px;
    position: absolute;
    z-index: 1;
}

.btn2{
    margin-left: 585px;
    position: absolute;
    z-index: 1;
}

.btn3{
    margin-left: 680px;
    position: absolute;
    z-index: 1;
}

textarea
{
    resize: none;
}

html *
{
    font-family: Arial, sans-serif;
    font-size: 1;
}


#container
{
    margin: auto;
    width: 49em;
    height: 32em;
    background: #E3E3E3;
    border: 1px solid black;
    padding: 1em;
}


#header
{
    margin: auto;
    width: 48em;
    height: 4em;
    background: #DCDCDC;
    border: 1px solid black;
    padding: 0.5em;
}

#center
{   
    margin: auto;
    width: 48em;
    height: 14em;
    background: #DCDCDC;
    border: 1px solid black;
    margin-top: 0.5em;
    padding: 0.5em;
}


#img
{
    margin-left: 0em;
    width: 250px;
    height: 60px;
    position: absolute;
    z-index: 1;

}

#indexno
{
    margin-left: 16em;
    margin-top: auto;
    height: 45px;
    width: 116px;
    border: 1px solid black;
    padding: 0.4em;
    position: absolute;
    z-index: 1;
    text-align: center;
}

#topleft
{
    clear: left;
    margin-left: 0em;
    float: left;
    height: 2.5em;
    width: 24em;
    background: #DCDCDC;
    padding-top: 0.5em;
}

#topright
{
    float: right;
    height: 3em;
    width: 23.5em;
    background: #DCDCDC;
}

#topl
{
    clear: left;
    height: 3em;
    width: 11em;
    float: left;
    background: #DCDCDC;
}

#topr
{
    height: 3em;
    width: 12em;
    float: right;
    background: #DCDCDC;
}

#left
{
    clear: left;
    width: 23.5em;
    height: 10em;   
    float: left;
    background: #DCDCDC;
}

#right
{
    width: 23.5em;
    height: 10em;
    float: right;
    background: #DCDCDC;
}

#footerleft
{
    margin-top: 0.5em;
    clear: left;
    width: 24em;
    height: 10.5em; 
    float: left;
    background: #DCDCDC;
    border: 1px solid black;
    padding-top: 0.5em;
}

#footerright
{
    padding-top: 0.5em;
    padding-left: 0.5em;
    margin-top: 0.5em;
    width: 23.5em;
    height: 10.5em;
    float: right;
    background: #DCDCDC;
    border: 1px solid black;
}

#bottomleft
{
    clear: left;
    height: 1.5em;
    width: 11.5em;
    float: left;
    background: #DCDCDC;
    padding-left: 0.5em;
}

#bottomright
{
    height: 1.5em;
    width: 11.5em;
    float: right;
    background: #DCDCDC;
    padding-left: 0.5em;
}

#myselect 
{ 
    width: 365px; 
}

.btnA{
    margin-left: 2px;
    position: absolute;
    z-index: 1;
}