无法发布通过 document.getElementById('div').innerHTML 返回的标签答案

【问题标题】：Unable to post tag returned through document.getElementById('div').innerHTML无法发布通过 document.getElementById('div').innerHTML 返回的标签
【发布时间】：2014-10-13 01:52:03
【问题描述】：

我正在使用带有“是”、“否”或“不适用”选项的几个选择元素来处理此表单。要求每当用户选择是选项时，旁边都会出现一个单独的日期字段。我为此日期字段使用了 HTML DOM document.getElementById("id").innerHTML。一切顺利，但我无法使用 POST 方法将日期值传递给表单操作页面。检查此代码：

    <!-- javascript code -->  
  <script type="text/javascript">

function credit_check(name){
  if(name=='YES')document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
  else document.getElementById('div2').innerHTML='';
}
function employment_check(name){
  if(name=='YES')document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
  else document.getElementById('div3').innerHTML='';
}

</script>



</head>

<body>
<?php include("menu.inc"); ?>  
  <div id="main">

 <table>
<form method="post" action="checkinfo.php">  
       <tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>

       </tr>

    <tr align="center">
    <td><b>Credit Check </b></td>
    <td>  
            <select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
            <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div2"> </div></td>
  </tr>

 <tr align="center">
    <td><b>Employment Check :<font color='red'>*</font></b></td>
    <td>  
            <select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
                <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div3"> </div></td>
    </tr>

    </form>
</table>

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

Demo - 将function credit_check(name) 更改为window.credit_check = function(name)

window.credit_check = function(name){
    if(name=='YES') document.getElementById('div2').innerHTML='Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />';
    else document.getElementById('div2').innerHTML='';
}

window.employment_check = function (name){
    if(name=='YES') document.getElementById('div3').innerHTML='Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />';
    else document.getElementById('div3').innerHTML='';
}

你的脚本没有正确加载，

Uncaught ReferenceError: credit_check is not defined 在您的控制台中显示错误。未定义功能。你可以像上面那样设置你的函数或重新定位你的代码。

【讨论】：

【解决方案2】：

您的代码已经在运行。见http://jsfiddle.net/2wg4u6ut/

确保您的 JavaScript 位于文档的开头部分。您的格式存在一些小问题，<form> 标记属于表格。

您也错过了提交按钮，但它已经在工作了。

【讨论】：

抱歉，我可能在删除额外代码时错误地删除了提交按钮。代码工作得很好。但我无法在 checkinfo.php 上发布用户输入的日期。

【解决方案3】：

在加载时将输入放入 HTML，然后简单地隐藏/显示它们。

    <!-- javascript code -->  
  <script type="text/javascript">

function credit_check(name){
  if(name=='YES')document.getElementById('div2').style.display = 'block';
  else document.getElementById('div2').style.display = 'none';
}
function employment_check(name){
  if(name=='YES')document.getElementById('div3').style.display = 'block';
  else document.getElementById('div3').style.display = 'none';
}

</script>



</head>

<body>
<?php include("menu.inc"); ?>  
  <div id="main">

 <table>
<form method="post" action="checkinfo.php">  
       <tr><td colspan=2><hr/><input type="hidden" name="consultant_id" value="<?php echo $consult_id; ?>"> </td>

       </tr>

    <tr align="center">
    <td><b>Credit Check </b></td>
    <td>  
            <select name="2" onchange="credit_check(this.options[this.selectedIndex].value)">
            <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div2" style="display: none;"> 
            Date: <input type="date" name="credit_check_date" value= "mm/dd/yyyy" />
        </div></td>
  </tr>

 <tr align="center">
    <td><b>Employment Check :<font color='red'>*</font></b></td>
    <td>  
            <select name="3" onchange="employment_check(this.options[this.selectedIndex].value)">
                <option selected="selected">Please select ...</option>
                <option value="YES">Yes</option>
                <option value="NO">No</option>
                <option value="NA">Not Applicable</option>
            </select>
        </td>
        <td> <div id ="div3" style="display: none;"> 
            Date: <input type="date" name="employment_check_date" value= "mm/dd/yyyy" />
        </div></td>
    </tr>

    </form>
</table>

查看jQuery 也是一个好主意，它使这类事情更容易做。

【讨论】：