CODEWITHSUNDEEP
jquerydatabaseformsjquery-mobileselect-menu
wHiTeHaT
wHiTeHaT

Reputation: 139

Submitting select menus

I use a code in jQuery Mobile to dynamically generate select menus, but I'm having trouble passing the data to the database. The menus are generated using the append method for each form element. Here is a short code example:

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);

    }

    }

I'm aware it isn't the nicest code.

The problem I have is I don't know how to get the submitted data. I'm so confused if I should use the form tag.

Is it really needed? Should I use a < button > tag or use the < input > tag?

Should I use a function when clicking the submit, or should I use something out of jQuery's library?

Generated HTML here:

<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.

I concluded that I should run a function. However, I doubt serialize() does what I want, so something like:

$("#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);

        });

But then I still require the name/ID of the selected element itself. How would the code look when it would be ready to insert in a SQL database?

Upvotes: 0

Views: 146

Answers (2)

Jorge
Jorge

Reputation: 18257

That's entirely related with the action that you want to achieve. If you use a button submit when you do the click it's going to look for all the elements in the form and send it to the url of the attribute action of the form in the format get or post and that's it's automatic, so if you need to send a lot of elements you need to consider of use submit. Now remember that's not ajax so you couldn't know what's happens in the server. If are a few element's you can catch the click event of a button and wrap by selectors the elements and then send it by ajax.

Note

You can bind the submit event of the button type submit and then send an ajax called to control the response of the server

UPDATE

I'm not so sure what you want to accomplish but here's how you can get and handle all the fields in a form binding the submit button to avoid of doing selector for each html element in the form

Assuming that the button it's input submit

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

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

Upvotes: 1

ziesemer
ziesemer

Reputation: 28707

Somehow, you need to have the data submitted back to the server. You can either do this using AJAX (using additional jQuery methods) - which would optionally allow you to stay on the same page after clicking "Send", or you can do it as a traditional HTML form - which will require a <form> tag, with the action set to the URL you want to send to.

Upvotes: 0

Related Questions