2

状況: 2 つの別々のページに 2 つの同一のフォームがあります。

  • ページ1：このページのフォームには選択フィールドがあり、送信時に2番目のページに移動し、他の同一のフォームを同じ選択に設定することになっています

  • ページ 2: このページには、選択フィールド (送信ボタンなし) のあるフォームがあります。選択が変更されたら、jquery を使用してオプションの内容を取得し、対応するクラスで div を表示します。以下のコードの使用:

    $('.result').hide();
$('#servicearea').change(function() {   
    $('.result').hide();

    var optionValue = $ (this).attr('value');
    $('#'+optionValue).show('fast');

});

問題：

  • フォームデータを選択するにはどうすればよいですか?
  • ページ 2 へのリンク、
  • フォームデータを既存のフォームに挿入する

jQueryに関しては初心者なので、どこから始めればよいかわかりません。仲良くしてください。どうも！

4

4 に答える 4

1

localStorage を使用してデータの転送を試すことができます..それが探しているものであると考えてください (php などを使用したくない場合は..)。

ここにリンクの説明を入力

簡単な例:

// first page
<script>
$('#submit').on('click', function (e) {
e.preventDefault();
var val1 = $('#val1').val();
var val2 = $('#val2').val();
var action = $('#form').attr('action'); // next page

window.localStorage.setItem('formData', JSON.stringify({
val1: val1,
val2: val2
}))
});

window.open(action, '_self');
</script>

// second page
<script>
$(window).on('load', function() {
var storage = window.localStorage.getItem('formData');

if (storage) {
storage = JSON.parse(storage);

$('#val1').val(storage.val1);
$('#val2').val(storage.val2)
}
})
</script>

これはフィールドを取得し (自分のものに変更するだけです)、localStorage に保存してから次のページを開きます (フォームのアクション属性である必要があります)。次のページでは、localStorage で値を探し、フォームに入力します。

  • 編集：これは電話から書いたので、タイプミスを許してください...
于 2019-09-30T11:02:54.123 に答える
0

個人的には、ここQueryParser()にあるコンストラクターを使用します。

gup()これには、 MatthewNieによって投稿された関数に比べて次の利点があります。

  • クエリ文字列を1回解析し、すべてのパラメータをオブジェクトのプロパティとして保存します。

それはまた許可します：

  • 変更またはクリアする保存済みパラメーター
  • 追加される新しいパラメータ
  • 現在保存されているパラメータから構築される新しいクエリクエリ文字列
  • href現在保存されているパラメータから作成されたクエリ文字列を含むリンクが作成されます。

jQueryと組み合わせて、次のように使用QueryParser()します。

ページ1

  • MaksymKozlenkoの説明に従ってフォームを送信します。

2ページ

  • インストールjQueryしQueryParser()てページに
  • フォームフィールドごとに、$("#formID [name='fieldName']").val($q.fieldName)。

または、各フォームフィールドを個別に手動でコーディングする手間を省くために：

$.each($("#myform")[0].elements, function(index, element) {
    $(element).val($q[element.name]);
});

したがって、2ページのフォームには、1ページで入力/選択した値が入力されます。

デモ

于 2012-05-04T07:19:39.110 に答える
0

@Maksym Kozlenkoのアイデアを使用して、1ページ目にプレーンな古いHTMLフォームを使用し、GETメソッドを使用して2ページ目に送信することを提案しました。次に、javascriptを使用して、この関数を使用して送信したGETデータを取得できます。私はこれをしばらく使用していて、このサイトで見つけました。

    function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}
于 2012-05-04T03:11:39.690 に答える
0

単純な古い HTML を使用して物事を非常にシンプルにしないのはなぜですか?

<form action="/second_page_url" method="GET">
   ... form fields ...
   <input type="submit" />
</form>
  • action 属性を 2 番目のページ URL に設定します。送信ボタンまたは Java Script を使用してフォームを送信します。
  • フォームが GET メソッドを使用する場合、すべてのフィールド値は window.location で利用可能になります ( URL パラメータ文字列を解析して JS オブジェクトにすることができます)、またはサーバー上でフォームの POST データを処理してページに追加します
  • 提供されたデータを使用して 2 ページ目のコントロールを設定する

Cookie、HTML5 ローカル ストレージを使用することもできますが、ユーザーが複数のウィンドウ/タブを開くことができることを考慮する必要があります。

jQuery の serialize() メソッドを使用してフォームの値をシリアル化することもできますが、AJAX リクエストを使用してデータを送信しない限り、これを行う理由はわかりません。

于 2012-05-04T02:20:42.660 に答える