1

Sigo avanzando en mi aplicación. Si me encuentro en esta página, y hago click en "Alta V.", se limpian todos los inputs correspondientes:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Lo que estoy intentando hacer es que independientemente de la página en donde me encuentre, cada vez que haga clic sobre "Alta vacunación", también me limpie los datos. El código que tengo es el siguiente:

$("li#altavac a").on("click", function () {
$("#ctl00_ContentPlaceHolder1_exp_vacunacion").val("");
$("#ctl00_ContentPlaceHolder1_fecha").val("");
$("#ctl00_ContentPlaceHolder1_vacuna").val("");
$("#ctl00_ContentPlaceHolder1_codigolote").val("");
$("#ctl00_ContentPlaceHolder1_codigovacuna").val("");
$("#ctl00_ContentPlaceHolder1_lote").val("");
$("#ctl00_ContentPlaceHolder1_dosistotal").val("");
$("#ctl00_ContentPlaceHolder1_dosisdisponibles").val("");
$("#ctl00_ContentPlaceHolder1_fechacaducidad").val("");
$("#ctl00_ContentPlaceHolder1_exp_vacunacion").val("");
$("#ctl00_ContentPlaceHolder1_nombre").val(literalesPage[50312]);
$("#ctl00_ContentPlaceHolder1_municipio").val(literalesPage[50312]);
$("#ctl00_ContentPlaceHolder1_calificacionsanitaria").val("");

var data = {
    "explotacion": $("#ctl00_ContentPlaceHolder1_exp_vacunacion").val(),
    "fecha": "",
    "codigovacuna": $("#ctl00_ContentPlaceHolder1_codigovacuna").val(),
    "vacuna": $("#ctl00_ContentPlaceHolder1_vacuna").val(),
    "codigolote": $("#ctl00_ContentPlaceHolder1_codigolote").val(),
    "lote": $("#ctl00_ContentPlaceHolder1_lote").val(),
    "denominacion": $("#ctl00_ContentPlaceHolder1_nombre").val(),
    "municipio": $("#ctl00_ContentPlaceHolder1_municipio").val(),
    "calificacionsanitaria": $("#ctl00_ContentPlaceHolder1_calificacionsanitaria").val(),
    "codigocalificacionsanitaria": $("#ctl00_ContentPlaceHolder1_codigocalificacionsanitaria").val(),
    "especie": $("#ctl00_ContentPlaceHolder1_especie").val(),
    "fechacaducidad": "",
    "numunidadesdisponibles": $("#ctl00_ContentPlaceHolder1_dosisdisponibles").val(),
    "numunidadestotal": $("#ctl00_ContentPlaceHolder1_dosistotal").val()



};

$.ajax({
    url: location.protocol + "//" + location.host + location.pathname + "/setVacunasAnimales",
    type: "post",
    data: JSON.stringify(data),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
});


})

Este código me funciona bien en la página que os he mostrado. Lo que he hecho ha sido copiar y pegar este código en las páginas de la aplicación, y aunque no me produce error, no surte efecto. ¿Hay alguna forma de decirle a Jquery/js que cambie los valores de los inputs que están en una página diferente?

Gracias y un saludo

4
  • 1
    Estas usando iframe ?
    – Yussef
    Commented el 10 may. 2023 a las 11:17
  • No. No estoy usando iframe. Gracias Commented el 10 may. 2023 a las 11:24
  • ¿Tienes dos pestañas abiertas en un navegador y quieres que el código de una página afecte otra página abierta en la otra pestaña? ¿las tienes abiertas en navegadores distintos? o ¿qué es exactamente otra página? en el contexto en el que hablas. Pregunto porque no me queda nada clara la explicación que das.
    – jachguate
    Commented el 10 may. 2023 a las 11:28
  • Hola jachguate. Me refiero a que si estoy tanto en la página de inicio, o si me encuentro en selección de crotales (por ejemplo), si desde esas páginas, clico sobre "Alta vacunación", me limpie los valores. Quiero decir con independencia de si me encuentro en la página "Alta Vacunación". Gracias Commented el 10 may. 2023 a las 11:33

