How to Activate the hidden submit with another button using Javascript?

Question

How to Activate the hidden submit with another button using Javascript?

Navigation

#1 by (3 votes)
#2 by (3 votes)
#3 by (0 votes)

1

What I'm looking for is to activate the hidden submit with another button. for example: when the data of a form is filled it will be sent with a Generic button since this generic button evaluates or validates all the fields; therefore I am looking for the generic button to evaluate if there is a file in the (file) and then send all the data of those fields.

NOTE: 1 * I am looking for Validate the (file) to force the user to upload a file 2 * The file must be sent with a generic button that gathers all the fields whose purpose is to validate and send with a single button

    const subir_btn = document.getElementById('subir_btn');
    const send = document.getElementById('send');

    send.addEventListener("click",function () {
    	subir_btn.click();
    });

   <div class="form-group">
       <label class="control-label">Subir Archivo de su Propuesta	</label>
       <div class=""><br>
    	<form name="enviar_archivo_frm" method="POST" action="subir-archivo.php" enctype="multipart/form-data" >
    	     <input type="file" name="archivo_fls" accept=".pdf,.doc">
    	     <input type="submit" id="subir_btn" name="subir_btn" Value="Subir Archivo" hidden="hidden">
    	</form>
   </div>
</div> 
      
<div class="form-group">
   <button class="btn btn-danger btn-lg btn-block" id="send" type="button">GUARDAR DATOS</button>
</div>

javascript html

asked by Gamez 04.06.2018 в 16:45

source

3 answers

3

If I have understood what you want, I would do it in the following way:

Start with the button in charge of sending the form in the deactivated state.
Would make its activation depend on whether there are files selected in the input responsible for collecting the files.

That is the usual practice that we see in the pages that we use every day. In this way, the user is not encouraged to execute actions that would not work or would not be allowed, because the condition (that there are selected files) is not fulfilled.

var inputFile = document.getElementById("ibxFile");
inputFile.addEventListener('change', checkFiles);

function checkFiles(event) {
  var isFilesEmpty = this.files.length == 0 ? true : false;
  var btnEnviar = document.getElementById("send");
  btnEnviar.disabled = isFilesEmpty;

}

<div class="form-group">
  <label class="control-label">Subir Archivo de su Propuesta	</label>
  <div class=""><br>
    <form name="enviar_archivo_frm" method="POST" action="subir-archivo.php" enctype="multipart/form-data">
      <input type="file" id="ibxFile" name="archivo_fls" required accept=".pdf,.doc" />
    </form>
  </div>
</div>

<div class="form-group">
  <button class="btn btn-danger btn-lg btn-block" id="send" type="button" disabled>GUARDAR DATOS</button>
</div>

answered by 04.06.2018 в 19:20

0

I READ HERE VALIDATION WITH JAVASCRIPT

const subir_btn = document.getElementById('subir_btn');
const send = document.getElementById('send');

send.addEventListener("click",function () {
var x = document.getElementById("archivo_fls").value;
if(x.length=='')
	throw new Error('Error: Debes de Asignar un archivo obligatoriamente');
subir_btn.click();
		});

<div class="form-group"><!-- -- INICIO Darwuin con JAVASCRIPT -- -->
   <label class="control-label">Subir Archivo de su Propuesta	</label>
   <div class=""><br>
	<form name="enviar_archivo_frm" method="POST" action="subir-archivo.php" enctype="multipart/form-data" >
		<input type="file" id="archivo_fls" name="archivo_fls" required accept=".pdf,.doc">
		<input type="submit" id="subir_btn" name="subir_btn"  Value="Subir Archivo" hidden="hidden">
		<div id="demo"></div>
	</form>
    </div>
</div> 
<div class="form-group">
    <button class="btn btn-danger btn-lg btn-block" id="send" type="button">GUARDAR DATOS</button>
</div>

answered by 04.06.2018 в 19:19

I do not see the "www" folder in the project folder Problem when entering and reading data in JavaScript class

score 3 · Accepted Answer

const subir_btn = document.getElementById('subir_btn');
    const send = document.getElementById('send');

    send.addEventListener("click",function () {
    	subir_btn.click();
    });

<div class="form-group">
       <label class="control-label">Subir Archivo de su Propuesta	</label>
       <div class=""><br>
    	<form name="enviar_archivo_frm" method="POST" action="subir-archivo.php" enctype="multipart/form-data" >
    	     <input type="file" name="archivo_fls" required accept=".pdf,.doc">
    	     <input type="submit" id="subir_btn" name="subir_btn" Value="Subir Archivo" hidden="hidden">
    	</form>
   </div>
</div> 
      
<div class="form-group">
   <button class="btn btn-danger btn-lg btn-block" id="send" type="button">GUARDAR DATOS</button>
</div>

You can use required of HTML5 to validate that the field is full

<input type="file" name="archivo_fls" required accept=".pdf,.doc">