<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: pavankumarsadhu</title>
    <description>The latest articles on DEV Community by pavankumarsadhu (@pavankumarsadhu).</description>
    <link>https://dev.to/pavankumarsadhu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F695337%2Fd6abf6fa-9d90-47b8-8b7a-5c6da1345969.jpg</url>
      <title>DEV Community: pavankumarsadhu</title>
      <link>https://dev.to/pavankumarsadhu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/pavankumarsadhu"/>
    <language>en</language>
    <item>
      <title>increase wordpress upload limit up to 1000GB</title>
      <dc:creator>pavankumarsadhu</dc:creator>
      <pubDate>Sat, 04 Sep 2021 09:34:33 +0000</pubDate>
      <link>https://dev.to/pavankumarsadhu/increase-wordpress-upload-limit-up-to-1000gb-o24</link>
      <guid>https://dev.to/pavankumarsadhu/increase-wordpress-upload-limit-up-to-1000gb-o24</guid>
      <description>&lt;p&gt;Hi guys, Today we will see how to increase wordpress upload limit up to 1000GB.&lt;/p&gt;

&lt;p&gt;In wordpress, by default wordpress sets some limit for uploading. If we cross that limit, wordpress will not allow to upload. &lt;/p&gt;

&lt;p&gt;For website development purpose, that limit is not at all efficient. So to solve that issue, I developed a Increase Upload Limit Plugin.&lt;/p&gt;

&lt;p&gt;Using this Plugin, you can able to increase the upload limit to a huge value, up to 1000GB with only one click. And this Plugin is available for absolutely LIFETIME Free of Cost.&lt;/p&gt;

&lt;p&gt;From now on, you need not to worry about that issue, as plugin is resolving that issue.&lt;/p&gt;

&lt;p&gt;You can download plugin from &lt;a href="https://wordpress.org/plugins/increase-upload-limit/"&gt;here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. &lt;/p&gt;

&lt;p&gt;Social Profile : &lt;a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have a Nice Day!&lt;/p&gt;

</description>
      <category>wordpress</category>
    </item>
    <item>
      <title>How to show alert box javascript?</title>
      <dc:creator>pavankumarsadhu</dc:creator>
      <pubDate>Thu, 02 Sep 2021 17:16:54 +0000</pubDate>
      <link>https://dev.to/pavankumarsadhu/how-to-show-alert-box-javascript-84h</link>
      <guid>https://dev.to/pavankumarsadhu/how-to-show-alert-box-javascript-84h</guid>
      <description>&lt;p&gt;Hi guys, Today we will see how to show alert box using javascript.&lt;/p&gt;

&lt;p&gt;To show alert box, we use javascript default function "alert()".&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;msg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hey, you are a developer!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;alert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;msg&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this way, we can show alert box using javascript.&lt;/p&gt;

&lt;p&gt;Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. &lt;/p&gt;

&lt;p&gt;Read: &lt;a href="https://wordpress.org/plugins/increase-upload-limit/"&gt;How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Social Profile : &lt;a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have a Nice Day!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>html</category>
      <category>wordpress</category>
    </item>
    <item>
      <title>image download using html</title>
      <dc:creator>pavankumarsadhu</dc:creator>
      <pubDate>Tue, 31 Aug 2021 17:55:15 +0000</pubDate>
      <link>https://dev.to/pavankumarsadhu/image-download-using-html-d3a</link>
      <guid>https://dev.to/pavankumarsadhu/image-download-using-html-d3a</guid>
      <description>&lt;p&gt;Hi guys,&lt;/p&gt;

&lt;p&gt;Today we will see how to make image download when user clicks on image using html.&lt;/p&gt;

&lt;p&gt;For that, we need "download" attribute. We need to keep this attribute in the tag, then when the user clicks on image, automatically image get downloaded.&lt;/p&gt;

&lt;p&gt;Method 1:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/wp-content/uploads/2021/08/coding-vs-programming-2.jpg"&lt;/span&gt; &lt;span class="na"&gt;download&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/wp-content/uploads/2021/08/coding-vs-programming-2.jpg"&lt;/span&gt; &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"width:200px;height:100px;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this method, when the user clicks on the image, image will be downloaded with the filename "coding-vs-programming-2".&lt;/p&gt;

&lt;p&gt;Method 2:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"/wp-content/uploads/2021/08/coding-vs-programming-2.jpg"&lt;/span&gt; &lt;span class="na"&gt;download=&lt;/span&gt;&lt;span class="s"&gt;"filename"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"/wp-content/uploads/2021/08/coding-vs-programming-2.jpg"&lt;/span&gt; &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"width:200px;height:100px;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this method, when the user clicks on the image, image will be downloaded with the filename "filename".&lt;/p&gt;

