2012-04-27 18 views
1

javascriptの初心者ですが、ユーザーがクライアント側で行ったことを反映したjavascript変数(配列)を取得して、送信時にPHPサーバーページに投稿する必要があります。PHP/Javascript js変数からPHPページ

私はこれをPHPページに投稿するフォームの非表示フィールドの値として含めることをお勧めしました。しかし、JS変数はユーザーによって動的に作成されるため、ページを更新する関数を呼び出さない限り、フォームに含めるためにページに書き込むことはできません。ダブルページの更新を避けるために、私は、データを取得し、同時にPHPスクリプトに投稿機能を提出することをお勧めしたいと思います。 AJAXが正しく理解されていれば、私は送信時に一度ページを読み込んでいいので、必要はありません。私はちょうど2回リロードしたくありません。

以下は、Andrewが提案した関数を使用してjs変数とpostを設定します。私はフォームの他の隠し変数を取得するようにThフォームを投稿しますが、おそらく変数の命名に間違いがあるため、jsによって変数が設定されていません。

私はgetdata.phpに持っているもう一方の端には
<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> 

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

非表示フィールドの値を変更するには、ページを更新する必要はありません。 – Andrew

+0

合意しました... JSはあなたの価値をフォームフィールドに入れます。フォームフィールドにフォームを投稿します。 – GDP

+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

+0

' ' – Andrew

+0

この作品はありましたか? – Andrew

0

jQueryは実際これを非常に簡単にします。あなたは正しいアイデアを持っていますが、window.locationを使ってページを変更しようとしています。あなたが探しているのは、あなたが現在のページにとどまっている間、別のURLへの非同期要求を行うことです。

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

+0

私は2番目のjQueryでしょう。 JavaScriptを使って作業していると、人生が楽になります。 – Andrew

関連する問題