JavaScript 隐藏一个 HTML 表单的提交按钮直到从另一个输入提交

Question

我能够让表单的输入之一从隐藏状态变为提交状态，但无法进行第二次尝试。因此，我相信我在球场上。

<?php include("rssUploadFile_code.php"); ?>

<section class="article_centered">
  <h2>RSS File Upload</h2>
  <form action="" method="post" enctype="multipart/form-data">
    <label for="fileToUpload">Upload RSS file:</label>
    <input type='file' name='fileToUpload' id='fileToUpload' /><br />
    <input type="hidden" name="openFile" id="openFile" value="Open File" /><br />
    <textarea name="displayFile" rows="6" cols="60" readonly="readonly">
                        <?php echo $fileText; ?></textarea><br />
    <input type="text" value="<?php echo $my_rssFile; ?>" /><br />
    <input type="hidden" name="submitFile" id="submitFile" value="Submit File" />
  </form>
  <script>
    document.getElementById('fileToUpload').onchange = function() {
      document.getElementById('openFile').setAttribute('type', 'submit');
    };
    document.getElementById('openFile').onsubmit = function() {
      document.getElementById('submitFile').setAttribute('type', 'submit');
    };
  </script>
</section>

'openFile' 输入有效并从隐藏状态变为通过 fileToUpload onchange 提交。问题是我在 'submitFile' 输入中遗漏了什么？

我读过类似的帖子，那是我从中获取一些代码的地方。如果您需要更多代码，请告诉我。此 RSS 编码有几个文件。感谢您的协助。

Answer 1

用hidden输入type="button，然后触发点击。

<section class="article_centered">
  <h2>RSS File Upload</h2>
  <form action="" method="post" enctype="multipart/form-data">
    <label for="fileToUpload">Upload RSS file:</label>
    <input type='file' name='fileToUpload' id='fileToUpload' /><br />
    <input type="hidden" name="openFile" id="openFile" value="Open File" /><br />
    <textarea name="displayFile" rows="6" cols="60" readonly="readonly">
                        <?php echo $fileText; ?></textarea><br />
    <input type="text" value="<?php echo $my_rssFile; ?>" /><br />
    <input type="button" name="submitFile" id="submitFile" value="Submit File" hidden/>
  </form>
  <script>
    document.getElementById('fileToUpload').onchange = function() {
      document.getElementById('openFile').setAttribute('type', 'submit');
    };
    document.getElementById('openFile').onsubmit = function() {
      document.getElementById('submitFile').click();
    };
  </script>
</section>

Answer 2

因为 submit 实际上只是为 <form> 保留的，您可以改用 .onclick。

(function() {
      document.getElementById('fileToUpload').onchange = function() {
      document.getElementById('openFile').setAttribute('type', 'submit');
    };
    document.getElementById('openFile').onclick = function() {
      document.getElementById('submitFile').setAttribute('type', 'submit');
    };
})();

<input type='file' name='fileToUpload' id='fileToUpload' /><br />

<input type="hidden" name="openFile" id="openFile" value="Open File" /><br />
<textarea name="displayFile" rows="6" cols="60" readonly="readonly">
                        <?php echo $fileText; ?></textarea><br />
<input type="text" value="<?php echo $my_rssFile; ?>" /><br />
<input type="hidden" name="submitFile" id="submitFile" value="Submit File" />

Answer 3

请原谅我的英语。

问题是一个表单只能有一个提交按钮。

您不应将 openFile 按钮设置为提交按钮，而是使用 onclick 事件。

看看下面的代码我检查它工作正常

<section class="article_centered">
  <h2>RSS File Upload</h2>
  <form action="" method="post" enctype="multipart/form-data">
    <label for="fileToUpload">Upload RSS file:</label>
    <input type='file' name='fileToUpload' id='fileToUpload' /><br />
    <input type="hidden" name="openFile" id="openFile" value="Open File" /><br />
    <textarea name="displayFile" rows="6" cols="60" readonly="readonly">
                        Text</textarea><br />
    <input type="text" value="Rss File" /><br />

    <input type="hidden" style="" name="submitFile" id="submitFile" value="Submit File" />
  </form>
  <script>
    document.getElementById('fileToUpload').onchange = function() {
      document.getElementById('openFile').setAttribute('type', 'button');
    };
    document.getElementById('openFile').onclick = function() {
      document.getElementById('submitFile').setAttribute('type', 'submit');
    };
  </script>
</section>

抱歉解释不当。

JavaScript 隐藏一个 HTML 表单的提交按钮直到从另一个输入提交

JavaScript Hiding an HTML Form's Submit Button until onsubmit from another input

javascript

html

input

form-submit

onsubmit