0

jQuery Mobile のコードを使用して選択メニューを動的に生成していますが、データをデータベースに渡すのに問題があります。メニューはappend、各フォーム要素のメソッドを使用して生成されます。短いコード例を次に示します。

for (var i = 0; i < arr.length; i++) {
var r = arr[i];
console.log(r);
    name    = r.optionname;
    val     = r.optionvalue;
    nameid  = r.optionnameid;
    valueid = r.optionvalueid;
if ($("#prodAttributes_"+prodID+" select").is("[name*=" + name + "]")) {

var select = $("#prodAttributes_"+prodID).find("select[name*=" + name + "]");
var option = $("<option></option>");
    option.val(val);
    option.text(val);
    option.attr("id", valueid);
    select.append(option);
  } else {

var select = $("<select></select>");
    select.attr("name", name);
    select.attr("id", nameid);
var option = $("<option></option>");
    option.val(val);
    option.text(val);
    option.attr("id", valueid);
    select.append(option);
var label = $("<label></label>");
    label.attr("class", "select");
    label.attr("for", name);


    label.text(name);
    fieldset.append(select);
    myform.append(div);
    $(myform).appendTo("#prodAttributes_"+prodID);

    }

    }

私はそれが最も素晴らしいコードではないことを知っています。

私が抱えている問題は、提出されたデータを取得する方法がわからないことです。formタグを使うべきかどうかとても混乱しています。

本当に必要ですか？< button >タグを使うべきですか、それとも< input >タグを使うべきですか?

送信をクリックするときに関数を使用する必要がありますか、それとも jQuery のライブラリから何かを使用する必要がありますか?

ここに生成された HTML:

<div id="prodAttributes_2">
<form id="attributesubmit">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<div role="heading" >Options:</div>

<select name="Memory" id="4">
<option value="16 mb" id="3">16 mb</option>
<option value="32 mb" id="4">32 mb</option>
</select>


<select name="Model" id="3">
<option value="Premium" id="6">Premium</option>
<option value="Deluxe" id="7">Deluxe</option>
</select>

</fieldset>
</div>
<input type="button" id="submitme" value="send" />
</form>
</div>

また、実際にどのように見えるかを示すために JSFiddle も作成しました。

関数を実行する必要があると結論付けました。serialize()ただし、私が望んでいることは疑わしいので、次のようになります。

$("#submitme").live('click', function(){
$('select').each(function() {
var selectedOption = $(this).find('option:selected');

alert('Value: ' + selectedOption.val() + ' Text: ' + selectedOption.text());
});

var formData = '<p>something generated</p>';
var newPage = $('<div data-role="page" data-url="test"><div data-role="header"><h1>test</h1></div><div data-role="content">'+formData+'</div></div');
    newPage.appendTo( $.mobile.pageContainer );
    //append it to the page container
    $.mobile.changePage(newPage);

        });

しかし、それでも選択した要素自体の名前/ID が必要です。SQL データベースに挿入する準備ができたとき、コードはどのように見えるでしょうか?

4

2 に答える 2

1

それは、達成したいアクションに完全に関連しています。submitクリック時にボタンを使用すると、フォーム内のすべての要素が検索され、フォーマットの属性actionのURL に送信されます。これは自動です。使用を考慮する必要がある要素。これは ajax ではないので、サーバーで何が起こっているのかを知ることはできません。いくつかの要素の場合は、ボタンのクリック イベントをキャッチし、要素をセレクターでラップしてから ajax で送信できます。formgetpostsubmit

ノート

submitボタンタイプのイベントをバインドしsubmitてから、サーバーの応答を制御するために呼び出された ajax を送信できます。

アップデート

何を達成したいのかよくわかりませんが、送信ボタンをバインドするフォーム内のすべてのフィールドを取得して処理し、フォーム内の各 html 要素に対してセレクターを実行することを回避する方法を次に示します。

ボタンが入力送信であると仮定します

$('form#attributesubmit').live('submit', function (){

     $(this).serialize() -->> this give you all the fields and values of the form
});
于 2011-12-27T18:00:17.160 に答える
0

どういうわけか、データをサーバーに送り返す必要があります。AJAX (追加の jQuery メソッドを使用) を使用してこれを行うことができます。これにより、オプションで [送信] をクリックした後も同じページに留まることができます。または、従来の HTML フォームとして行うこともできます<form>。action送信先の URL に設定します。

于 2011-12-27T18:01:32.217 に答える