{"id":411,"date":"2011-07-02T16:50:56","date_gmt":"2011-07-02T16:50:56","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=411"},"modified":"2014-12-30T21:48:46","modified_gmt":"2014-12-30T21:48:46","slug":"ajax-jquery-form","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/","title":{"rendered":"Enviar formulario con Ajax utilizando jQuery"},"content":{"rendered":"<p>Interesante script para <strong>enviar los datos de un formulario<\/strong> html sin necesidad de recargar la p\u00e1gina, es decir con <strong>AJAX<\/strong>, usando <strong>jQuery<\/strong>. Los datos son recibidos por un script hecho en PHP.<\/p>\n<p>El ejemplo que utilizamos se trata de un formulario que espera a que el usuario introduzca su nombre, email y tel\u00e9fono. Estos datos son validados con jQuery y hasta que no sean correctos no se procesar\u00e1 el formulario.<\/p>\n<p>Una vez los datos introducidos sean correctos y se pulse el bot\u00f3n \u00abEnviar\u00bb se ejecuta un archivo PHP que procesa esos datos envi\u00e1ndolos a la direcci\u00f3n de correo facilitada en el campo email. Todo este proceso sin recargar la p\u00e1gina.<\/p>\n<p>Dentro del c\u00f3digo jQuery debemos introducir algo como lo que sigue para poder trabajar con ajax y php:<\/p>\n<pre id=\"line1\">var dataString = 'name='+ name + '&amp;email=' + email + '&amp;phone=' + phone;\r\n\r\n$.ajax({\r\n      type: \"POST\",\r\n      url: \"bin\/process.php\",\r\n      data: dataString,\r\n      success: function() {\r\n        $('#contact_form').html(\"&lt;div id='message'&gt;&lt;\/div&gt;\");\r\n        $('#message').html(\"&lt;h2&gt;Tus datos han sido enviados correctamente!&lt;\/h2&gt;\")\r\n        .hide()\r\n        .fadeIn(1500, function() {\r\n          $('#message').append(\"&lt;img id='checkmark' src='images\/check.png' \/&gt;\");\r\n        });\r\n      }\r\n     });\r\n    return false;\r\n});<\/pre>\n<p>Si observamos el c\u00f3digo anterior vemos que el objeto ajax recibe los datos mediante POST para pas\u00e1rselos al archivo .php para que los procese. Al realizar esta acci\u00f3n, nos informa sobre ello.<\/p>\n<p>Cabe mencionar que antes de utilizar ajax para pasar los datos al archivo php es interesante validar cada dato mediante jQuery. Por ejemplo, para validar el nombre de usuario podr\u00edamos hacer antes algo como esto:<\/p>\n<pre id=\"line1\">var name = $(\"input#name\").val();\r\nif (name == \"\") {\r\n      $(\"label#name_error\").show();\r\n      $(\"input#name\").focus();\r\n      return false;\r\n}<\/pre>\n<p>En este caso primero obtenemos el valor del input con id=\u00bbname\u00bb y si est\u00e1 vacio mostraremos un error en el &lt;label&gt; con id=\u00bbname_error\u00bb.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/jquery-ajax\/tutorial.html\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interesante script para enviar los datos de un formulario html sin necesidad de recargar la p\u00e1gina, es decir con AJAX, usando jQuery. Los datos son recibidos por un script hecho en PHP. El ejemplo que utilizamos se trata de un formulario que espera a que el usuario introduzca su nombre, email y tel\u00e9fono. Estos datos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,5,3],"tags":[84,77],"class_list":["post-411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","category-php","tag-formularios","tag-validaciones"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Enviar formulario con Ajax utilizando jQuery - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Enviar formulario con Ajax utilizando jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Interesante script para enviar los datos de un formulario html sin necesidad de recargar la p\u00e1gina, es decir con AJAX, usando jQuery. Los datos son recibidos por un script hecho en PHP. El ejemplo que utilizamos se trata de un formulario que espera a que el usuario introduzca su nombre, email y tel\u00e9fono. Estos datos [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2011-07-02T16:50:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-30T21:48:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/\",\"name\":\"Enviar formulario con Ajax utilizando jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png\",\"datePublished\":\"2011-07-02T16:50:56+00:00\",\"dateModified\":\"2014-12-30T21:48:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Enviar formulario con Ajax utilizando jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Enviar formulario con Ajax utilizando jQuery - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Enviar formulario con Ajax utilizando jQuery - Jose Aguilar Blog","og_description":"Interesante script para enviar los datos de un formulario html sin necesidad de recargar la p\u00e1gina, es decir con AJAX, usando jQuery. Los datos son recibidos por un script hecho en PHP. El ejemplo que utilizamos se trata de un formulario que espera a que el usuario introduzca su nombre, email y tel\u00e9fono. Estos datos [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-07-02T16:50:56+00:00","article_modified_time":"2014-12-30T21:48:46+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/","url":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/","name":"Enviar formulario con Ajax utilizando jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png","datePublished":"2011-07-02T16:50:56+00:00","dateModified":"2014-12-30T21:48:46+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/07\/jquery4.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/ajax-jquery-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Enviar formulario con Ajax utilizando jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=411"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4420"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}