How to access form fields in jquery using variable reference to the form?

Question

Learning jquery, in chrome console created form:

var $form1 = $("<form/>", { id: 'form1' });
$div1.append($form1);

Then tried to access the fields during form submission: This works:

$('#form1').submit(function(e) {
    e.preventDefault();
    $('#form1 input, #form1 select').each(function(index){
        var input = $(this);
        console.log('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    });
});

Output: Type: textName: name1Value: hello world Type: submitName: submit1Value: submit

But this does not:

$($form1).submit(function(e) {
    e.preventDefault();
    $($form1).each(function(index){
        var input = $(this);
        console.log('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    });
});

Output: Type: undefinedName: undefinedValue:

How do I access the form fields using the variable $form1 instead of the actual element #form1?

Thanks for answer.

How do I get access to the inputs? I tried $form1.children but that results in exception. — Gautam M
– Gautam M, Commented Sep 24, 2017 at 19:44

Tareq · Accepted Answer · 2017-09-24 19:49:51Z

2

You can use children with selector to filter needed ones.

var $div1 = $('body');
var $form1 = $("<form>", { id: 'form1' });
$div1.append($form1);

$form1.append('<input name="test" type="text"/> <input value="go" name="whattodo" type="submit" />');


$($form1).submit(function(e) {
    e.preventDefault();
    $form1.children('input').each(function(index){
        var input = $(this);
        console.log('Type: ' + input.attr('type') + ' Name: ' + input.attr('name') + ' Value: ' + input.val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

answered Sep 24, 2017 at 19:49

Tareq

5,3732 gold badges18 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to access form fields in jquery using variable reference to the form?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related