&lt;p&gt;Note: Same origin links can only be downloadable.&lt;/p&gt;

&lt;p&gt;Read: &lt;a href="https://wordpress.org/plugins/increase-upload-limit/"&gt;How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Social Profile : &lt;a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have a Nice Day!&lt;/p&gt;

</description>
      <category>html</category>
      <category>webdev</category>
      <category>wordpress</category>
      <category>css</category>
    </item>
    <item>
      <title>How to check resolution of laptop/computer using JavaScript?</title>
      <dc:creator>pavankumarsadhu</dc:creator>
      <pubDate>Mon, 30 Aug 2021 16:15:09 +0000</pubDate>
      <link>https://dev.to/pavankumarsadhu/how-to-check-resolution-of-laptop-computer-using-javascript-11ol</link>
      <guid>https://dev.to/pavankumarsadhu/how-to-check-resolution-of-laptop-computer-using-javascript-11ol</guid>
      <description>&lt;p&gt;Hi guys,&lt;/p&gt;

&lt;p&gt;Today we will see how to check resolution of laptop/computer using JavaScript.&lt;/p&gt;

&lt;p&gt;To check screen width and height, we have default functions in JavaScript.&lt;/p&gt;

&lt;p&gt;They are:&lt;/p&gt;

&lt;p&gt;1.screen.width - to check the screen width&lt;/p&gt;

&lt;p&gt;2.screen.height - to check the screen height&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;screen&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;screen&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;//prints output in console&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;x&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;+&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// my output: 1366x768&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Read: &lt;a href="https://wordpress.org/plugins/increase-upload-limit/"&gt;How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this way, we can check the user laptop/computer resolution.&lt;/p&gt;

&lt;p&gt;Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. &lt;/p&gt;

&lt;p&gt;Social Profile : &lt;a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have a Nice Day!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>html</category>
      <category>wordpress</category>
    </item>
    <item>
      <title>mysql database connection in php</title>
      <dc:creator>pavankumarsadhu</dc:creator>
      <pubDate>Sun, 29 Aug 2021 13:57:47 +0000</pubDate>
      <link>https://dev.to/pavankumarsadhu/mysql-database-connection-in-php-lj</link>
      <guid>https://dev.to/pavankumarsadhu/mysql-database-connection-in-php-lj</guid>
      <description>&lt;p&gt;Hi guys,&lt;/p&gt;

&lt;p&gt;Today, we will see about mysql database connection in php.&lt;/p&gt;

&lt;p&gt;In the world of web development, data plays a key role. To give best experience to the users, we need to keep track of user steps to make comfortable. Definitely we need to store data related to users.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?php&lt;/span&gt;
&lt;span class="nv"&gt;$servername&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"localhost"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;//your servername&lt;/span&gt;
&lt;span class="nv"&gt;$username&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"username"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// your db username&lt;/span&gt;
&lt;span class="nv"&gt;$password&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"password"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// your db password&lt;/span&gt;
&lt;span class="nv"&gt;$database_name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;"database_name"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// your db name&lt;/span&gt;

&lt;span class="c1"&gt;// connect to the server&lt;/span&gt;
&lt;span class="nv"&gt;$conn&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;mysqli&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$servername&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nv"&gt;$username&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nv"&gt;$password&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nv"&gt;$database_name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;//check whether it is connected or not.&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$conn&lt;/span&gt;&lt;span class="o"&gt;-&amp;gt;&lt;/span&gt;&lt;span class="n"&gt;connect_error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Not Connected"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;else&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Successfully Connected"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="cp"&gt;?&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Read: &lt;a href="https://wordpress.org/plugins/increase-upload-limit/"&gt;How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this way, we will connect to the MySQL Server using PHP.&lt;/p&gt;

&lt;p&gt;Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. &lt;/p&gt;

&lt;p&gt;Social Profile : &lt;a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have a Nice Day!&lt;/p&gt;

</description>
      <category>mysql</category>
      <category>php</category>
      <category>webdev</category>
      <category>wordpress</category>
    </item>
    <item>
      <title>how to insert comment in html</title>
      <dc:creator>pavankumarsadhu</dc:creator>
      <pubDate>Sun, 29 Aug 2021 12:45:49 +0000</pubDate>
      <link>https://dev.to/pavankumarsadhu/how-to-comment-in-html-85o</link>
      <guid>https://dev.to/pavankumarsadhu/how-to-comment-in-html-85o</guid>
      <description>&lt;p&gt;Hi guys,&lt;/p&gt;

