How do I get form.method property value if there is a child input named "method"?

Question

I just found that I can use $('form').prop(name) to get input with that name within the form. Then I experimented on other tags, and this won't work for div and body. Now I don't have a way to tell if a form needs to post or get if there is an input named method, which unfortunately is true in one of my pages.

Bonus: I can't get action of a form if there is an input named action inside it, either.

<!doctype html>
<html lang="en">
<head>
    <title>jQuery.prop()</title>
    <script src="../../jquery-1.9.1.js"></script>
    <script>
    $(function() {
        var method = $('form').prop('method');
        console.log(method); // <select> element

        var form = $('form')[0];
        console.log(form.method); // <select> element

        $('form').prop('method', 'get');
        console.log(form.method); // still <select> element, but DOM inspector shows the form method is changed to "get"

        form.method='get';
        console.log(form.method); // still <select> element
    });
    </script>
</head>
<body>
    <form action="/Test/Create" method="post">
        <input type="text" name="content" value="" />
        <select name="method">
            <option value="phone">Phone</option>
            <option value="email">Email</option>
        </select>
    </form>
</body>
</html>

So, how do I get form.method (or action) when there is an input with that name inside it?

@AleksG I will if I have to. Just checking if I have to or not. — deerchao, Jul 10 '13 at 15:16
Yes, I tried. `attr` works, that's a option if I would ignore the possibility that form.method could be changed. — deerchao, Jul 10 '13 at 15:20
The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code. from http://stackoverflow.com/a/6004028/119561 — deerchao, Jul 10 '13 at 15:46
Where both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as value and checked: for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value/checkedness of the input (reflected in the defaultValue / defaultChecked property). from: http://stackoverflow.com/a/5876747/119561 — deerchao, Jul 10 '13 at 15:49

score 4 · Accepted Answer · answered Jul 10 '13 at 15:15

4

You could just use jQuery's attr function, if I'm understanding the question correctly.

$('form').attr('action');
$('form').attr('method');

answered Jul 10 '13 at 15:15

jrthib

1,319
1
12
17

`attr` is not exactly the same as `prop`. – deerchao Jul 10 '13 at 15:21
You are correct, thats why I suggested it. See here, http://stackoverflow.com/questions/14946728/jquery-getting-element-name-propname-or-attrname, a related post explaining attr vs prop. – jrthib Jul 10 '13 at 15:22
I have the impression that `attr()` only reports the value directly from html, and does not change when those properties modified by script, is this true? – deerchao Jul 10 '13 at 15:30
I haven't tried it, but if it pulls the attributes directly from the HTML, if the attribute changes and you call `attr` again, it should retrieve the new attribute value. – jrthib Jul 10 '13 at 15:36
1

I know now, some attributes don't update, but most of them does. Glad to learn something. Thanks. – deerchao Jul 10 '13 at 15:56

score 1 · Answer 2 · answered Jul 10 '13 at 15:17

1

You should be able to use .attr on jQuery:

var method = $('#myform').attr('method');
var action = $('#myform').attr('action');

answered Jul 10 '13 at 15:17

Aleks G

56,435
29
168
265

score 1 · Answer 3 · answered Jul 10 '13 at 15:25

As others have stated, the attribute is still there in the DOM. If you open your example in Page Inspector or a similar tool, you'll find that document.forms[0].attributes has both an "action" and a "method" key in its map, which you can access via plain Javascript like so:

document.forms[0].attributes['method'].value

Or via jQuery like so:

$('form').attr('method');

How do I get form.method property value if there is a child input named "method"?

3 Answers3