2 respuestas 2

1

Si lo que quieres es tener una función que limpie todos los campos en el documento, independientemente de cuales sean, puedes utilizar la función que encontrarás más abajo.

Esta función utiliza jQuery (debe ser mayor a 1.6) y básicamente toma todos los inputs, los va filtrando y va limpiando sus propiedades y valores.

También toma todos los _select_s y los resetea al primer valor disponible.

Como puedes ver, el código no hace referencia a ningún ID u otro selector específico del formulario o del documento. Como siempre, se requiere de HTML bien formado para un funcionamiento estable y robusto.

function limpiarTodosLosCampos() {
  $(':input').not(':button, :submit, :reset, :hidden')
    .prop('checked', false)
    .prop('selected', false)
    .not(':checkbox, :radio, select').val('');  
    
  $("select").each(function(index) {
    $(this).val($(`#${this.id} option:first`).val()); 
  });
}
label {
  width: 100px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="id1">Uno</label><input id="id1" type="text" /><br>
<label for="id2">Dos</label><input id="id2" type="email" /><br>
<label for="id3">Tres</label><input id="id3" type="search" /><br>
<label for="id4">Cuatro</label><input id="id4" type="tel" /><br>
<label for="id5">Cinco</label><input id="id5" type="url" /><br>
<label for="id6">Seis</label><input id="id6" type="number" /><br>
<label for="id7">Siete</label><input id="id7" type="range" min="1" max="100" step="1" value="50"/><br>
<label for="id8">Ocho</label><input id="id8" type="datetime-local" /><br>
<label for="id9">Nueve</label><input id="id9" type="month" /><br>
<label for="id10">Diez</label><input id="id10" type="time" /><br>
<label for="id11">Once</label><input id="id11" type="week" /><br>
<label for="sel">Select</label>
<select name="sel" id="sel">
  <option value="uno">Uno</option>
  <option value="dos">Dos</option>
  <option value="tres">Tres</option>
  <option value="cuatro">Cuatro</option>
</select>
<br>
<label for="sel2">Select2</label>
<select name="sel2" id="sel2">
  <option value="cinco">Cinco</option>
  <option value="seis">Seis</option>
  <option value="siete">Siete</option>
  <option value="ocho">Ocho</option>
</select>
<br>
<p>Radio:</p>
  <input type="radio" id="rd_uno" name="radio" value="uno">
  <label for="rd_uno">uno</label><br>
  <input type="radio" id="rd_dos" name="radio" value="dos">
  <label for="rd_dos">dos</label><br>
  <input type="radio" id="rd_tres" name="radio" value="tres">
  <label for="rd_tres">tres</label>
<br>
<p>Checkbox:</p>
  <input type="checkbox" id="ck_uno" name="check" value="uno">
  <label for="ck_uno">uno</label><br>
  <input type="checkbox" id="ck_dos" name="check" value="dos">
  <label for="ck_dos">dos</label><br>
  <input type="checkbox" id="ck_tres" name="check" value="tres">
  <label for="ck_tres">tres</label>
<br>
<br>
<button onClick="limpiarTodosLosCampos()">Limpiar todo</button>

El código está en un snippet de manera que puedes probarlo aquí mismo en la respuesta haciendo clic en el botón Ejecutar.

1

Si los campos están dentro de un form bastaría con llamar a la función reset del mismo, por ejemplo para una página con uno o varios formularios solo necesitas hacer:

document.querySelectorAll("form").forEach(f=>f.reset())

Demo:

function reset(){
 //buscamos todos los form y los reseteamos
 document.querySelectorAll("form").forEach(f=>f.reset())
}
input{
 display:block
}
<a href="#" onclick="reset()">Este sería el link que está en el menú, presionar para resetear</a>


<hr>
Un formulario: 
<form>
  <input >
  <input type="checkbox" >
  <input type="radio" >
  <select>
   <option>opción 1</option>
   <option>opcion 2</option>
   </select>
</form>
<br>
<hr>
Otro formulario
<form>
  <input type="date" >
  <select>
   <option>opción 1</option>
   <option>opcion 2</option>
   </select>
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.