2011-12-27 4 views
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); 

    } 

    } 

Я знаю, что это не самый приятный код.

Проблема у меня есть, я не знаю, как получить предоставленные данные. Я так смущен, если мне нужно использовать тег формы.

Действительно ли это необходимо? Следует ли использовать кнопку <> или использовать < ввод> бирка?

Должен ли я использовать функцию при нажатии на кнопку отправки, или мне нужно что-то использовать из библиотеки 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> 

I also made a JSFiddle to show you how it actually looks.

Я пришел к выводу, что я должен запустить функцию. Тем не менее, я сомневаюсь, что 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); 

     }); 

Но я по-прежнему требуют имя/идентификатор самого выбранного элемента. Как будет выглядеть код, когда он будет готов вставить в базу данных SQL?

+0

$ ("") должен быть равен $ ("option"). Вам не нужно включать весь тег в селектор. – Andbdrew

+0

спасибо @Andbdrew, я знал это, но мне сказали, что этот способ называется shortcode, а не «хороший способ», я путал, как и LOL. – wHiTeHaT

+0

$ («») должно быть просто $ («

ответ

1

Это полностью связано с действием, которое вы хотите достичь. Если вы используете кнопку submit, когда вы нажмете кнопку, она будет искать все элементы в форме и отправить ее на URL-адрес атрибута action из form в формате get или post, и это автоматически, поэтому, если вам нужно для отправки большого количества элементов, которые необходимо учитывать при использовании submit. Теперь помните, что это не ajax, поэтому вы не можете знать, что происходит на сервере. Если есть несколько элементов, вы можете поймать событие щелчка кнопки и обернуть селекторами элементы, а затем отправить его ajax.

Примечание

Вы можете связать submit события типа submit кнопки, а затем отправить Аякс призванного контролировать ответ сервера

UPDATE

Я не поэтому убедитесь, что вы хотите выполнить, но вот как вы можете получить и обработать все поля в форме, связывающие кнопку отправки, чтобы избежать использования селектора для каждого элемента html в форме

Предполагая, что кнопка его вход подать

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

    $(this).serialize() -->> this give you all the fields and values of the form 
}); 
+0

и * ziesemer, извините, я не упомянул об этом, однако в jquery-mobile он отправляет меня, если использовать тег действия на корневой странице. I сделал функцию: $ ("# submitme"). live ('click', function() {для кнопки, содержит jQuery-mobile's changePage. База данных, которую я использую, является webdb, она используется для localstorage, поэтому мне не нужна aditional action page.it - ​​это totaly clientside (для телефонного приложения) – wHiTeHaT

+0

см. обновленный ответ – Jorge

+0

У меня есть симулятивная функция, использующая сериализацию, однако при использовании она дает мне только «текстовые» результаты, и я не могу обновить мою базу данных текстом , он ест числа lol. – wHiTeHaT

0

Как-то, что вам нужно, чтобы данные, представленные на сервер.Вы можете либо сделать это, используя AJAX (используя дополнительные методы jQuery), который по желанию позволит вам оставаться на одной странице после нажатия «Отправить», или вы можете сделать это как традиционную HTML-форму, для которой требуется тег <form>, с action настроен на URL, который вы хотите отправить.