Develop Reference

What is the ^= operator in jQuery? [duplicate]

This question already has answers here:
What is caret symbol ^ used for in css when selecting elements?
(4 answers)
Closed 1 year ago.
I have come across some JS/jQuery code and am trying to find out what the ^= operator means. I can't find anything like this when Googling it.
The HTML page contains a form with these input fields:
<input type="text" id="name" name="name[1]" value="" size="22"/>
<input type="text" id="name" name="name[2]" value="" size="22"/>
<input type="text" id="name" name="name[3]" value="" size="22"/>
The JS validates the form before sending it to the server. Can somebody explain to me how the jQuery selector that is used in the lines with val and each works (or point me to the documentation)?
jQuery("button#finish").click(function(e) {
var error = false;
e.preventDefault();
if (jQuery("[name^=name]").val() != "" ) {
jQuery("[name^=name]").each(function(){
if (jQuery(this).val() == "") { jQuery(this).closest("tr").remove(); }
});
if ( ! error) { jQuery("#form_names").submit(); }
}
else { alert("Bitte mindestens eine Person zuoberst in das Formular eintragen."); }
});

The jQuery() function (and it's alias the $() function) take a CSS selector as an argument to determine which element(s) to operate on. The list of supported selectors is given in the jQuery API documentation.
Here, the selector [foo^="bar"] means:
[an] element whose "foo" attribute value begins exactly with the string "bar"

Check and uncheck checkbox with vanilla javascript [duplicate]

This question already has answers here:
toggle checkbox with javascript
(4 answers)
Closed 2 years ago.
Very basic question here, I am using a JS library to add keyboard shortcuts, I want to check and uncheck a checkbox using the same line of commands, but I am not sure about how to do this, here is the code:
shortcuts.add('alt+s', function() {
document.getElementById("menu-toggle").checked = true
})
How can I use the same shortcut to uncheck the same element?
document.getElementById("menu-toggle").checked = false;
Thanks in advance!

I recommend Element.toggleAttribute:
const toggleChecked = () => document.getElementById('menu-toggle').toggleAttribute('checked');
document.getElementById('myBtn').addEventListener('click', toggleChecked);
<input id="menu-toggle" type="checkbox"> Check me
<br><br>
<button id="myBtn">Click me</button>

Cant use find on element textarea which is child of td [duplicate]

This question already has answers here:
`find()` undefined is not a function
(4 answers)
Closed 6 years ago.
I get an error on the line targetTD[6].find('textarea').text() saying targetTD[6].find is not a function. (In 'targetTD[6].find('textarea')', 'targetTD[6].find' is undefined)
$(document).ready(function () {
$(document.body).on('click','.edit',function () {// use button class ince ID has to be unique per button
var targetTD;
if( $(this).find('i').hasClass('glyphicon-edit'))
{
targetTD = $(this).parents('tr').find('td'); // gives all TDs of current row
if (targetTD[6].firstChild.children.length) // the value cell is what we want
{
// targetTD[6].firstChild.children.item().setAttribute('readonly','false');
alert(targetTD[6].find('textarea').text());
}
I am trying to find a text area within a <td><div> <textarea readonly> some text </textarea><div><td>. How can I remove the readonly property ? Why cant I use find ?

Try to replace:
targetTD[6].find('textarea').text();
With:
$(targetTD[6]).find('textarea').text();
Because targetTD is an array with not wrapped elements. Also, to remove readonly property use:
$(targetTD[6]).attr("readonly", false);

targetTD[6] is a native JavaScript node. You need to wrap it in a jQuery selector $()
Like so: $(targetTD[6]).find

Using function that uses 'this' keyword not working as expected [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
Title may not be correct but i didnt know how to ask my question !
I have encountered a problem with this keyword . While using it as in this code <input type="text" onkeyup="this.value=this.value.toUpperCase();"></input>
it works perfectly. But when i allot a function on input element that uses this keyword , it dont work as in
HTML
<input type="text" ></input>
Javascript
var inp=document.getElementsByTagName('input')[0];
inp.onkeyup=up;
function up()
{
this.value=this.value.toUpperCase();
}

Can you bind onkeyup event in HTML? If yes then use this code:
<script>
function up(element) {
element.value = element.value.toUpperCase();
}
</script>
<input type="text" onkeyup="up(this)"></input>

How about taking it off of the global scope? Try binding in an IIFE:
(function bindEventHandler(tag) {
var inp = document.getElementsByTagName(tag)[0];
inp.onkeyup = function up() {
this.value=this.value.toUpperCase();
};
}('input'));

If you do it this way, make sure to add the script at the end of your body tags, and then it'll work.

Jquery check element exists by data attribute matching only the start of a specific value [duplicate]

This question already has answers here:
How to select all elements with an attribute that starts with
(2 answers)
Closed 8 years ago.
I want to be able to check to see if a specific data attribute exists that starts with a specific value.
for example lets say i have the following HTML code:
<div data-attr="123ABC"></div>
<div data-attr="123456"><div>
<div data-attr="TEST"></div>
and then i want to find any use of the data tag of data-attr that starts with 123
if ($('[data-attr="123"]').length > 0) {
//do something
}
This appears to always return 0 as i have no data-attr="123" How would i make it so i can check for only that specific data attribute that starts with 123 and has anything after that?

here is how
if ($('[data-attr^="123"]').length > 0) {
//do something
}