We Keep Coding

Why is my <LI> submit consistently submitting the first item in the list?

My code builds a dynamic list similar to this:
form = "";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some other options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
$("#my-output-div").append(form);
The problem is that I need to use the correct list items form ID to get the correct selection when the submit button is pressed, but that form ID is dynamic. I know I can use var formID = $(this).parent().attr("id"); to get the ID of the form on click but what is the best way to implement this to make sure I am submitting the actual seleted list item? Every other attempt has always grabbed the very first list item in the list no matter which submit button was clicked. I know that can't use the class:
$(document).on('submit', '.locationForm', function(e) {
e.preventDefault();
// do something
});

What if you send in the event object when clicking? Then from the event object you can extract the clicked element data?
https://api.jquery.com/event.data/
this link explains a bit more? I personally use Angular for dynamic web apps but this should work as well.
EDIT:
this code is an example:
$(document).ready(function() {
$("a").click(function(event) {
alert(event.target.id);
});
});
I got it from this post on Stackoverflow Getting the ID of the element that fired an event

JQuery Get Value from Select Option not working

I dont know why my jquery code does not works to get value from select option.
I have created a function where when I click on "Add New Row" button then it will create a new row to my table.
Here's my JS code to add new row
$(".tambah_sofa").on('click',function(){
html = '<tr id="row_'+i+'">';
html += '<td><button type="button" id="delete-button" data-row-delete="row_'+i+'">X</button></td>';
html += '<td><select name="sofa[]" id="sofa"> <option value="'+sofa_rumah+'">Sofa rumah</option><option value="'+sofa_pejabat+'">Sofa Pejabat</option><option>Sofa Kedai</option><option>Tilam Tak Bujang</option> </select> </td>';
html += '<td>X</td>';
html += '<td><input type="number" name="quantity[]" id="quantity_'+i+'" value="1" disabled="disabled"></td>';
html += '</tr>';
sidebar = '<tr id="row_'+i+'">';
sidebar += '<td><input style="width:50%;" type="text" id="price_sofa" value="" disabled="disabled"></td>';
sidebar += '</tr>';
$('#table_item').append(html);
$('#table_sidebar').append(sidebar);
i++;
});
Below is my code to get select option values into textbox :
$('#sofa').on('change', function () {
$('#price_sofa').val(this.value);
}).trigger('change');
I try to follow this JSfiddle demo : http://jsfiddle.net/JwB6z/2/
The code is working but when I try implement to my "add new row" function, it's not working.

I believe this is because any new row is not being recognised. I think you should bind the change to body...
example:
$('body').on('change', '#sofa', function () {

you can always use this:
$('#sofa').on('change', function () {
$('#price_sofa').find(':selected').val();
}).trigger('change');
EDIT: The above one is used to get the value you entered if you want to add the text and not value you can always put
$('#price_sofa).find(':selected').text();
EDIT2: When you use $('#price_sofa').val(this.value); you are not taking the selected option and a you can see in the fiddle here that you added they didn't use the function that you used.
Hope this helps

submit to a spring controller from a javascript code

I am trying to submit a form to a controller from a javascript but the form button is not showing.
This is my attempt
for (var i = 0; i < json.length; i++) {
users += '<strong>' + json[i].email + '</strong><br/>' + '<br/>' + json[i].tok + '<hr><br/>';
//trying to hit to the controller from here but it is not working
//trying to hit to the controller from here but it is not working
'<form method="post" action="searchAdmin" novalidate="novalidate">'
'<input type="email" value="json[i].email" name="searchName" id="searchName"/>'
//on clicking the fetch button let it submit to the controller
'<input type="submit" value="FETCH" />'
'</form>'
Kindly assist!

user+='<form met....
because you have used ; on the first line so you need to append this string

Could you try making the form a single string? Try like below;
//trying to hit to the controller from here but it is not working
'<form method="post" action="searchAdmin" novalidate="novalidate"><input type="email" value="json[i].email" name="searchName" id="searchName"/><button type="submit">FETCH</button></form>'

faceMocion input tag not get bind in jQuery

when i use <input type="hidden" value="asombro" class="facemocion" /> in body then its work correctly ,
but when i try to bind same tag with jQuery like
html= html + "<input type="hidden" value="asombro" class="facemocion" />"
it not get work

You will need to use single quotes for the string:
html += '<input type="hidden" value="asombro" class="facemocion" />';
Or escape the double quotes inside it:
html += "<input type=\"hidden\" value=\"asombro\" class=\"facemocion\" />";

You can do it like more jquery way rather than creating it as string,
var hidden = $("<input>", {
type: 'hidden',
value: 'asombro',
'class': 'facemoion'
});
$("body").append(hidden);

Try make this way.
html += '<input type="hidden" value="asombro" class="facemocion"/>
$('body').append(html);
now use the plugin.
$('.facemocion').faceMocion();

how to set variable value in form action?

is it possible to set variable value in html form action?
var serverUrl=homeURL + "/runapp?requestType=Import&subRequestType=importScenario&userName=";
refButton = '<form id="importForm" action="serverUrl" class="userInputForm" enctype="multipart/form-data" method="post">' +
'<input id="file" name="file" type="file" />' +
'</form>';

You mean insert the value of the variable? Why wouldn't it? In this case you're creating an HTML string to return, so something like this should work:
returnedHTML = '<form action="'+JSvariable+'" id="myId>
or
returnedHTML = '<form action="<?=$phpVariable?>" id="myId>