1

The Initil question I have a input field which should activate a function on the onfocus javascript event on a field on the user page.

Step 1 Add code to a custom module:

(function ($) {
  $(document).ready(totalname(){
    document.getElementById("fullname").style.background = "yellow";
  });
})(jQuery);

The currently HTML is:

<input type="text" id="fullname"><br>

And it should become like this:

<input type="text" id="fullname" onfocus="totalname()"><br>

How to get the onfocus=... inside the input element? Is the custom code ok?

Addition to this question.

Thxs you so much for all the comments. Based on that I learned i few things more so I now understand what the real question should be.

To understand how I can executed javascript code in a certain field on a certain page in drupal.

I assumed this was needed by a callback but this is not encoured according to @Jimmy so I'm trying to understand the way it should be according to drupal standards. Also I was suprised that no change in HTML was needed as @Adrian gave an example. I could not get it run because of the typo :-( So in mean time I made another solution.

The script is basicly just a real time concatination of first, middle and last name into a fullname field.

(function ($) {
  $(document).ready(function(){

        function setFullName() {
            var nameParts = [document.getElementById("edit-field-voornaam-und-0-value").value,  
                             document.getElementById("edit-field-tussenvoegsel-und-0-value").value, 
                             document.getElementById("edit-field-achternaam-und-0-value").value],
                name = nameParts.join(" ").trim();

            document.getElementById("edit-field-naam-und-0-value").value = name;
        }

        var fields = [document.getElementById('edit-field-voornaam-und-0-value'), 
                      document.getElementById('edit-field-tussenvoegsel-und-0-value'), 
                      document.getElementById('edit-field-achternaam-und-0-value')];

        for (var i = 0; i < fields.length; i++) {
            fields[i].addEventListener("keyup", setFullName);
        }


  });
})(jQuery);

So this is working and I put it in a custom module.

I still do not understand how I should be if I rewrite the code following the example of @adrian as this code is still executed on every page and not a specific page.

Thank you for learning !! and not using the correct words. I'm not native english ...

closed as off-topic by Shawn Conn, Clive Jul 14 '16 at 22:40

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Shawn Conn, Clive
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Please note that adding callback function in attributes is not encouraged in Drupal project. – Jimmy Ko Jul 15 '16 at 8:30
  • Ok, what is the correct way for implementing this in drupal? – Justme Jul 15 '16 at 9:14
  • Check @AdrianCidAlmaguer answer – Jimmy Ko Jul 15 '16 at 9:25
  • 1
    @AdrianCidAlmaguer Please don't edit random stuff into the question in an attempt to make it on topic - the OP didn't say anything even remotely related to the edit you made. This is a plain JS question, so will always be off topic here. – Clive Jul 15 '16 at 13:03
  • 1
    @adrian, 100% agree !!! – Justme Jul 15 '16 at 13:11
3

Your jQuery:

//Making a focus over the element
(function ($) {
    $('#fullname').blur(function() {
        $(this).removeClass("color");
      })
      .focus(function() {
        $(this).addClass("color");
      });
})(jQuery);

Your HTML:

<input type="text" id="fullname"><br>

Your CSS:

.color {
  background-color : yellow;
}

EDIT: To attach the js code to your page you can use #attached in a renderable array (this is the recommended way). I think that you should read: How to add jQuery UI libraries to a page.

  • 1
    Adrian, I'm trying to learn and I understand the answer. But I need lots more of javascript to execute around this element. Therefore the question is how to inject JS instead of how to make a the field yellow :-) – Justme Jul 15 '16 at 9:32
  • @Justme there is an error in Adrian's answer. should be $('#fullname') – No Sssweat Jul 15 '16 at 9:36
  • 1
    I think @NoSssweat is right. However, the nature of the suggested edit by Jimmy Ko is a bit difficult to judge as a reviewer. Therefor I think Adrian is the only one who should decide to yes or no accept that edit. If needed, perform a rollback to the prior version (and apply any other/similar fixes where appropriate). Good luck! – Pierre.Vriens Jul 15 '16 at 10:04
  • 3
    @JimmyKo thanks for the edit, I just see the error now – Adrian Cid Almaguer Jul 15 '16 at 12:36
  • 2
    @Pierre.Vriens I think that I made the error because I copy the code from one site that I made and I don't see the problem between the id and the class element. – Adrian Cid Almaguer Jul 15 '16 at 13:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.