페이지를 새로 고침하지 않고 양식 제출

Question

제출 기능이 실행 된 후에 실행하려는 javascript 함수가 있습니다. 기본적으로 페이지의 모양이 완전히 변경됩니다. 하지만 여전히 검색 상자에서 자바 스크립트를 통과하는 변수가 필요합니다. 지금은 페이지를 새로 고침하기 때문에 깜박이고 거기에 있었던 것을 다시 설정합니다.

그래서 나는 그것을하지 못하게하는 함수에서 return false를 설정하지만, 원하는 변수는 폼을 통해 제출되지 않습니다. 그것을 얻기 위해 내가해야 할 일에 대한 아이디어가 있습니까? '

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

Answer 1

당신은 할 수있다 (페이지가 updateTable() 함수의 작품만큼 새로 고침하고 페이지를 재설정으로 재설정되지 않습니다 것은 괜찮습니다) 양식을 정상적인 방법으로 사용하면 안됩니다. 대신 AJAX를 사용하려고합니다.

데이터를 제출하고 페이지 응답을 알리는 샘플 함수.

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

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

jQuery를 직렬화 문서 : http://api.jquery.com/serialize/

간단한 AJAX 사용하여 제출을 jQuery를 다음과 같이

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 2

당신은 jQuery를이 GET/포스트와 함께 기능을 직렬화 사용할 수 있습니다

// 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 3

나는 이것이 당신이 필요로하는 것 같아요. 이 시도 .

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

와 자바 스크립트 코드가 같은

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

Answer 4

나는 ... 할 싶은 무슨에 그것을 다른 방식으로 한 것입니다 내게 내가 필요한 결과를 주었다. 양식을 제출하지 않고 오히려 텍스트 필드의 값을 가져 와서 자바 스크립트에서 사용하고 텍스트 필드를 다시 설정했습니다. 미안하다. 나는이 질문에 누군가를 괴롭혔다.

는 기본적으로 단지 이런 짓을 :

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