jQuery :not() Selector doesn't work - javascript

I want to exclude selects with empty values from serialization.
I'm trying to achieve this like so:
var form = $('#myForm');
var str = $(':not(select[value=""])', form).serialize();
No erros, and the result is the entire form. The not() method gives the same.
What is possibly wrong?
EDIT: The question which was listed as possible duplicate to mine asks about possible implemntations for exlcuding empty fields frm serialization, while mine states that not() Selector doesn't work, asks why and for different to above mentioned solution.

Which filters element with element attribute value which equals to an empty string and not the element with current value as an empty string.
For filtering element with current value as empty string use filter() method.
var str = $(':input', form).filter(function(){
return this.value.trim() != '';
}).serialize();
UPDATE : If you just want to avoid empty select tags then do it like.
var str = $(':input', form).filter(function(){
return !($(this).is('select') && this.value.trim() == '');
}).serialize();

Related

Why does my function return undefined, especially the .split()parts?

So in essence I get the value of input, then try to divide into into different tags via the comma with this
var noteTags = document.getElementsByClassName("noteTag").value;
Tag = noteTags.split(",");
But in console, the split(",") is undefined
Edit: Sorry I forgot to mention that the noteTag element is input, does this change how the code works in any way?
There are two issues,
getElementsByClassName returns an array-like collection of elements (a NodeList).
And instead of value it should be innerText.
Try like below
var noteTags = document.getElementsByClassName("noteTag")[0].innerText;
Tag = noteTags.split(",");
You are using the split() method on an array. You are also trying to access the value property, whereby you should probably use innerText.
You can use querySelector then you dont need using a key[0] to select the element.
const noteTags = document.querySelector("#noteTag");
console.log(noteTags)
Tag = noteTags.innerHTML.split(",");
console.log(Tag)
<div id="noteTag">en,jp,fr</div>

sending he dynamic generated values to ajax data

Have this
var cData={};
var arr=[];
datacolumns.split(",").forEach((element)=>{
arr.push({data:element.trim()})
cData[element] = `$(#${element.trim(0)}).val()`;
});
but when I call the cData in the ajax Data:cData, it is sending the form as
authorid "$(#authorid).val()"
firstname "$(#firstname).val()"
lastname "$(#lastname).val()"
sorted "$(#sorted).val()"
what is going on here, I have zero clue
I think you're using the backticks incorrectly. If element is a string, you should not need to use them.
var cData={};
var arr=[];
datacolumns.split(",").forEach((element)=>{
var el = element.trim();
arr.push({ data: el });
cData[el] = $("#" + el).val();
});
So as you go through the loop, you should get a new selector each time:
$("#authorid").val();
$("#firstname").val();
$("#lastname").val();
$("#sorted").val();
As long as these elements exist with the proper ID and have value attributes, this should work to populate your Object.
Well, you have a little problem with your code. You need to change this:
cData[element] = `$(#${element.trim(0)}).val()`;
to this:
cData[element] = $(`#${element.trim(0)}`).val();
Note the placement of the backticks (`). You have wrapped the whole right-hand operand into the backticks which made it a string while what you really wanted to achieve was to wrap only the selector part.

getting selected values from an array of select box in to javascript

I have created dynamic select box using jquery. I have created the select box as an array name=Child[]. See my code
for(i=1;i<=val;i++){
var newParagraph = $('<dl class="thirty fl"><dt>Child '+i+'</dt> <dd><select name="child[]"><option value="">--select--</option><option value="1">1</option><option value="2">2</option><option value="3">3</option</select></dd></dl>');
$('#childDynamic').append(newParagraph);
}
In form validation section (in javascript), how I validate this select box? I don't know how to get the values from an array of select box using JavaScript
Anyone can help me?
Thanks in advance
(You don't actually have an array of select elements, given that html doesn't have arrays. But anyway...)
If you use the name attribute as the selector you can get a jQuery object containing the select elements:
$('#childDynamic select[name="child\\[\\]"]')
...which you can then process as you see fit.
Because square brackets have special meaning in jQuery selectors they need to be escaped with backslashes, and to include backslashes in a string literal they need to be escaped too.
Anyway, I don't know what kind of validation you want to apply, but if you wanted to loop through each select and check its value in some way you could do something like this:
var valid = true;
$('#childDynamic select[name="child\\[\\]"]').each(function() {
var val = $(this).val();
// example validation: make sure something other than the default
// blank value is selected
if (val === "") {
valid = false;
}
});
if (!valid) {
// do something
}

Get values from hash in URL using jquery

If I re-rite the URL using :
var id = 150
window.location.hash = "id="+id;
how to get the value of id using jQuery ?
No jQuery needed..
var id = /^#?id=(.+)/.exec(location.hash);
id = id ? id[1] : '';
// OR
var id = location.hash.substr(4); // (when hash can only be #id=..)
// This also selects 123 in #no=123 (!)
+1 for Rob W's answer not to use jQuery for this. But there're two things, i'd like to point out.
1.) Executing a regular expression, plus using a tertiary operator is "overload", too. ;-)
2.) You should consider that some browers return the hash symbol, and some don't!
To avoid to truncate the actual value part, I'd say it's safer to use replace(), instead of substr():
var id = location.hash.replace('id=', '').replace('#', '');
UPDATE:
I think split() is an even better solution:
var id = location.hash.split('id=')[1];
Just one (native) function call, which also "checks" if the request URL actually contains a hash that contains the string "id=idString".
If it does, the value of var id is "idString". If not, value of var id is undefined.

Jquery: Is there some way to make val() return an empty string instead of 'undefined' for an empty list?

With Jquery, is there some way to make val() return an empty string instead of 'undefined' when called against an empty list of elements?
E.g., I have this code:
var x = $('#my-textbox-id').not('.watermark').val();
The idea is that I want to get the value of my textbox, but I want an empty string if it is currently showing the watermark (i don't want the watermark value!).
The selector works, but i don't want 'undefined' - I want an empty string ''.
You can write (...).val() || "".
Only use this for text fields; it will also replace false or the number 0 with "".
Or you can use $.trim to get the expected result.
Example: $.trim($('#my-textbox-id').not('.watermark').val())
How about:
var x = $('#my-textbox-id').hasClass("watermark") ? "" : $('#my-textbox-id').val();
var x = $('#my-textbox-id').not('.watermark').val() == undefined
? ''
: $('#my-textbox-id').not('.watermark').val();

Categories

Resources