Borrando mis inputs de formulario después de la presentación

Lo he intentado de diferentes maneras en function de las búsquedas que he hecho sobre el tema y por alguna razón no puedo hacerlo funcionar. Solo quiero que mis inputs de text y área de text se borren después de presionar el button de enviar.

Aquí está el código.

<div id="sidebar-info"> <form name="contact-form" action="formprocess.php" method="post" target="ninja-frame"> <h1>By Phone</h1> <p id="by-phone">XXX-XXX-XXXX</p> <h1>By Email</h1> <p id="form-row">Name</p> <input name="name" id="name" type="text" class="user-input" value=""> <p id="form-row">Email</p> <input name="email" id="email" type="text" class="user-input" value=""> <p id="form-row">Message</p> <textarea name="message" id="message" class="user-input" rows="10" maxlength="1500"></textarea> <p>*Please fill out every field</p> <input type="submit" value="Submit" id="submit" onclick="submitForm()"> <script> function submitForm() { document.contact-form.submit(); document.contact-form.reset(); } </script> </form> </div> 

Su formulario ya se ha enviado ya que su button es de tipo submit . Que en la mayoría de los browseres daría como resultado la presentación de un formulario y la carga de la respuesta del server en lugar de ejecutar javascript en la página.

Cambia el tipo del button Enviar a un button . Además, como este button recibe el id de submit , causará un conflicto con la function de envío de Javascript. Cambia la identificación de este button. Pruebe algo como

 <input type="button" value="Submit" id="btnsubmit" onclick="submitForm()"> 

Otro problema en esta instancia es que el nombre del formulario contiene a - dash. Sin embargo, Javascript se traduce como un less.

Tendrá que utilizar la notación basada en arreglos o usar document.getElementById() / document.getElementsByName() . La getElementById() devuelve la instancia del elemento directamente, ya que Id es único (pero requiere que se establezca una identificación). getElementsByName() devuelve una matriz de valores que tienen el mismo nombre. En este caso, como no hemos establecido una identificación, podemos usar getElementsByName con el índice 0.

Pruebe lo siguiente

 function submitForm() { // Get the first form with the name // Usually the form name is not repeated // but duplicate names are possible in HTML // Therefore to work around the issue, enforce the correct index var frm = document.getElementsByName('contact-form')[0]; frm.submit(); // Submit the form frm.reset(); // Reset all form data return false; // Prevent page refresh } 

Puedes intentar esto:

 function submitForm() { $('form[name="contact-form"]').submit(); $('input[type="text"], textarea').val(''); } 

Este script necesita jquery para ser agregado en la página.

La forma más fácil sería establecer el valor del elemento de formulario. Si está utilizando jQuery (que recomiendo encarecidamente) puede hacerlo fácilmente con

 $('#element-id').val('') 

Para todos los elementos de input en la forma esto puede funcionar (nunca lo he intentado)

 $('#form-id').children('input').val('') 

Tenga en count que .children solo encontrará elementos de input de un nivel hacia abajo. Si necesita encontrar nietos o tal .find () debería funcionar.

Puede haber una manera mejor, sin embargo, esto debería funcionar para usted.

Prueba esto:

 $('#contact-form input[type="text"]').val(''); $('#contact-form textarea').val(''); 

ya que está utilizando la biblioteca jquery , le aconsejaría que utilice el método reset() .

En primer lugar, agregue un atributo id a la label del formulario

 <form id='myForm'> 

Luego, al finalizar, borre los campos de input como:

 $('#myForm')[0].reset(); 

Prueba esto:

 function submitForm () { // your code $('form :input').attr('value', ''); }