I'm trying to create a custom control using leaflet; here you can see the jsfiddle: https://jsfiddle.net/1tca13f3/
When the user clicks on the submit button, i need to read the value from the dropdown and the one from the text field.
This...
L.DomEvent.on(this._container, 'click', this._doSomething, this);
...as predictable, doesn't work.. and I can't read the values from the input fields. How can I do this?
The main issue you are having is that you are just alerting the string 'clicked' in your _doSomething() function. You need to look up all the values and then you can do what ever you want with those values. Here is some quick code that will at least get you going in the right direction.
_doSomething: function(event){
if(event.target.className === 'leaflet-control-opt-submit') {
var select = document.querySelector('.leaflet-control-opt-dropdown');
var input = document.querySelector('.leaflet-control-opt-input');
console.log(select.value, input.value)
}
}
it first checks to make sure the event.target is the submit button if it is it looks up the values from the inputs and for now we just console.log() them you can do whatever you want from then on with the values.
I currently have the following code to find the type of selector and respond appropriately. This is ugly but its the best I have been able to come up with so far to distinguish between input types checkbox, radio, text, and select drop down list. I am hoping there is a way I could do this with a switch statement.
if ($(selector).is(':checkbox')){
//do something
}else{
if (selector.indexOf("radio") >= 0){
//do something
}else{
if ($(selector).is('input') || $(selector).is('select')) {
//do something
}
}
}
one thing I will bring up is that $(selector).is('input') is the only way I figured out how to catch input type="text" however this would also catch checkboxes so I had to put it at the very bottom.
I would use $().attr().
if($(selector).attr('type') == 'text')
I'm trying to clear all fields on a page but I don't want a reset button. I just want people to hit F5, refresh, etc.
I am trying to use this...
<body onload="MM_preloadImages('../images/PrintButtonWhite.png'); document.CourseMenu.reset();">
to clear my entire form of checkboxes, dropdown menus, and text boxes. It's not working.
Also tried this...
<script type="text/javascript">document.CourseMenu.reset();</script>
Any ideas?
Is CourseMenu the ID of your form? If so, try this:
document.getElementById('CourseMenu').reset();
Assuming you have a Util object. I did this because I use not only trivial html control I use also datepicker and boostrap switches so you have to do it manually. I remove all extra code and let to work with the basic, with this you will have totally control on what are you reseting.. I think you also can send a contair value not a form and will work like a <div> havent tested.
-- Edit --
You can send the continer like Util.resetForm($("#myid")); without caring if it form or other special tag
You can start with this... just use the function on the onload method
try for yourself: http://jsfiddle.net/ncubica/DGMAC/
function reset(objectHTML) {
objectHTML.find("input, textarea,select").not("input[type=submit]").each(function (_index, _item) {
//field is going to evalute ?
if (typeof $(_item).attr("data-ignore") === "undefined") {
switch(_item.type){
case "text":
$(_item).val("");
break;
case "checkbox":
$(_item).removeAttr("checked");
break;
case "select":
$(_item).prop("selectedIndex", -1);
break;
}
}
});
};
$("#test").one("click",function(){
reset($("#myform"))
});
You can add the tag data-ignore="ignore" to dont let the script reset the value this is useful when you dont wan to lose the index of some select
all the select tags will appear on blank after running this script without any selection on it..
//this can be improve with a switch .. but, I'm just showing how can it works..
I am trying to use the JQuery MaskInput plugin on a SSN field but I dont see anyway to make it display "***-**-****" after the user leaves the fields.
Did anyone get this working>
I havent tested this, but it may get you headed in the right direction. The masked input plugin has a completed function that can be called when the user has finished entering their value. You can use it to grab the value and store it in a hidden field to retain it and replace the current text with whatever you desire.
var $txt_SNN = $("#txt_SSN");
$txt_SNN.mask("999-99-9999", {
completed: function() {
$('#hdf_SNN').val($txt_SNN.val());
$txt_SNN.val("999-99-9999");
}
});
$txt_SNN.mask("999-99-9999").blur(function() {
$(this).attr('type', 'password');
});`
This should do it. Although I didn't test it.
I have some javascript which catches changes to a form then calls the form's regular submit function. The form is a GET form (for a search) and i have lots of empty attributes come through in the params. What i'd like to do is to delete any empty attributes before submitting, to get a cleaner url: for example, if someone changes the 'subject' select to 'english' i want their search url to be
http://localhost:3000/quizzes?subject=English
rather than
http://localhost:3000/quizzes?term=&subject=English&topic=&age_group_id=&difficulty_id=&made_by=&order=&style=
as it is at the moment. This is just purely for the purpose of having a cleaner and more meaningful url to link to and for people's bookmarks etc. So, what i need is something along these lines, but this isn't right as i'm not editing the actual form but a js object made from the form's params:
quizSearchForm = jQuery("#searchForm");
formParams = quizSearchForm.serializeArray();
//remove any empty fields from the form params before submitting, for a cleaner url
//this won't work as we're not changing the form, just an object made from it.
for (i in formParams) {
if (formParams[i] === null || formParams[i] === "") {
delete formParams[i];
}
}
//submit the form
I think i'm close with this, but i'm missing the step of how to edit the actual form's attributes rather than make another object and edit that.
grateful for any advice - max
EDIT - SOLVED - thanks to the many people who posted about this. Here's what i have, which seems to work perfectly.
function submitSearchForm(){
quizSearchForm = jQuery("#searchForm");
//disable empty fields so they don't clutter up the url
quizSearchForm.find(':input[value=""]').attr('disabled', true);
quizSearchForm.submit();
}
The inputs with attribute disabled set to true won't be submitted with the form. So in one jQuery line:
$(':input[value=""]').attr('disabled', true);
$('form#searchForm').submit(function() {
$(':input', this).each(function() {
this.disabled = !($(this).val());
});
});
You can't do it that way if you call the form's submit method; that will submit the entire form, not the array you've had jQuery create for you.
What you can do is disable the form fields that are empty prior to submitting the form; disabled fields are omitted from form submission. So walk through the form's elements and for each one that's empty, disable it, and then call the submit method on the form. (If its target is another window, you'll then want to go back and re-enable the fields. If its target is the current window, it doesn't matter, the page will be replaced anyway.)
Well one thing you could do would be to disable the empty inputs before calling "serializeArray"
$('#searchForm').find('input, textarea, select').each(function(_, inp) {
if ($(inp).val() === '' || $(inp).val() === null)
inp.disabled = true;
}
});
The "serializeArray()" routine will not include those in its results. Now, you may need to go back and re-enable those if the form post is not going to result in a completely refreshed page.
Maybe some of the proposed solutions worked at the moment the question was made (March 2010) but today, August 2014, the solution of disabling empty inputs is just not working. The disabled fields are sended too in my Google Chrome. However, I tried removing the "name" attribute and it worked fine!
$('form').submit(function(){
$(this).find('input[name], select[name]').each(function(){
if (!$(this).val()){
$(this).removeAttr('name');
}
});
});
Update:
Ok, probably the reason because disabling fields doesn't worked to me is not that something changed since 2010. But still not working in my Google Chrome. I don't know, maybe is just in the linux version. Anyway, I think that removing the name attr is better since, despite what policy takes the browser about disabled fields, there is no way to send the parameters if the name attr is missing. Another advantage is that usually disabling fields implies some style changes, and is not nice to see a style change in the form a second before the form is finally submited.
There is also a drawback, as Max Williams mentioned in the comments, since the remove name attr solution is not toggleable. Here is a way to avoid this problem:
$('form').submit(function(){
$(this).find('input[name], select[name]').each(function(){
if (!$(this).val()){
$(this).data('name', $(this).attr('name'));
$(this).removeAttr('name');
}
});
});
function recoverNames(){
$(this).find('input[name], select[name]').each(function(){
if ($(this).data('name')){
$(this).attr('name', $(this).data('name'));
}
});
}
However, I think this is not a very common case since we are submitting the form so it is assumed that there is no need to recover the missing name attrs.
Your problem helped me figure out my situation, which is a bit different - so maybe someone else can benefit from it. Instead of directly submitting a form, I needed to prevent empty form elements from being collected into a serialized array which is then posted via AJAX.
In my case, I simply needed to loop through the form elements and disable all that were empty, and then collect the leftovers into an array like so:
// Loop through empty fields and disable them to prevent inclusion in array
$('#OptionB input, select').each(function(){
if($(this).val()==''){
$(this).attr('disabled', true);
}
});
// Collect active fields into array to submit
var updateData = $('#OptionB input, select').serializeArray();
Or serialize, clear empty key=value pairs with regex and call window.location:
$("#form").submit( function(e){
e.preventDefault();
//convert form to query string, i.e. a=1&b=&c=, then cleanup with regex
var q = $(this).serialize().replace(/&?[\w\-\d_]+=&|&?[\w\-\d_]+=$/gi,""),
url = this.getAttribute('action')+ (q.length > 0 ? "?"+q : "");
window.location.href = url;
});
Another approach I always recommend is to do that on server side, so you are able to:
Validate the input data correctly
Set default values
Change input values if needed
Have a clean URL or a friendly URL such as "/quizzes/english/level-1/"
Otherwise you will have to deal with text input, select, radio etc...