How check first input in append html

Question

I would like selected after append template the first input (class is time).

How to do this?

$.get('@Url.Action("Bonus")', function (template) {
                $("#bonuses").append(template);
                // I would like focused first input in template $(template).first().focus();
            });

html in template:

<input autocomplete="off" name="BonusList.Bonuses.Index" type="hidden" value="3c6f7b63-cc96-4971-a5b5-2e4640ca97e5" />
<input class="time" id="BonusList_Bonuses_3c6f7b63-cc96-4971-a5b5-2e4640ca97e5__ID" name="BonusList.Bonuses[3c6f7b63-cc96-4971-a5b5-2e4640ca97e5].ID" type="hidden" value="0" />

3c6f7b63-cc96-4971-a5b5-2e4640ca97e5 - is random GUID

it's important #bonuses have many input befor this append

I added and edit to my answer to reflect your changes (the time class, find the last one of those) — Mark Schultheiss, Jan 23 '13 at 14:17

Varinder Singh · Answer 1 · 2013-01-23T14:00:57.623

0

You can use below snippet

$(template).find('input:first').focus();

If your first input is not of type text and you need to focus only first text type input use below code instead

$(template).find('input[type=text]:first').focus();

edited Jan 23 '13 at 14:00

answered Jan 23 '13 at 13:34

Varinder Singh

1,530
1
12
23

I guess your first input element in your template is not of type and you need to focus first text input.If i am getting you right then you can do like this `$(template).find('input[type=text]:first').focus();` – Varinder Singh Jan 23 '13 at 13:59

score 0 · Answer 2 · edited May 23 '17 at 12:21

You cannot change the type on an input, SO, instead, hide it using a CSS class (in your template), then you can show it. (reference: change type of input field with jQuery)

<input autocomplete="off" name="BonusList.Bonuses.Index" type="text" class="iamhidden" value="3c6f7b63-cc96-4971-a5b5-2e4640ca97e5" /><input id="BonusList_Bonuses_3c6f7b63-cc96-4971-a5b5-2e4640ca97e5__ID" name="BonusList.Bonuses[3c6f7b63-cc96-4971-a5b5-2e4640ca97e5].ID" type="text" class="iamhidden" value="0" />

CSS:

.iamhidden{display:none;}

and the selector for that: find the first of the two inputs, given they are the last two in appended, remove the hide class, then focus it (the next to last one):

$('#bonuses').find('input:last').prev().removeClass("iamhidden").focus();

I put a really simplified fiddle to show this logic working: http://jsfiddle.net/seAxW/

EDIT: to reflect your comments, focus the one with class "time" (you would still need the CSS and type text)

$('#bonuses').find('input.time:last').removeClass("iamhidden").focus();

with the hidden class added: Just put a space between the "time" and "iamhidden" classes, you COULD

<input autocomplete="off" name="BonusList.Bonuses.Index" type="hidden" value="3c6f7b63-cc96-4971-a5b5-2e4640ca97e5" />
<input class="time iamhidden" id="BonusList_Bonuses_3c6f7b63-cc96-4971-a5b5-2e4640ca97e5__ID" name="BonusList.Bonuses[3c6f7b63-cc96-4971-a5b5-2e4640ca97e5].ID" type="text" value="0" />

score -1 · Answer 3 · answered Jan 23 '13 at 13:34

-1

Have you tried this?

$.get('@Url.Action("Bonus")', function (template) {
    $("#bonuses").append(template);
    $("#bonuses").find('input:first').focus();
});

answered Jan 23 '13 at 13:34

AdityaParab

6,097
3
23
36

How check first input in append html

3 Answers3