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>

对不起，不好的解释。