&lt;p&gt;Today we will see how to insert comment in html.&lt;/p&gt;

&lt;p&gt;When it comes to the coding documentation, commenting is plays an important role, as it indicates what is what.&lt;/p&gt;

&lt;p&gt;In HTML, in order to comment, use this type of Structure.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- This is a comment --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;In this way, we will comment in HTML.&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. &lt;/p&gt;

&lt;p&gt;Read: &lt;a href="https://wordpress.org/plugins/increase-upload-limit/"&gt;How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Social Profile : &lt;a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have a Nice Day!&lt;/p&gt;

</description>
      <category>html</category>
      <category>webdev</category>
      <category>wordpress</category>
    </item>
    <item>
      <title>Submit Form without refresh using AJAX</title>
      <dc:creator>pavankumarsadhu</dc:creator>
      <pubDate>Sun, 29 Aug 2021 09:44:18 +0000</pubDate>
      <link>https://dev.to/pavankumarsadhu/submit-form-without-refresh-using-ajax-2fen</link>
      <guid>https://dev.to/pavankumarsadhu/submit-form-without-refresh-using-ajax-2fen</guid>
      <description>&lt;p&gt;Hi all,&lt;/p&gt;

&lt;p&gt;Today we will see how to submit form without refreshing page using ajax.&lt;/p&gt;

&lt;p&gt;It involves 3 simple steps.&lt;/p&gt;

&lt;p&gt;Step 1:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;form&lt;/span&gt; &lt;span class="na"&gt;method=&lt;/span&gt;&lt;span class="s"&gt;"post"&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"myForm"&lt;/span&gt; &lt;span class="na"&gt;action=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"text"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"UserName"&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"username"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"username"&lt;/span&gt; &lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"email"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"UserEmail"&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"useremail"&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"useremail"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"button"&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"Login"&lt;/span&gt; &lt;span class="na"&gt;onclick=&lt;/span&gt;&lt;span class="s"&gt;"submitForm()"&lt;/span&gt; &lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/form&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"response"&lt;/span&gt; &lt;span class="nt"&gt;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add above HTML simple form, which takes simple information Name &amp;amp; Email. Add an onclick EventListener to button, which will be triggered on click.&lt;/p&gt;

&lt;p&gt;Step 2:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;submitForm&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;formData&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nx"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#myForm&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;serialize&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nx"&gt;$&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;ajax&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
&lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;post&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="na"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nx"&gt;formData&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="na"&gt;success&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;
&lt;span class="nx"&gt;$&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#response&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the crucial step where we send data using ajax. Using serialize method, store the form data in a variable, and pass variable as data, in the above mentioned format. Store response on success in a div tag.&lt;/p&gt;

&lt;p&gt;Note: Add above javascript code after above HTML Code, otherwise javascript will throw an error.&lt;/p&gt;

&lt;p&gt;Step 3:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?php&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;isset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$_POST&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'username'&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="k"&gt;isset&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$_POST&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'useremail'&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt;
&lt;span class="p"&gt;{&lt;/span&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s2"&gt;"Form Successfully submitted"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;exit&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="cp"&gt;?&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using PHP, On success ,this data will be sent as response, and in javascript we display the response in div tag.&lt;/p&gt;

&lt;p&gt;Note: Add above php code at the top of page, if you add in the middle of the page, you will get unnecessary response in div tag.&lt;/p&gt;

&lt;p&gt;As ajax to make it work, add below script in head tag.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this way, we can submit form without refresh. In this post, we are just displaying a message to user on submission of form. But we can also increase the complexity by sending mail to user, checking data in db whether user is already registered or not ...&lt;/p&gt;

&lt;p&gt;Thanks for taking your valuable time for reading my post, if you have any queries , please leave a comment and will respond. If you find this post useful, please share it. &lt;/p&gt;

&lt;p&gt;Read: &lt;a href="https://wordpress.org/plugins/increase-upload-limit/"&gt;How to Increase upload limit upto 1000GB in Wordpress using Increase Upload Limit Plugin for LIFETIME Free of Cost?&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Social Profile : &lt;a href="https://www.linkedin.com/in/pavan-kumar-sadhu-47693818b/"&gt;LinkedIn&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Have a Nice Day!&lt;/p&gt;

</description>
      <category>ajax</category>
      <category>javascript</category>
      <category>php</category>
      <category>wordpress</category>
    </item>
  </channel>
</rss>
