Editable Dropdown? - javascript

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.

Related

HTML datalist tag is not working properly

I am trying to make a password generator with HTML, CSS and JS. It allows user to pick their password length from a dropdown input field. However, somehow the datalist tag I have used for it, is not working. It shows the input field but not with the dropdown button. Any help would be nice.
HTML Code
<form action="" class="my-form">
<label for="browser">Password length: </label>
<input list="passList" name="passList" id="passList">
<datalist id="passList">
<option value="8">
<option value="10">
<option value="12">
<option value="14">
<option value="16">
<option value="18">
</datalist>
</form>
OK, I have figured it out, 2 elements cannot have the same id so that is why it is not working.
The input tag and datalist tag have same id so it causes trouble so in order for that to work, I have changed the id of input tag.

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.

Why is the value of my select reset itself after the html is copied?

I have a form inside of a display: none; div, so I can set all the checkboxes and other inputs before displaying them to the user.
The form is something like:
Code Block #1
<div class="hiddendiv" style="display:none;">
<form id="someid">
<input type="checkbox" id="check1" />
<input type="checkbox" id="check2" />
<input type="checkbox" id="check3" />
<select id="selid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>
</div>
And then I set all the values, via JQuery:
Code Block #2
if(something){
$('#check1').attr('checked', true);
}
if(something2){
$('#check2').attr('checked', true);
}
if(something3){
$('#check3').attr('checked', true);
}
$('#selid').val(5);
And then, finally, I move the html elsewhere:
Code Block #3
$('.some_div').html($('.hiddendiv').html());
All the check boxes display properly, based on whatever condition is used to set them. But the select is always set at the top-most position.
But... If I end Code Block #2 with the following:
Code Block #4
alert($('#selid').val());
return;
The value in the alert box IS 5.
Moving the last two lines until after the reassign will always have the alert saying 1, and the select at the top-most position.
If I move the html (Code Block #3), and then follow up with:
$('.hiddendiv').remove();
$('#selid').val(5);
then it displays properly.
Being more specific with the selectors (i.e. $('.hiddendiv #selid') and $('.some_div #selid')) still has the same result.
So what gives!? Why is the select changing back to its top position, if I assign the value before moving it? I'm sure I've done this exact procedure before, and it worked just fine.
This file is being a little weird too. In another file on the same project, I set the checkboxes using prop('checked', true);, because the alternative doesn't work. But in this case, it's the exact opposite, and only attr('checked', true); is working.
The obvious hack, for now, is to assign the value after the move. But this isn't ideal and I would prefer to have it the way I've been trying for.
Thanks in advance for anything you come up with.
Use option's selected attribute
$('#check1').attr('checked', true);
$('#selid option[value=5]').attr('selected',true);
$('.some_div').html($('.hiddendiv').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hiddendiv" style="display:none;">
<form id="someid">
<input type="checkbox" id="check1" />
<input type="checkbox" id="check2" />
<input type="checkbox" id="check3" />
<select id="selid">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</form>
</div>
<div class="some_div"></div>

JQuery to change value based on selection in a drop down menu

Using JQuery I'm trying to create a drop-down menu and then change a certain value on a search input element based on what people select in the menu.
So far I've figured out how to target the value I need to change. I've also gotten as far as having it so that if someone makes any selection from the menu, it changes the search input value to one specific value:
<div>
<form action="setColor" method="post">
<fieldset>
<label for="color">Select A Color</label>
<select name="color" id="color">
<option>Blue</option>
<option selected="selected">Red</option>
<option>Yellow</option>
</select>
</fieldset>
</form>
</div>
<script>
$(function() {
$('select[name="color"]').change(function() {
$('input[name="ancestorId"]').val("9999");
});
});
</script>
What I need now is something that sets the value according to the menu selection, matched up something like this:
Blue = 9999
Red = 8888
Yellow = 7777
I'm still looking at examples and will keep trying, but kind of stuck. Any advice appreciated.
You should put the value assignment in the option elements, as they were designed for just that:
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
And the script nearly stays the same, except I've used the elements IDs instead of their names in the selectors (assuming here your ancestor element has such an ID):
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
Note that the chained .change() call will trigger the change event that was just assigned, so that the pre-selected item's value will be populated into the text field when the page loads.
See it in action:
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
<input id="ancestor" type="text" />

Jquery form validation with multple select boxes

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.

Categories

Resources