Prevent submit to update part of a page

Question

Prevent submit to update part of a page

Navigation

#1 by (0 votes)

2

I have an html with the following code:

function mostrar() {
  var x = document.getElementById('alerta');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
  event.preventDefault();
}

#alerta {
  margin-top: 1 0px;
  display: none;
  position: absolute;
}

#wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="wrapper">
  <div id="alerta">
    <a href="Start.htm">aparece con el  submit MANUAL</a><br>
  </div>
</div>
<div id="MANUAL">
  <form method="post" action="">
    <input type="submit" value="MANUAL" onclick="mostrar()">
    <input type="hidden" name='"MANUAL"' size="20px" value="1">
    <input type="hidden" name='"AUTOMATICO"' size="20px" value="0">
  </form>
</div>
<td width="144px" height="21px">
  <form method="post" action="">
    <input type="submit" value="AUTOMATICO">
    <input type="hidden" name='"AUTOMATICO"' size="20px" value="1">
    <input type="hidden" name='"MANUAL"' size="20px" value="0">
  </form>
</td>

What I want: It is the href Start.html only displayed when I press the submit "MANUAL" and it disappears only when I press the submit AUTOMATIC

What is happening: Because the entire page is set to update every second (This is how it should work), when I press MANUAL submit the whole page refreshes and the href appears for a moment and disappears.

Is there any way to "isolate" that part of the code when I press the submit MANUAL? and that it only stops showing when I press%% AUTOMATIC%.

javascript html5 html

asked by ayar 02.06.2018 в 21:13

source

1 answer

Read a dictionary from a text file in Python Avoiding the use of For

score 0 · Answer 1

One possibility would be to use the localStorage (or sessionStorage , depending how much you want the data to be kept) to save a variable that indicates whether the MANUAL button has been pressed. If that variable of the localStorage has been initialized, then the function mostrar would be called so that the element #alerta is displayed.

For that, you would have to change the JavaScript to save that variable, which would be compared at the beginning. This would be done like this (with comments):

function mostrar() {
  var x = document.getElementById('alerta');
  // he cambiado la manera de comprobar el estilo a 'getComputedStyle' que te 
  // permite ver estilos que vienen de CSS, de lo contrario, la primera vez
  // siempre se irá por el 'else' porque el CSS no estaba inline
  if (getComputedStyle(x, null).display === 'none') {
    x.style.display = 'block';
    // guardamos una variable en el localStorage (el valor es irrelevante)
    localStorage.setItem('alertavisible', '1');
  } else { 
    x.style.display = 'none';
    // quitamos la variable del localstorage
    localStorage.removeItem('alertavisible');
  }
  // esto dará un error si la variable está en el localstorage, pero no importará al estar al final de la función
  event.preventDefault();
}

// cuando se cargue la función, comprobamos si la variable existe en el localstorage y
// ejecutamos 'mostrar' si existe
if (localStorage.getItem('alertavisible')) { mostrar(); }

And it would all look like this (although it does not work here because localStorage is not allowed for security reasons):

function mostrar() {
  var x = document.getElementById('alerta');
  if (getComputedStyle(x, null).display === 'none') {
    x.style.display = 'block';
    localStorage.setItem('alertavisible', '1');
  } else {
    x.style.display = 'none';
    localStorage.removeItem('alertavisible');
  }
  event.preventDefault();
}

if (localStorage.getItem('alertavisible')) { mostrar(); }

#alerta {
  margin-top: 1 0px;
  display: none;
  position: absolute;
}

#wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="wrapper">
  <div id="alerta">
    <a href="Start.htm">aparece con el  submit MANUAL</a><br>
  </div>
</div>
<div id="MANUAL">
  <form method="post" action="">
    <input type="submit" value="MANUAL" onclick="mostrar()">
    <input type="hidden" name='"MANUAL"' size="20px" value="1">
    <input type="hidden" name='"AUTOMATICO"' size="20px" value="0">
  </form>
</div>
<td width="144px" height="21px">
  <form method="post" action="">
    <input type="submit" value="AUTOMATICO">
    <input type="hidden" name='"AUTOMATICO"' size="20px" value="1">
    <input type="hidden" name='"MANUAL"' size="20px" value="0">
  </form>
</td>