jquery dynamic attribute name - javascript

i'm having a list of attribute name like this
phonelist1, phonelist2, ect.
I want to render some rows, each row has different phone list
I'm trying to get them from my jsp file like this. It's working fine
<td align=left>
<select value="${phonelist1}"/>
</select>
<select value="${phonelist2}"/>
</select>
<select value="${phonelist3}"/>
</select>
</td>
</c:forEach>
However, when I try this. It doesn't work
<c:forEach begin="0" end="${phone_no}" step="1" var="i">
<select value="${phonelist${i}}"/> --%>
</select>
</c:forEach>
What can I do to dynamic name the phonelist here?

When you are between {} your expression will be evaluated, no need to add an extra set of {}. So just use:
<select value="${phonelist[i]}"/>

Related

select dropdown value and use in a sql select

I have a dynamic dropdown list which is working -
<form action="" name="myform" id="myform" method="post">
<div>
<strong>Show Asset Type</strong>
<select name="assettypeid" id="assettypeid" onchange="typechanged();">
<sql:query var="queryresults" dataSource="jdbc/icantrack">
SELECT id, name FROM assettype order by name
</sql:query>
<option value="1">-- All Asset Types--</option>
<c:forEach var="row" items="${queryresults.rows}">
<option value="<c:out value="${row.id}"/>"
<c:if test="${row.id == param.assettypeid}">
<c:out value="selected"/>
</c:if>
><c:out value="${row.name}" />
</option>
</c:forEach>
</select>
</div>
</form>
And I know I can determine the selected value using javascript -
function typechanged()
{
typechosen = document.getElementById("assettypeid").value;
But I want to then use typechosen in a separate sql select further down in the jsp (and therefore a javascript variable is useless)
I believe my options are -
POST - but this (in my case) has to be back to the same jsp and I don't want anything to append anything to the URL (as my page will then no longer display). I may have to use GET as I don't want silly "are you sure you want to send the same data again" messages from the browser.
mysql fetch object - but all the examples of this don't seem to work?
Something else (that's simple and which I am not seeing?
I need to be able to 'store' the selected value of the dropdown and then recover / use it in another select i.e. -
where assettypeid like <%=typechosen%>
Any thoughts appreciated.
Just get the value of assettypeid field on the post request, actually this is not done by JavaScript, it is by server-side.
And you don't need the onchange="typechanged();"
Sample code is as follow:
<c:when test="${empty param.assettypeid }">
<select name="assettypeid" id="assettypeid">
<sql:query var="queryresults" dataSource="jdbc/icantrack">
SELECT id, name FROM assettype order by name
</sql:query>
<option value="1">-- All Asset Types--</option>
<c:forEach var="row" items="${queryresults.rows}">
<option value="<c:out value="${row.id}"/>"
<c:if test="${row.id == param.assettypeid}">
<c:out value="selected"/>
</c:if>
<c:out value="${row.name}" />
</option>
</c:forEach>
</select>
</c:when>
<c:otherwise>
Hello <b><c:out value="${param.assettypeid}" /></b>!
</c:otherwise>

Bind Select inside of table row from array not binding on activate

In Aurelia (latest beta version), has anyone tried binding a select element inside of a table where the rows are bound to an array? I don't think it works on the initial load (activate() event).
Here's the example code:
<tbody>
<tr repeat.for="item of variations">
<td>
<input type="text" class="form-control input-sm" value.bind="item.name" />
</td>
<td>
<select class="form-control input-sm" value.bind="item.controlId">
<option>Select...</option>
<option value="1">DropdownList</option>
<option value="2">RadioList</option>
<option value="3">Checkboxes</option>
</select>
</td>
</tr>
</tbody>
In the viewmodel, the list of variations is built something like this in the activate() event:
this.variations.forEach(v => {
let variation = new Variation();
variation.value = v.value;
variation.text = v.text;
variation.control = v.displayType;
self.variations.push(variation);
});
The rest of the properties, ie. text input, show up fine on load. And the same view has regular selects outside of this table and they all bind correctly on load (ie. show the proper select option based on the value that is set programatically).
Is item.controlId a number? If so, what's probably happening is the number value is being compared using === with the string values of the option elements. You'll need to make sure the option values are numbers:
Instead of <option value="1"> use <option model.bind="1">

Get value of dynamic created select related to input

I got stuck with targeting the correct element and I hope you can help me.
So:
I have fields generated by PHP script:
<fieldset>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
<div class="row">
<select>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="text" />
</div>
</fieldset>
And I need to initialize an auto complete plugin over each of textfield on focus, based on what is selected inside the select in the row, where is the textbox.
Because of templates of project, where I don't have access, I cannot edit the ID or classes of rows (like numbering the rows), so even this is a simplified solution, it is all like what I am working with.
So, once again, what I need to achieve:
$(input).focus(function(){
Ask_what_is_in_select_at_the_same_row()
Store_value_of_Selected_Option_to_Variable()
});
You can use it this way:
$('div.row :text').focus(function(){
// get the value of the select which is the sibling of focussed text input.
var optVal = $(this).siblings('select').find('option:selected').val();
// now you can use it.
});
DEMO

javascript with html forms getting values

Im trying to get text from a product table in order to sAVE them to a shopping cart and put them into a database at a later date.I also want a confirm alert box to appear for the user to confirm before it gets written to a database table. However im having trouble getting the java script to read my html, as i only need to read the fields that have had the drop down list selected.
Any help or guidance would be great!!
<script type="text/javascript">
function myFunction()
{
alert(document.getElementById("musicStore").rows[0,1,2,3,4].cells.namedItem(number1,+ "price",+ "album",+ "type").innerHTML);
}
</script>
<form name= "musicStore" Action="" Method="get">
<tr>
<th>Artist</td>
<th>Title</td>
<th>Duration</td>
<th>Price</td>
<th>Album</td>
<th>Format</td>
</tr>
<tr>
<td>Rocking eddie</td>
<td>Song never leaves</td>
<td>04:34</td>
<td id="price" value="8.99">£8.99</td>
<td id="album" value="freshprince">Fresh Prince</td>
<td><select name="format" id="type">
<option value=""></option>
<option value="cd">CD</option>
<option value="digital">Download</option>
</select>
</td>
</tr>
<tr>
<td>Rocking eddie</td>
<td>Go Home</td>
<td>06:24</td>
<td id="price" value="10.99">£10.99</td>
<td id="album" value="Coffee">Coffee</td>
<td><select name="format" id="type">
<option value=""></option>
<option value="cd">CD</option>
<option value="digital">Download</option>
</select>
</td>
</tr>
<div style ="float: right";>
<button onclick="myFunction()">Add to Cart</button>
</div>
</form>
Several problems:
You have multiple elements with the same ID. For example you have 2 elements with id='type'. ID's are supposed to be unique and won't function properly if there are repeats.
Use class instead:
<td class="price" value="8.99">£8.99</td>
Your javascript code isn't going to loop through properly.
You can't use innerHTML in all of your instances because the 'type' is select list. You'd have to get the value of that element as opposed to the innerHTML.
Here is a JSFiddle of the working code.
I would change the 2nd to this: <select name="format" id="type2">
Something different.
I think you then want:
document.querySelector('#type').value
document.querySelector('#type2').value

How can I return the value of disabled drop-down field after submit?

I have a drop down field that if any items of it selected, it would be disabled, after that I submit the form, but then (after submitting) the drop down field doesn't have any value, I want to have a value after submit but my drop down field is empty.
Thanks for any help,
(sorry for my English)
Hi again. My problem still remains but thanks anyway; to make it more clear there is my code:
code: <tr>
<td class="tbl_entry_form_title"><%=DTask.LU_TECHNICIAN_TITLE%> :</td>
<td class="tbl_entry_form_input">
<c:if test="${isTechnicianAdmin eq false}">
<c:forEach var="current" items="${technicianTitleItems}">
<c:if test="${current.value eq taskBadrItem.lu_technician_title}">
<input name="lu_technician_title" value="${current.value}" onclick="
<c:if test="${salesCustomerResult > 0}">alert('something')</c:if>
"/></c:if>
</c:forEach></c:if><c:if test="${isTechnicianAdmin eq true}">
<select name="lu_technician_title" class="select_box" onclick=" <c:if
test="${salesCustomerResult > 0}">alert('something')</c:if> ">
<c:forEach var="current" items="${technicianTitleItems}"><option
value="<c:out value="${current.value}" />"<c:if test="${current.value
eq taskBadrItem.lu_technician_title}"> selected="selected"
</c:if>>
<c:out value="${current.title}"/></option></c:forEach></select>
</c:if></td> </tr>
assuming that you use javascript to disable the dropdown, you can copy the selected value to a hidden field so it will be submitted with the form
You can not get the value of a disabled field. One thing you could do is that save the selection of the select box in a hidden field through javascript and then you can read the value of that hidden field after the form is submitted.
Example:
<select name="whatever" id="whatever" onchange="document.getElementById('hdn').value = this.value;">
<option value="value">Value</option>
<option value="value">Value</option>
<option value="value">Value</option>
<select>
<input type"hidden" id="hdn" />
Now in your script, you can read the value of selected option though hdn hidden field name.
Note: Using Javascript inside HTML markup is bad, however you can use jQuery for unobtrusive javascript.
jQuery Example:
$(function(){
$('#whatever').change(function(){
$('#hdn').val($(this).val());
});
});
In this case, you don't need to put javascript code in the html (select box in this example).
Hope that helps.

Categories