2012-04-27 57 views
1

儘管JavaScript是一個新手,但我需要將JavaScript變量(數組)反映爲用戶在客戶端完成的操作,並在提交時將其發佈到PHP服務器頁面。PHP/Javascript發佈js變量到php頁面

有人建議我將這個值作爲隱藏字段中的一個值加入到php頁面中。但是,由於JS變量是由用戶動態創建的,因此除非我調用刷新頁面的函數,否則我無法寫入頁面以包含在表單中。爲了避免雙頁面刷新,我寧願讓submit函數抓取數據並同時將其發佈到php腳本中。 AJAX如果我理解正確,不應該需要,因爲我沒關係重新加載頁面一次提交。我只是不想重新加載兩次。

以下使用Andrew建議的函數來設置js變量和後期。 Th表單的帖子,因爲我得到了表單中的其他隱藏變量,但我沒有得到由js設置的變量,可能是因爲變量的命名有誤。

<html> 
    <head> 
    <style type="text/css"> 
     select 
     { 
      width:100px; 
     } 
    </style> 
    <script type="text/Javascript"> 
     function moveToRightOrLeft(side) 
     { 
      if (side == 1) 
      { 
       var list1 = document.getElementById('selectLeft'); 
       var list2 = document.getElementById('selectRight'); 
      } 
      else 
      { 
       var list1 = document.getElementById('selectRight'); 
       var list2 = document.getElementById('selectLeft'); 
      } 

      if (list1.options.length == 0) 
      { 
       alert('The list is empty'); 
       return false; 
      } 
      else 
      { 
       var selectedItem = list1.options[list1.selectedIndex]; 
       move(list2, selectedItem.value, selectedItem.text); 
       list1.remove(list1.selectedIndex); 
       if (list1.options.length > 0) 
        list1.options[0].selected = true; 
      } 
      return true; 
     } 

     function move(listBoxTo, optionValue, optionDisplayText) 
     { 
      var newOption = document.createElement("option"); 
      newOption.value = optionValue; 
      newOption.text = optionDisplayText; 
      listBoxTo.add(newOption, null); 
      return true; 
     } 

     function postData(listBoxID) 
     { 
      var options = document.getElementById(listBoxID).options; 
      for (var i = 0; i < options.length; i++) 
      window.location = "posttoserver.php?data="+options[i].value; 

     } 

     function setTheValue(val) { 
    var options = document.getElementById(listBoxID).options; 
    var form = document.forms['myForm']; 
    hiddenField = oFormObject.elements["data"]; 
    hiddenField.value = "val"; 
} 
    </script> 
    </head> 
    <body> 
    <select id="selectLeft" multiple="multiple"> 
     <option value="1">Value 1</option> 
     <option value="2">Value 2</option> 
     <option value="3">Value 3</option> 
    </select> 
    <button onclick="moveToRightOrLeft(2)">&lt;</button> 
    <button onclick="moveToRightOrLeft(1)">&gt;</button> 
    <select id="selectRight" multiple="multiple"> 
    </select> 
    <form id="myForm" action="getdata.php" method="get"> 
    <input type="hidden" name="data" /> 
    <input type="hidden" name="mode" value="savedit"> 
    <button onclick="setTheValue(options)">Submit Data</button> 
</form> 
    </body> 
    </html> 

在另一端我在訪問getdata.php:

<?php 
$mode = $_REQUEST['mode']; 
$option = $_REQUEST['data']; 
echo $mode; 
echo $option; 
print_r ($option);; 
?> 
+0

您不應該刷新頁面來更改隱藏字段的值。 – Andrew 2012-04-27 17:29:51

+0

同意...... JS會將您的價值放入該表單字段中,屆時您將發佈該表單。 – GDP 2012-04-27 17:41:18

+0

如果js變量被命名爲var,那麼html語法是什麼?類似於?

0

您可以繼續正常創建像你這樣的形式將被空隱藏字段:

<form id="myForm" action="posttoserver.php" method="get"> 
    <input type="hidden" name="data" /> 
    ... 
    <input type="submit" value="Submit" /> 
</form> 

並且您可以使用JavaScript函數來設置隱藏字段的值:

function setTheValue(val) { 
    var form = document.forms['myForm']; 
    hiddenField = oFormObject.elements["data"]; 
    hiddenField.value = "val"; 
} 

然後,您可以在單擊按鈕或其他任何按鈕時調用setTheValue(val)函數。 我希望這有助於!

+0

愚蠢的問題,但是調用函數的語法是什麼?像或者我應該使用 user1260310 2012-04-27 18:42:20

+0

您可以使用'' – Andrew 2012-04-27 18:53:55

+0

這個工作適合你嗎? – Andrew 2012-04-27 20:03:48

0

jQuery實際上使這非常簡單。你有正確的想法,但使用window.location將會改變你的頁面。您要做的是在您保留在當前頁面上時向另一個網址發出異步請求。

http://api.jquery.com/jQuery.ajax/

+0

我會第二個jQuery。當您使用JavaScript時,它使生活更容易。 – Andrew 2012-04-27 18:24:52