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"
Related
This question already has answers here:
Check if checkbox is checked with jQuery
(26 answers)
Closed 2 years ago.
I have an input like
<input type="checkbox" name="acept" id="acept">
and some simple JS/jquery code like
$('#acept').click(function(){
/* if( $("#acept").checked ){
alert(" I'm checked ");
} */
if( this.checked ){
alert(" I'm checked ");
}
})
Now, the first 'if' (the commented one) doesn't work, but the second one does.
Any explanation as to why?
That is because $("#acept") is a jQuery object and does not have any property checked on that directly, you can either use index or do that using jQuery's builtin methods like .prop('checked') or .is(':checked'):
$('#acept').click(function(){
console.log($("#acept").checked); //undefined
if( $("#acept").is(':checked') ){
alert(" I'm checked ");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="acept" id="acept">
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
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.
This question already has answers here:
How to update placeholder color using Javascript?
(5 answers)
Closed 4 years ago.
I want to change the colour of this placeholder after calling mobileValidate().
<input type="text" class="form-control" name="InputMobile" id="Mobile" placeholder="Enter Mobile Number" onblur="mobileValidate()"required>
JavaScript function is
function mobileValidate(){
var x = document.getElementById("Mobile");
if ((x.value).match(re)){
alert("mobile Number is valid");
}
else{
alert("mobile no is not valid");
x.value="";
x.placeholder.style.color="red";
}
}
You can't really modify pseudo-selectors with JavaScript. You'll have to modify an existing a element.
If possible, make a class:
.your-class::-webkit-input-placeholder {
color: #b2cde0
}
And add it to the element:
$('input').addClass('your-class');
Or if you want to use pure JS, do this:
x.classList.add('your-class');
This question already has answers here:
Escape quotes in JavaScript
(13 answers)
Closed 8 years ago.
this should be simple but I can't figure it out.
I want to let user edit a value. To do so, upon click, the value changes into a textbox. However, if the user puts a quote mark in the user input within the text box the value="" attribute of the text box closes prematurely and the quote mark and anything after it gets lost. Escape (deprecated) and encodeURI merely replace the quote mark with asci does which don't look good in the textbox.
Would appreciate anyone's solution to this problem:
Here is javascript:
function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="'+text+'"><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext
return false;
}
html:
Text: <span id="text" onclick="editText()";>He said "that's cool"</span>
jsfiddle
http://jsfiddle.net/2s9v2/6/
UPDATE:
Contrary to what those who marked this as a duplicate say, the duplicate question does not provide an answer to my question. They might want to re-read my question and the so-called duplicate and mentally register the word "programmatic" in my question and actually look at the code in the duplicate relaive to the code here.... Just saying.
I ended up changing the textbox to a textarea as a workaround as there does not seem to be a straightfoward way to programmatically escape a quote within a textbox.
The answer from Merlin below is a possible approach but calling the second function is more complex than just replacing textbox with textarea. In any case, I could not get that to work but I thank Merlin for his answer and upvoted it.
Try: text.replace(/"/g,""")
Ideally, though, you should be creating the elements with createElement, at which point you can do elem.value = text with no need for escaping.
Why not just set the value directly instead of rebuilding the input?
document.getElementById('name').value = edittext
Of course, this assumes that the input element with id=name already exists in your DOM, but I see no particular reason you could not ensure that it is already there (either writing directly in HTML or generating in Javascript on page load).
Update: It seems that the OP wants the element to be dynamically created in the onClick, by turning the text that is currently in a div into an input field with the contents of that div as its value.
I believe the following might do the trick, assuming id is unique as it should be.
function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext;
document.getElementById('name').value = text;
document.getElementById('text').onclick = function() {}; //
return false;
}
Note that you will need to disable the onClick inside the above function as well, and then re-enable it inside storeText, because otherwise every click will cause extra buttons to be added.
Update 2: Here is a fully working example without parameter passing (for simplicity).
<html>
<body>
<script>
function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText();">';
document.getElementById('text').innerHTML = edittext;
document.getElementById('name').value = text;
document.getElementById('text').onclick = function() {};
return false;
}
function storeText() {
document.getElementById('text').innerHTML = document.getElementById('name').value;
document.getElementById('text').onclick = "editText();";
}
</script>
<div id="text" onclick="editText();">HelloWorld</div>
</body>
</html>