javascript - valor - Enviar formulario sin recargar página

pasar valor input a variable php sin recargar o enviar form

Question

Esta pregunta ya tiene una respuesta aquí:

• Enviar formulario sin recargar página 16 respuestas.

Tengo una función incorporada en JavaScript que quiero que se ejecute después de que se envíe un formulario de envío. Básicamente cambia el aspecto de la página por completo. Pero necesito una variable del cuadro de búsqueda para pasar al JavaScript. En este momento, parpadea y restablece lo que estaba allí porque vuelve a cargar la página.

Así que configuré un retorno falso en mi función que evita que lo haga, pero la variable que quiero no se envía a través del formulario. ¿Alguna idea sobre lo que debo hacer para conseguirlo? Está bien que la página se actualice siempre que la función updateTable() funcione y no se restablezca al reiniciar la página.

<form action="" method="get" onsubmit="return updateTable();">
  <input name="search" type="text">
  <input type="submit" value="Search" >
</form>

Esta es la función updateTable :

function updateTable() { 
  var photoViewer = document.getElementById(''photoViewer'');
  var photo = document.getElementById(''photo1'').href;
  var numOfPics = 5;
  var columns = 3; 
  var rows = Math.ceil(numOfPics/columns);
  var content="";
  var count=0;

  content = "<table class=''photoViewer'' id=''photoViewer''>";
  for (r = 0; r < rows; r++) {
    content +="<tr>";
    for (c = 0; c < columns; c++) {
      count++;
      if(count == numOfPics) break; // check if number of cells is equal number of pictures to stop
      content +="<td><a href=''"+photo+"'' id=''photo1''><img class=''photo'' src=''"+photo+"'' alt=''Photo''></a><p>City View</p></td>";
    }
    content +="</tr>";
  }
  content += "</table>";
  photoViewer.innerHTML = content;
}

Answer 1

Lo hice de una manera diferente a lo que quería hacer ... me dio el resultado que necesitaba. Elegí no enviar el formulario, en lugar de obtener el valor del campo de texto y utilizarlo en el javascript y luego restablecer el campo de texto. Lo siento si molesté a alguien con esta pregunta.

Básicamente solo hice esto:

    var search = document.getElementById(''search'').value;
    document.getElementById(''search'').value = "";

Answer 2

No se puede hacer esto usando formas de la manera normal. En su lugar, desea utilizar AJAX.

Una función de muestra que enviará los datos y alertará a la respuesta de la página.

function submitForm() {
    var http = new XMLHttpRequest();
    http.open("POST", "<<whereverTheFormIsGoing>>", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    }
}

Answer 3

Puede usar la función de serialización jQuery junto con obtener / publicar de la siguiente manera:

$.get(''server.php?'' + $(''#theForm'').serialize())

$.post(''server.php'', $(''#theform'').serialize())

jQuery Serialize Documentation: http://api.jquery.com/serialize/

Simple AJAX enviar usando jQuery:

// this is the id of the submit button
$("#submitButtonId").click(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form''s elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

Answer 4

Supongo que esto es lo que necesitas. Prueba esto .

<form action="" method="get">
                <input name="search" type="text">
                <input type="button" value="Search" onclick="return updateTable();">
                </form>

y tu código javascript es el mismo

function updateTable()
    {   
        var photoViewer = document.getElementById(''photoViewer'');
        var photo = document.getElementById(''photo1'').href;
        var numOfPics = 5;
        var columns = 3; 
        var rows = Math.ceil(numOfPics/columns);
        var content="";
        var count=0;

        content = "<table class=''photoViewer'' id=''photoViewer''>";
            for (r = 0; r < rows; r++) {
                content +="<tr>";
                for (c = 0; c < columns; c++) {
                    count++;
                    if(count == numOfPics)break; // here is check if number of cells equal Number of Pictures to stop
                        content +="<td><a href=''"+photo+"'' id=''photo1''><img class=''photo'' src=''"+photo+"'' alt=''Photo''></a><p>City View</p></td>";
                }
                content +="</tr>";
            }
        content += "</table>";

        photoViewer.innerHTML = content; 
}