Shortening Javascript code

Question

For my project i've been working on. I have a piece of Javascript code that inserts text into an input element with it's label has been double clicked.

$(document).ready(function() {
    $('#name-label').dblclick(function(){
        $("#name").val('[b][color="#FF0000"]Please Submit![/color][/b]');
    });
});

But I would like this code to work with multiple fields without copying and pasting the code over and over again. I would like the text inserted to stay the same.

Here are labels and input ID's I would like to use:

Label / Input

name-label / name
image-label / image
quest-label / quest
price-label / price
ge-label / ge
halch-label / halch
lalch-label / lalch
details-label / details
examine-label / examine
location-label / location
stats-label / stats
keywords-label / keywords

karim79 · Accepted Answer · 2011-02-11 15:58:34Z

7

$(document).ready(function() {
    $('label[id$="label"]').dblclick(function(){
        $('#' + this.id.split('-')[0]).val('[b][color="#FF0000"]Please Submit![/color][/b]');
    });
});

1 - Bind to all elements with IDs ending with 'label'.

2 - Since you follow the same convention for your ID attributes, find the correct element by extracting the first word from the clicked ID, and prepend a '#' to form an ID selector.

answered Feb 11, 2011 at 15:58

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ambo100 Over a year ago

Just one more thing. Can you make it so it excludes input fields with dropdowns?

karim79 Over a year ago

You mean if it is a <select>, do nothing?

kadalamittai · Accepted Answer · 2011-02-11 15:59:23Z

0

create a map of element-id/object combination and attach the function ptr to it.

answered Feb 11, 2011 at 15:59

kadalamittai

2,1761 gold badge16 silver badges20 bronze badges

Comments

Dominic Barnes · Accepted Answer · 2011-02-11 16:00:05Z

0

This code takes the clicked label, and uses the for attribute to find the appropriate <input> field to populate.

$(document).ready(function () {
    $("label").dblclick(function () {
        $("#" + $(this).attr("for")).val('[b][color="#FF0000"]Please Submit![/color][/b]');
    });
});

answered Feb 11, 2011 at 16:00

Dominic Barnes

28.5k8 gold badges69 silver badges91 bronze badges

Comments

CrayonViolent · Accepted Answer · 2011-02-11 16:01:19Z

0

$(document).ready(function() {
    $('label').dblclick(function(){
        var inp = $(this).attr('id').split('-');
        $("#"+inp[0]).val('[b][color="#FF0000"]Please Submit![/color][/b]');
    });
});

answered Feb 11, 2011 at 16:01

CrayonViolent

32.6k6 gold badges61 silver badges80 bronze badges

Comments

Tim · Accepted Answer · 2011-02-11 17:36:06Z

0

Something like:

function insertSubmitString(label_id, id) {
    $('#' + label_id).dblclick(function(){
        $('#' + id).val('[b][color="#FF0000"]Please Submit![/color][/b]');
    });
};

function insertAllSubmitStrings() {
  insertSubmitString('name-label', 'name');
  insertSubmitString('image-label', 'image');
  insertSubmitString('quest-label', 'quest');
  // and so on
};

$(document).ready(insertAllSubmitStrings());

edited Feb 11, 2011 at 17:36

answered Feb 11, 2011 at 16:00

Tim

885 bronze badges

Collectives™ on Stack Overflow

Shortening Javascript code

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related