I am developing an mobile app in which i want to populate ListView once the user fill up the form and click on submit button.
I know how to give List View in jQuery but how to populate items in it dynamically at run time?
-
1Checkout handlebarsjs.com, literally doing this exact thing in one of my projects right now.Christopher Marshall– Christopher Marshall2014-01-17 18:03:19 +00:00Commented Jan 17, 2014 at 18:03
-
I am new to this so i just went through the api.jquerymobile.com/listview but don't have any idea how to proceed. please do provide some tipsTrupti– Trupti2014-01-17 18:04:17 +00:00Commented Jan 17, 2014 at 18:04
-
I second using handlebarsjsCharles380– Charles3802014-01-17 18:04:23 +00:00Commented Jan 17, 2014 at 18:04
Add a comment
|
2 Answers
Are you looking for something like this?
HTML:
<div id="listView"></div>
<input type="button" id="mybutt" value="Submit" />
javascript/jQuery:
$('#mybutt').click(function() {
var out = '<ul><li>Item One</li><li>Item Two</li><li>Item Three</li></ul>';
$('#listView').html(out);
});
Responding to your comment: "what i need is on click of button form gets submitted and firstname which user enters on form will get added in list"
First, you need to remain on the page after the form was submitted. To do that, you should add e.preventDefault(); in your submit routine:
$( "#target" ).submit(function( event ) {
//Manually collect form values and
//Use ajax to submit form values here (see notes at bottom)
event.preventDefault();
});
Next, you want to get the data that was in the desired field, and add that to the <ul>. Therefore, change the above like this:
$( "#target" ).submit(function( event ) {
var fn = $('#fname').val();
$('ul').append('<li>' +fn+ '</li>');
//Manually collect form values and
//Use ajax to submit form values here (see notes at bottom)
event.preventDefault();
});
For the AJAX bit, see this post for tips.
Note that you can use $('#formID').serialize(); to quickly serialize all form data.
1 Comment
Trupti
in above example it is hard coded items but what i need is on click of button form gets submitted and firstname which user enters on form will get added in list.
js fiddle:
html:
<div id="listView"></div>
<input type="text" name="firstname"/>
<input type="text" name="lastname"/>
<input type="button" id="mybutt" value="Submit" />
jquery:
$('#mybutt').click(function() {
var out = '<ul>';
$("input[type=text]").each(function() {
out += "<li>" + $(this).val() + "</li>";
});
out += "</ul>";
$('#listView').html(out);
});
