We Keep Coding

Javascript query selector The string did not match the expected pattern

I'm trying to pass the value of a checkbox only if it is checked, I'm using a text input. I'm running into a syntax issue.. I don't see where I missed any brackets or anything. Any help is appreciated. Fiddle is here also
Thanks
document.querySelector(function() {
setTarget();
document.querySelector("#test").change(setTarget);
function setTarget() {
var tmp ="";
tmp += document.querySelector("#test:checked").value || '';
document.querySelector('#testtarget').val(tmp);
}
});
<input type="checkbox" id="test" name="test123" value="testing123" />this should appear in the text input<br/>
<input type="text" id="testtarget" name="targetTextField" size="31" tabindex="0" maxlength="99" value="">

to select checked checkboxes only you can use :checked with your querySelector
use it this way
document.querySelectorAll("input[type=checkbox]:checked")
if i am not wrong this is what you exactly want
var cb = document.querySelector("#test"),
inp = document.querySelector("#testtarget")
cb.onchange = function(e){
inp.value = cb.checked ? cb.value : ""
}
<input type="checkbox" id="test" name="test123" value="testing123" />this should appear in the text input<br/>
<input type="text" id="testtarget" name="targetTextField" size="31" tabindex="0" maxlength="99" value="">

Get the id of input using it's name

I want to get the id of input using it's name,and to empty the input field.But it's not working.Is it possible?
html:
<input type="text" id="1" name="Color" maxlength="2" />
jQuery:
var myId="#";
myId=myId + $('[name="Color"]').attr('id');
$($myId).var('');

You can do this:
let id = $('input[name$="Color"]').val('').attr('id');
console.log(id);
$(`#${id}`).val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />

You can set the input value using the val() function.
<input type="text" id="1" name="Color" maxlength="2"/>
var myId='#' + $('[name="Color"]').attr('id');
$(myId).val('');
To get the input value use it like this:
$(myId).val();

Try this code.
const myId = $('input[name="Color"]').attr('id');
$("#"+myId).val(''); // you can set any value here or you can perform any other operations on this element -> $("#"+myId)
On first line of this JS code, we are getting id attribute and then on second line, we're using to manipulate element.
Now, if you want id only for performing some operations on that input element, you don't need to get id. You can also do like this.
let elem = $('input[name="Color"]');
elem.val(''); // only if same name is not used anywhere else.
I hope this helps you.

You can use attr directly to set a value. Moreover there is no need to append #.
let element = $('[name="Color"]');
console.log("before", element.attr('id'));
element.attr('id', null);
console.log("after", element.attr('id'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />

Not able to find the value of a textbox from DOM

I have the below input tag for a textbox. The value is getting displayed in
UI but I am not able to retrieve it from DOM. Any suggestions how we can extract the value from the below tag
<input id="f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1"
class="x-form-text x-form-field dct-field x_normalBG x-form-focus"
size="14"
autocomplete="off"
fieldref="ClientConsiderationsAL.LinesOfInsuranceOfTheClientWithABC"
objectref="aDE8F92F6A8E345D19EB6A819D317DFA8" maxlength="14"
name="int_9AF" title="" type="text"/>

If you're using angularjs add ng-model="relevant-name" to the input and in the controller add $scope.relevant-name as a variable to bind to like this: https://www.w3schools.com/angular/angular_model.asp
If it's just javascript then you need to do something like this:
https://plnkr.co/edit/wU13Bnd6j3TRfYcNV9ZG?p=preview
<input id="f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1"
class="x-form-text x-form-field dct-field x_normalBG x-form-focus"
size="14"
autocomplete="off"
fieldref="ClientConsiderationsAL.LinesOfInsuranceOfTheClientWithABC"
objectref="aDE8F92F6A8E345D19EB6A819D317DFA8" maxlength="14"
name="int_9AF" title="" type="text" onkeyup="textChanged()"/>
<script>
function textChanged() {
var input =
document.getElementById('f_aDE8F92F6A8E345D19EB6A819D317DFA89AF_3_1');
console.log(input.value);
}
</script>

Getting value of an Input in an list

I am trying to get the value of an input field in a html list.
I don't want the value which I set as the page loaded, i want the changed value (typed something in like abcd).
I tried it with innerHTML, innerText, textContent but its all the theme the old value.
The only thing that works ist getting the value with the id from input, but that does not work for me and my project.
May anyone can help me.
Here is the list code:
<li id="testlist">
<img onclick="functionxyz()" src="" height="40px" ondblclick="" width="50px"></img>
<input id="id1" class="textlist" type="text" name="" value="old value"></input>
<select id="id2" class="selectshortlist" name=""></select>
<textarea id="" class="textfield1" cols="1" maxlength="1000" rows="1" name=""></textarea>
<div class="ui-state-default sortable-number"></div>
<input type="button" class="removelist"></input>
</li>
And that's the JavaScript code:
function()
{
var sort1 = document.getElementById("testlist");
alert(sort1);
var liste = sort1;
alert(liste.value);
alert(liste.innerHTML);
var savelist = new Array();
for (var i = 0; i < liste.length; i++)
{
alert(liste[i].value);
console.log(liste[i].value)
//savelist.push(liste[i].textContent);
}
}

You tagged this with jquery, so the answer is, use jquery :)
var valueThatYouSeek = $('#testlist input.textlist').val();
console.log(valueThatYouSeek);
alert(valueThatYouSeek);

You can do it without jquery pretty easily if you're going that route.
function getInputVal() {
var input = document.getElementsByClassName("textlist")[0];
console.log(input.value);
}
FIDDLE

retrieving text field value using javascript

I want to retrieve textfield value using javascript. suppose i have a code like:
<input type='text' name='txt'>
And I want to retrieve it using javascript. I call a function when a button is clicked:
<input type='button' onclick='retrieve(txt)'>
What coding will the retrieve function consist of?

You can do this:
Markup:
<input type="text" name="txt" id="txt"/>
<input type="button" onclick="retrieve('txt');"/>
JavaScript:
function retrieve(id) {
var txtbox = document.getElementById(id);
var value = txtbox.value;
}

Let's say you have an input on your page with an id of input1, like this:
<input type="text" id="input1" />
You first need to get the element, and if you know the Id, you can use document.getElementById('input1'). Then, just call .value to get the value of the input box:
var value = document.getElementById('input1').value;
Update
Based on your markup, I would suggest specifying an id for your text box. Incase you don't have control over the markup, you can use document.getElementsByName, like so:
var value = document.getElementsByName('txt')[0].value;

One of the way is already explained by Andrew Hare.
You can also do it by entering the value in the textbox and getting a prompt box with entered message when a user click the button.
Let's say, you have a textbox and a input button
<input type="text" name="myText" size="20" />
<input type="button" value="Alert Text" onclick="retrieve()" />
The function for retrieve()
function retrieve()
{
var text = document.simpleForm.myText.value;
alert(text);
}