{"id":1810,"date":"2023-10-06T14:18:54","date_gmt":"2023-10-06T08:48:54","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1810"},"modified":"2023-10-06T21:45:29","modified_gmt":"2023-10-06T16:15:29","slug":"send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/","title":{"rendered":"Send Object data and variable data with FormData objects using Ajax-requests in jQuery"},"content":{"rendered":"\n<h2 style=\"font-size: 24px; color: #000 !important; margin-top: 20px; \">Send additional parameter as object and variable with form data with ajax using jQuery.<\/h2>\n\n\n\n<p>JavaScript \/ Ajax Code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function generateImageQr() {\n        var imageId = jQuery('#imageUploadQr').prop('files')&#91;0];\n        var formData = new FormData();\n\n        var visibility = jQuery('input&#91;name=\"visibility\"]:checked').val();\n        var tags = jQuery('#tags').val();\n        var img_title = jQuery('#img-title').val();\n        var description = jQuery('#description').val();\n        var source_url = jQuery('#source_url').val();\n        var cat_name = jQuery('#cat_name').val();\n        var cat_custom = jQuery('#cat_name').data(\"categarys\");\n        var sub_cat = jQuery('#sub_cat').val();\n        var series_cat = jQuery('#series_cat').val();\n        var actor_cat = jQuery('#actor_cat').val();\n        var seo_title = jQuery('#seo_title').val();\n        var seo_alt = jQuery('#seo_alt').val();\n\n        console.log(visibility);\n\n        var otherData = {\n            \"visible\": visibility,\n            \"tags\": tags,\n            \"img_title\": img_title,\n            \"description\": description,\n            \"source_url\": source_url,\n            \"cat_name\": cat_name,\n            \"cat_custom\": cat_custom,\n            \"sub_cat\": sub_cat,\n            \"actor_cat\": actor_cat,\n            \"series_cat\": series_cat,\n            \"seo_title\": seo_title,\n            \"seo_alt\": seo_alt\n        };\n\n        formData.append('file', imageId);\n\n        for (const &#91;key, value] of Object.entries(otherData)) {\n\n            formData.append(key, value);\n\n        }\n\n        console.log(formData);\n        $.ajax({\n            url: 'upload.php',\n            type: 'POST',\n            data: formData,\n            cache: false,\n            contentType: false,\n            processData: false,\n            success: function(data) {\n                console.log(data);\n               \/\/ location.reload();\n            }\n        });\n    }<\/code><\/pre>\n\n\n\n<p>FormData object is an iterable structure that resembles an array and contains numerous name-value pairs as well as maybe an HTML form.<\/p>\n\n\n\n<p>jQuery append() method is used to insert key value pair to the object as the last child the selected elements.<\/p>\n\n\n\n<p>PHP Code for form data handling <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if(isset($_FILES&#91;'file'])){\n\n     $rand = rand(1, 20);\n    \n    date_default_timezone_set(\"Asia\/Calcutta\"); \n        \n    $visible = filter_var($_POST&#91;'visible'], FILTER_SANITIZE_STRING);\n    $cat_id = filter_var($_POST&#91;'cat_name'], FILTER_SANITIZE_STRING);\n    $img_id = uniqid(\"img\");    \n    $tag = filter_var($_POST&#91;'tags'], FILTER_SANITIZE_STRING);\n    $title = filter_var($_POST&#91;'img_title'], FILTER_SANITIZE_STRING); \n    $description = filter_var($_POST&#91;'description'], FILTER_SANITIZE_STRING);   \n    \n\n\/\/    echo 'Get Uploaded File';   \n    \n    if(0 &lt; $_FILES&#91;'file']&#91;'error']){\n        echo $_FILES&#91;'file']&#91;'error'].'&lt;br&gt;'; \n    }else{\n       \n        $fileUploadPathName = $pathFolder.'_'.$_FILES&#91;'file']&#91;'name']; \n        \n        move_uploaded_file($_FILES&#91;'file']&#91;'tmp_name'], $fileUploadPathName); \n        $upload_size = $_FILES&#91;'file']&#91;'size'];\n        \n        $upload_size = number_format($upload_size \/ 1048576, 2) . ' MB';\n        \n       \/\/ echo $fileUploadPathName; \n       \n        \n        \/\/ Create connection\n        $conn = new mysqli($servername, $username, $password, $dbname);\n        \/\/ Check connection\n        if ($conn-&gt;connect_error) {\n          die(\"Connection failed: \" . $conn-&gt;connect_error);\n        }\n        \n         $array_sql = array();\n        \n        $array_sql&#91;'img_id'] = $img_id;    \n        $array_sql&#91;'visible'] = $visible;    \n        $array_sql&#91;'tag'] = $tag;    \n        $array_sql&#91;'title'] = $title;    \n        $array_sql&#91;'description'] = $description;    \n           \n        \n            foreach( array_keys($array_sql) as $key ) {\n                $fields&#91;] = \"`$key`\";\n                $values&#91;] = \"'\" . $array_sql&#91;$key] . \"'\";\n            }  \n\n            $fields = implode(\",\", $fields);\n            $values = implode(\",\", $values);\n \n            $sql =  \"INSERT INTO `store` ($fields) VALUES ($values) \";\n       \n        if ($conn-&gt;query($sql) === TRUE) {\n          echo \"New record created successfully\";\n        } else {\n          echo \"Error: \" . $sql . \"&lt;br&gt;\" . $conn-&gt;error;\n        }\n\n    $conn-&gt;close();\n        \n     \n    \n    }\n}   \n?&gt;<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Send additional parameter as object and variable with form data with ajax using jQuery. JavaScript \/ Ajax Code FormData object is an iterable structure that resembles an array and contains [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[30,23,28],"tags":[],"class_list":["post-1810","post","type-post","status-publish","format-standard","hentry","category-ajax","category-javascript-tutorial","category-jquery-code"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Send Object data and variable data with FormData objects using Ajax-requests in jQuery - MyFreeOnlineTools<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Send Object data and variable data with FormData objects using Ajax-requests in jQuery - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Send additional parameter as object and variable with form data with ajax using jQuery. JavaScript \/ Ajax Code FormData object is an iterable structure that resembles an array and contains [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-06T08:48:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-06T16:15:29+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Send Object data and variable data with FormData objects using Ajax-requests in jQuery\",\"datePublished\":\"2023-10-06T08:48:54+00:00\",\"dateModified\":\"2023-10-06T16:15:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/\"},\"wordCount\":78,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"AJAX\",\"JavaScript Tutorial\",\"jQuery Code\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/\",\"name\":\"Send Object data and variable data with FormData objects using Ajax-requests in jQuery - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2023-10-06T08:48:54+00:00\",\"dateModified\":\"2023-10-06T16:15:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Send Object data and variable data with FormData objects using Ajax-requests in jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Send Object data and variable data with FormData objects using Ajax-requests in jQuery - MyFreeOnlineTools","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Send Object data and variable data with FormData objects using Ajax-requests in jQuery - MyFreeOnlineTools","og_description":"Send additional parameter as object and variable with form data with ajax using jQuery. JavaScript \/ Ajax Code FormData object is an iterable structure that resembles an array and contains [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2023-10-06T08:48:54+00:00","article_modified_time":"2023-10-06T16:15:29+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Send Object data and variable data with FormData objects using Ajax-requests in jQuery","datePublished":"2023-10-06T08:48:54+00:00","dateModified":"2023-10-06T16:15:29+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/"},"wordCount":78,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["AJAX","JavaScript Tutorial","jQuery Code"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/","url":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/","name":"Send Object data and variable data with FormData objects using Ajax-requests in jQuery - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2023-10-06T08:48:54+00:00","dateModified":"2023-10-06T16:15:29+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/send-object-data-and-variable-data-with-formdata-objects-using-ajax-requests-in-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Send Object data and variable data with FormData objects using Ajax-requests in jQuery"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=1810"}],"version-history":[{"count":7,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1810\/revisions"}],"predecessor-version":[{"id":1818,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1810\/revisions\/1818"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}