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>
Related
I'm getting the following error:
Uncaught TypeError: Cannot set property 'sort' of undefined
I am getting the same error when trying to set other variables, target and search.
I can't see what I'm doing wrong. I'm intending setting variables which I can pass to a backend php script which will then submit a request in order to sort search results. This should be simple but I'm not sure what the problem is.
How do I set these variables so that I can submit the form?
HTML:
<div class="sort">
<form name="loop54" action="cart.php" target="_self" method="get">
<select id="sortBy">
<option value="Rel" selected="selected">Relevance</option>
<option value="PriceLoHi">Low to High</option>
<option value="PriceHiLo">High to Low</option>
<option value="A-Z">A-Z</option>
<option value="Z-A">Z-A</option>
</select>
</form>
</div>
JavaScript:
var selectmenu = document.getElementById("sortBy");
selectmenu.onchange=function() {
var selectedOption = this.options[this.selectedIndex];
document.loop54.target="_self";
document.loop54.sort = selectedOption;
// the line below refers to another form and works
document.loop54.search = document.ds_search.search.value;
document.loop54.submit();
}
I created a jsfiddle and it works there. Must be a problem elsewhere.
You have to set the name attribute for the <select id="sortBy"> element:
<select id="sortBy" name="sort">
If you want to send data to your PHP script using an HTML form, you should not manipulate the JavaScript object representing your HTML form.
The behaviour of your HTML form is this : if it contains fields with a name parameter (input tags with values, select tag with options selected), they will be sent in the HTTP Request, in an array where :
the name of the field is the entry
the value of the field is the value
So instead of doing what you do, you should :
add a input text field named "search" where your user will type his search query
add a name parameter to your select
Here's what it would look like :
var selectmenu = document.getElementById("sortBy");
selectmenu.onchange= function() {
// you can keep using JavaScript to submit your form, but select your form with its id :
document.getElementById("loop54").submit();
}
<div class="sort">
<form id="loop54" pname="loop54" action="cart.php" target="_self" method="get">
<select id="sortBy" name="sortBy">
<option value="Rel" selected="selected">Relevance</option>
<option value="PriceLoHi">Low to High</option>
<option value="PriceHiLo">High to Low</option>
<option value="A-Z">A-Z</option>
<option value="Z-A">Z-A</option>
</select>
<input type="text" name="search_ds"></input>
</form>
</div>
That way, you should end-up, server-side, with a $_GET variable containing an key/value for each of your fields : sortBy and search.
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]}"/>
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
in my jsp page i have a select box
<select id="quantity" name="quantity" onchange="alert(quantity.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
alert print selected value and , now i'm setting this value into c:set tag
<c:set var="quantity1" value="" >// how to set quantity value hear
Actually i'm trying value="${quantity.value}" but not success.
give me suggestion
You could have set the quantity value as request attribute and access in the jstl as follows
// In Action class/server side/or top of jsp
request.setAttribute("quantityvalue","1");
//In jsp
<c:set var="quantity1" value="${quantityvalue}" >
You can not access dom fields using jstl. As jstl is for server side.
You cannot set value to jsp's <c:set> tag on client-side (javascript/jquery). JSP is processed on server-side. <c:set> is not a part of rendered html.
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.