Jquery form validation with multple select boxes - javascript

I'm having some trouble displaying form validation on multiple select boxes with this plugin:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
The validation only appears to be working on the first select box. If the first select box is left unselected, it will render the validation error, however, if the following select is blank, it submits the form without validation.
I've used this plugin and it's worked flawlessly with multiple text inputs but this is the first time I've tried multiple select boxes.
<form action="someactionhere" method="POST" class="form" id="errors">
<label>First Select</label><br>
<select id="first" class="required">
<option selected="" value="">Select</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
</select><br><br>
<label>Second Select</label><br>
<select id="second" class="required">
<option selected="" value="">Select</option>
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
</select>
<button type="submit" class="button">SUBMIT</button>
</form>
<script src="/js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#errors").validate();
});
</script>

jquery.validation binds using the name attribute. Give your selects a name.

Related

how to open select list by clicking a button in jQuery or Javascript

<body>
<form>
<select name="test" id="test">
<option value="one">one</option>
<option value="two">two</option>
</select>
</form>
<button>Open Select Bar</button>
<script src="script.js"></script>
</body>
This is my html codes and I want to open the select list by clicking on the button in jquery, and I am unable to understand that how can I achieve it .
Someone suggest me the way to achieve it,
First of all give some id or class to your button. (For example I give id on snippet.)
Use select box attribute size to open your select list using option and length when button click.
$('#btnselect').click(function(e) {
$('#test').attr('size', $('option').length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="test" id="test">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button id='btnselect'>Open Select Bar</button>

How to retain state of div (hide/show) after clicking back and returning to form page?

I am working on a form that has several hidden divs that are set to show/hide when a radio button is clicked, a checkbox is checked, or in this case, an option is selected from a drop-down box.
At this point, when a form is submitted it gets passed to the server and returns an HTML page with a list of required fields that are missing information. From there you can click back and return to the page to enter the required fields and submit the form again. I have no control over this process or the server.
However, when the user clicks back or the return button on the required fields page on browsers such as Chrome, IE, Safari, any divs that should remain displayed are hidden again. I've mitigated this issue with certain functions by using onLoad but the issue still persists when it comes to selecting an option from a drop-down box.
Question: How do I retain the div made visible when an option is selected upon returning to the page/form on all browsers (Chrome, IE, Safari, etc.)?
Note: For this purpose, I would like to avoid using local storage, if possible. Also, I have tried looking for examples on here but the solutions available don't seem to work as expected, although I may be to blame for that due to the lack of experience working with jQuery.
$(document).ready(function() {
$('#div1').hide();
$("#location").change(function() {
var selected_option = $('#location').val();
if (selected_option === 'other') {
$('#div1').show();
} else {
$('#div1').hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<FORM METHOD="post" ACTION="test.cgi" id="form" name="myform">
<label for="location" class="label-med">Location:</label>
<SELECT id="location" class="input">
<optgroup label="Locations">
<OPTION SELECTED VALUE="">(Select One)</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
<OPTION VALUE="4">4</OPTION>
<OPTION VALUE="5t">5</OPTION>
<OPTION VALUE="6">6</OPTION>
<OPTION VALUE="7">7</OPTION>
<OPTION VALUE="8">8</OPTION>
<OPTION VALUE="9">9</OPTION>
<OPTION VALUE="10">10</OPTION>
<option value="other">Other</option>
</SELECT>
<br>
<br>
<div id="div1" style="display:none">
<label class="label-med" for="location">Location:</label>
<INPUT TYPE="text" name="other_cunyloc" id="location" MAXLENGTH="80" SIZE="25" class="input"></INPUT>
</div>
<INPUT class="button" TYPE="SUBMIT" Value="Submit">
</INPUT>
</FORM>
Here is my jsfiddle.

dropdown options change based on another dropdowns choices

I have a form that has several dropdowns. I need to make the second dependent on the value of the first. I have a Codepen that shows four dropdowns. The first does not change but the selects 2, 3, and 4 show the intended options I want.
Here is a listing of what option of dropdown 1 leads to the second.
new -> input-2
client -> input-3
admin -> input-4
I am doing this in OpenCart in a MVC so I am a little confused if this all is done in the view file or do I need to have some of this done in the controller, and if so how? I do believe JavaScript would be able to help here but not really sure how to implement that. My code pen is:
https://codepen.io/anon_guy/pen/pdbYad
<form action="/action_page.php">
<select name="Input-1">
<option value="*"></option>
<option value="new">new</option>
<option value="client">client</option>
<option value="admin">admin</option>
</select>
<select name="Input-2">
<option value="sign-up">Sign Up</option>
</select>
<select name="Input-3">
<option value="upgrade">upgrade</option>
<option value="stats">stats</option>
</select>
<select name="Input-4">
<option value="view-accounts">view all</option>
<option value="add">add</option>
<option value="remove">remove</option>
</select>
<input type="submit">
</form>

how to get the value from javascript code to jsp scriptlet with in the same jsp page

below is my code (1.jsp)
<html>
<head>
<script type="text/javascript">
function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
document.write("\n value is"+selectedValue);
}
</script>
</head>
<body>
<form method="post" action="SampServlet">
<select id="selectBox" name="selurl" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</form>
</body>
</html>
Here I have inserted this code into a jsp page.And getting the value of "selectedValue" from javascript to scriptlet with in the same jsp like this.
<% String val=(String)request.getParameter("selurl");
System.out.println("\n selected value is:"+val); %>
I am getting selected value as null as output. And if I print javascript selectedValue parameter it is giving me correct output i.e.,output as the option selected.But in scriptlet am getting null.Where is the error.I included all headers and directives.Please help me.
In your web browser you have only html, javascript and css. All JSP code is meant to be run on the server. So you get only the output of the jsp file. And after this you cannot change the jsp code.
Use submit Button to get Your Selected value at same page and
no need any function,no need onsubmit.
for example:
<form method="post" action="">
<select id="selectBox" name="selurl">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<input type="submit" value="Submit" name="sub">
//use scriplet tag
<% String r=request.getParameter("sub");
if(r.equals("Submit"){
String s=request.getParameter("selurl");
System.out.println("selected value is "+s);
}%>
</form>
Your select element should have a name attribute and you must use that name in request.getParameter()
<select id="selectBox" name="selurl"">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
String val = request.getParameter("mySelect");
EDIT:
If you want the server request to be made on the select element's onchange event, you must Ajax.
Using jQuery,
$.post('SampServlet', {selectedValue: selectedValue}, function(data) {
//Update view
});
You're missing the <submit> button.
<form method="post" action="SampServlet">
<select id="selectBox" name="selurl" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<input type="submit" /> <!-- MISSING!! -->
</form>
Add the button and click on it to submit the form to your servlet with the selected value sent as selurl. Please, note that your form's action attribute is pointing to SampServlet which seems to be a servlet. For jsps we usually have something like action="page.jsp" in the form.
EDIT:
If you want to post the form automatically when the user selects a value from the drop-down just set your onchange to: (you won't even need the <submit> button then)
onchange="this.form.submit()"

Editable Dropdown?

I have a php page with 4 text boxes, each need a "drop down" when the text boxes have the focus. Clicking the options would populate the (editable) text box(es) and close the drop down. The text boxes are of course part of html forms. How can I do this inline with javascript or ajax using minimal code?
Unless you are calling a webserver ajax is useless here.
You will need to have or create a div, since it is below your input box, and absolute positioning will be useful to ensure it is appropriately placed relative to the input box.
You should only have one function, so it should be adaptable to the input fields, hence the reason for absolute positioning.
You will want to track the keypress and mouseclick events in this div, and ensure that only one is open at a time, so have an onblur so that if the user clicks anywhere else the div closes.
if you use jquery you can do this extremely easily.
you could tweak this to your liking:
<html>
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script language='javascript'>
$(document).ready(function(){
$("input[type='text']").focus(function(){
$(this).parent().find('select').show();
});
$('select').change(function(){
$(this).parent().find('input[type="text"]').val($(this).val());
$(this).hide();
}).blur(function(){
$(this).hide();
});
});
</script>
<form>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
<fieldset>
<input type='text' /><br/>
<select style='display:none;'>
<option value=''>----</option>
<option value='1'>opt1</option>
<option value='2'>opt2</option>
<option value='3'>opt3</option>
</select><br/>
</fieldset>
</form>
</html>
if your select options need to be dynamic, ajax is very simple with jquery. if you already know what's going to be in there, have the php populate the hidden select boxes, and the focus event will show them.

Categories

Resources