Where is the form's `submit()` function defined in this code?
I am learning from already created webpages (php,javascript, and with smarty) and I promise I've been trying hard to understand this code but my mind just can't, I don't how it works, I have read and read, but I still don't understand. The next code works perfectly, but I don't know how. It's about a contact form. This is the original php page:
<?php
include("includes/globals.php");
include("includes/smarty/Sma开发者_C百科rty.class.php");
$vista = new Smarty();
$vista->display('contacto.tpl');
?>
As you can see, it just displays contacto.tpl, which is (I will put just the interesting parts):
<link href="{$smarty.const.__SERVER_URL__}css/estilo.css" rel="stylesheet" type="text/css" />
<link href="../css/estilo.css" rel="stylesheet" type="text/css" />
<link href="../css/coeco.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$smarty.const.__SERVER_URL__}scripts/jquery.js"></script>
{literal}
<script>
function validar()
{
$('#formContacto').submit();
}
</script>
{/literal}
</head>
<body>
<form id="formContacto" action="/contacto-enviado.html" method="post">
<table class="formulario_contacto" cellspacing="0" cellpadding="0">
<tr>
<td width="228" height="17">NOMBRE</td>
<td width="110" height="17">TELÉFONO</td>
<td height="17">E-MAIL</td>
</tr>
<tr>
<td><input class="campo_texto" name="nombre" id="nombre" type="text" /></td>
<td><input class="campo_texto2" name="telefono" type="text" /></td>
<td><input class="campo_texto" name="email" id="email" type="text" /></td>
</tr>
</table>
<table class="formulario_contacto" cellspacing="0" cellpadding="0">
<tr>
<td height="17">SU MENSAJE</td>
</tr>
<tr>
<td><textarea class="texto_contacto" name="detalles" rows=5></textarea>
<div align="right"><a class="btn_formulario_contacto2" href="#" onclick="validar()">enviar</a></div></td>
</tr>
</table>
</form>
{include file="foot.tpl"} </div>
</body>
</html>
So, well, ok, fine, it gets data from a form and it submits it with the function submit(), but where is function submit() defined? I mean, yes, I've read http://api.jquery.com/submit/ and it's kind of a trigger, but it must be defined somewhere, right? where? how is it possible that this code works? Thanks! Sorry, I know I'm so neeeeeeewbie.
The submit() method is defined on the "form" DOM element. jQuery is just calling into that method to submit the form on the page.
The submit function that jQuery is using is inside of the jQuery code itself. You're using the 'smarty' templating engine to include jQuery in your page with this line
<script type="text/javascript" src="{$smarty.const.__SERVER_URL__}scripts/jquery.js"></script>
Once you've done that, you now have access to all of the awesomeness that jQuery provides, such as, the submit()
function to submit a form. jQuery's version helps to make your submit work cross browser. If you'd like to see more on the submit function, look here.
it's you in the future, 7 years later.
Nobody answered your question properly. So I'll do my best.
A <form>
is an HTML object with some special properties that differentiate it from other HTML elements, the same way a <button>
or a link <a>
have special properties that differentiate them from others.
In particular, <form>
allows to send information to a server. The information is sent through an HTTP request, the method used is defined in the property method
(either GET
or POST
), while as the URL where the request is sent is specified in the property action
.
The way <form>
works is governed and specified the same way any other HTML objects are, via a standard. The official body in charge of it is W3C, here is the spec for forms:
https://www.w3.org/TR/html52/sec-forms.html
The spec is then freely implemented by browsers, so the specifics of 'where' the behaviour is defined is inside the guts of the browser core. For instance, you might find an implementation if you look deep enough in the Chromium Project, which is the core in which Chrome is based on. However knowing the specs is more than enough to work with it.
Going back to your specific example:
This form will create and send a POST request from the client page where this form appears with the information input in the form to the relative URL /contacto-enviado.html
Further Reading
For a nice explanation of how works in general, check: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data
Like you said submit
is a trigger for the onSubmit
event. So when its called it just makes the form invokes that event on the form... by default it will do the exact same thing as clicking a submit
input within the form.
精彩评论