Set value after clicking in field

parvares · May 9, 2023

Hi, with the below userscript on a (protected) webpage I'm trying to set a text in a field when it is clicked:

JavaScript:

document.getElementById("titoDs").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("titoDs").value = "my text";
}

but the script works in part: the text is correctly set but when I re-click in the field the value is cleared, though I wish the text was not deleted. This is the original code of the field in the webpage:

JavaScript:

<div class="grid-row">
          <!-- Ricerca per titolo e clet -->
          <label id="lbl_d_datiric_titolo">
            Titolo
            <input type="text" name="ds" id="titoDs" class="grid-15" value="" maxlength="50">
            <select name="dsCombo" id="iddsCombo" style="min-width: 0px; display: none;">
<option value="1" selected="">Parte iniziale</option><option value="2">Titolo esatto</option><option value="3">Parole (solo per ricerca in polo)</option></select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 254px;" title="" id="iddsCombo_chosen"><a class="chosen-single" tabindex="-1"><span>Parte iniziale</span><div></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chosen-results"></ul></div></div>
</label>
        </div>

Thanks!

Padonak · May 9, 2023

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    
    </style>
  
  </head>
  <body>   
      <div class="grid-row">
          <!-- Ricerca per titolo e clet -->
          <label id="lbl_d_datiric_titolo">
            Titolo
            <input type="text" name="ds" id="titoDs" class="grid-15" value="" maxlength="50">
            </label>
            <select name="dsCombo" id="iddsCombo" style="min-width: 0px; display: none;">
               <option value="1" selected="">Parte iniziale</option>
               <option value="2">Titolo esatto</option>
               <option value="3">Parole (solo per ricerca in polo)</option>
               </select>
               <div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 254px;" title="" id="iddsCombo_chosen">
               <a class="chosen-single" tabindex="-1">
               <span>Parte iniziale</span>
               <div></div></a>
               <div class="chosen-drop">
               <div class="chosen-search">
               <input type="text" autocomplete="off" readonly="">
               </div>
               <ul class="chosen-results"></ul>
               </div>
               </div>
        </div>
        <script>
        document.querySelector('#titoDs').addEventListener('click', function(){
           this.value = 'some text';
        });
        </script>
  </body>
</html>

The original markup you provided has wrong using of the label element:

The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant
Element div not allowed as child of element label in this context.

parvares · May 9, 2023

Thanks for the answer, maybe I should upload the entire page, this would be the saved copy of the original page: link here, and this is a video of the behaviour applying my script on field Titolo. Could I modify the userscript? Thanks

Padonak · May 9, 2023

For some reason no video was loaded - only endless "loading" image. Talking about userscript - are you creating an extension for Chrome or another browser? Did my code work for you or what? By the way, I tested the code on Chrome, FF and Edge before posting it here and it worked ok. As for wrong mark up, you can inspect your page validation result here by yourself and see all the errors and warnings which are of great number.

parvares · May 9, 2023

No, I'm simply using this Chrome extension, see here for the video, hope it's clearer. I tested your below script but has the same behaviour of mine, so the click event should only run once.

Padonak · May 9, 2023

You should have informed your possible helpers about it in the very beginning. I'm not going to investigate how that extension works. May be you ask the extension developer how to use it to fit your needs. The code I provided above works good on at least 3 browsers, and that was the direct answer to the question you asked.

parvares · May 9, 2023

I'm sure it's not an extension problem, but a script problem. Yes, your script works like mine except for the final step, because the click event should only run once. Should I add {once:true} somewhere? Should I add somewhere a document.removeEventListener('click', function); ? I can't apply these suggestions.

Padonak · May 9, 2023

addEventListener() Synthax ->> Options

parvares · May 9, 2023

Thanks, I tried this but it isn't working:

JavaScript:

document.querySelector('#titoDs').addEventListener('click', function() {
           this.value = 'some text';
            document.removeEventListener('click', function());
});

Padonak · May 9, 2023

Try this:

JavaScript:

document.querySelector('#titoDs').addEventListener('click', function(){
           this.value = 'some text';
        }, {once: true});

parvares · May 9, 2023

Thanks very much, Padonak, it works fine now!!

Padonak · May 9, 2023

Good to hear ))

How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
How can I remove the specific error message after regex validation is done?	1	Jan 25, 2023
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Add recipes using JavaScript in table	20	Apr 17, 2023
Positioning CSS components	1	Nov 16, 2023
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023

Set value after clicking in field

parvares

Padonak

parvares

Padonak

parvares

Padonak

parvares

Padonak

addEventListener() Synthax ->> Options

parvares

Padonak

parvares

Padonak

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads

Set value after clicking in field

addEventListener() Synthax ->> Options​

Ask a Question

Similar Threads

Forum statistics

addEventListener() Synthax ->> Options