.prop () returns an object, not a value

Question

I will try to make my question as simple and clear as possible. So I recently read the vs page in stackoverflow, and decided that I would start using instead . .prop().attr()prop()attr()

HTML

<form action="php/select.php" method="POST" class="ajax">
    <fieldset>
        <legend>Show</legend>
        <div>
            <input type="submit" value="Show Servers"/>
        </div>
        <div id="output"></div>
    </fieldset>
    <input type="hidden" name="action" value="SHOW_SERVERS"/>
</form>

JQuery

$(document).ready(function(){
    $("form.ajax").on("submit",function(e){
        e.preventDefault();
        var t=$(this);
        var form=t.serialize();
        var method=t.prop("method");
        var url=t.prop("action");//Before: t.attr("action");
        console.log(url);
    });
});

The strange part comes in, when I submit this form, what it prints on the console is

My question is:

Why does jQuery return an input element and not the value of the action property of a form?

Why .prop()gets the value of a method attribute, but not an action attribute

PS: I already know that the input has a property name="action".

Answer 1

Why does jQuery return an input element and not a value of an action form property?

jQuery .

HTML. , name . : http://www.w3.org/TR/html401/interact/forms.html#control-name

, form.

, jQuery, input example, formname.example.

Fiddle: https://jsfiddle.net/abhitalks/jct8ksr3/

:

$("form.ajax").on("submit",function(e){
	e.preventDefault();
	console.log(this.example);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="php/select.php" method="POST" class="ajax">
  <div>
    <input type="text" name="example" value="test"/>
    <input type="submit" value="Show Servers"/>
  </div>
</form>

Hide result

jQuery, , attribute attr. (), . jQuery ( ). , .

, :

console.log(t);

Answer 2

method boolean. attr(). prop() , disabled checked.

$(document).ready(function(){
    $("form.ajax").on("submit",function(e){
        e.preventDefault();
        var t=$(this);
        var form=t.serialize();
        var method=t.attr("method");  // Change here
        var url=t.attr("action");     // Change here
        console.log(url);
    });
});

FYI, prop() not attr(). :

<input type="checkbox" name="chkBox" checked="checked" id="chkBox" />

:

$("#chkBox").prop("checked"); // true
$("#chkBox").attr("name");    // chkBox

, , :

$(document).ready(function() {
  $("form.ajax").on("submit", function(e) {
    e.preventDefault();
    var t = $(this);
    var form = t.serialize();
    var method = t.attr("method");
    var url = t.attr("action");
    console.log(url);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="php/select.php" method="POST" class="ajax">
  <fieldset>
    <legend>Show</legend>
    <div>
      <input type="submit" value="Show Servers" />
    </div>
    <div id="output"></div>
  </fieldset>
  <input type="hidden" name="action" value="SHOW_SERVERS" />
</form>

Hide result

php/select.php .

, <input />, Álvaro González ( ), , <input name="something">, <form>. something . prop() name action.

. .

Answer 3

, , , - , "" :

<form action="php/select.php" method="POST" class="ajax">
      ^^^^^^
<input type="hidden" name="action" value="SHOW_SERVERS"/>
                           ^^^^^^

jQuery 1.6, t.attr("action") HTML t.prop("action") , , JavaScript. :

• t.attr("action") action="php/select.php" ( )

• t.prop("action") . , <input>.

, .

Answer 4

jQuery ( 8239 jquery-1.11.3.js) , prop ( ) .

- , , , - method action. "post" method, method ( DOM), form[method] "post", . action action ( DOM), form[action] , action name: input, .