Отправить форму без перезагрузки страницы

У меня есть функция, встроенная в JavaScript, которую я хочу выполнить после отправки формы. Это полностью изменяет внешний вид страницы. Но мне нужна переменная из окна поиска, чтобы перейти к JavaScript. На данный момент он мигает и сбрасывает то, что было, потому что он перезагружает страницу.

Таким образом, я настроил возврат false в своей функции, который не позволяет этому делать, но переменная, которую я хочу, не получает через форму. Любые идеи о том, что я должен сделать, чтобы получить его? Это нормально для обновления страницы, updateTable() функция updateTable() работает и не сбрасывается сбросом страницы.

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

Это функция 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;
}

Ответы

Ответ 1

Вы не можете сделать это, используя формы обычным способом. Вместо этого вы хотите использовать AJAX.

Примерная функция, которая будет отправлять данные и предупреждать ответ на страницу.

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);
    }
}

Ответ 2

Вы можете использовать функцию сериализации jQuery вместе с get/post следующим образом:

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

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

jQuery Сериализация Документация: http://api.jquery.com/serialize/

Простой AJAX отправляет с помощью 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 elements.
           success: function(data)
           {
               alert(data); // show response from the PHP скрипт.
           }
         });

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

Ответ 3

Я думаю, это то, что вам нужно. Попробуйте это.

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

и ваш код javascript тот же

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; 
}

Ответ 4

Я сделал это по-другому, что я хотел сделать... дал мне результат, в котором я нуждался. Я решил не отправлять форму, а просто получить значение текстового поля и использовать его в javascript, а затем reset текстовое поле. Извините, если я беспокоил кого-то с этим вопросом.

В основном просто сделал это:

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