jQuery code to detect whether form fields have the default value when a checkbox is unchecked How could I rewrite this jquery code to compact it in a more elegant form:



$(document).ready(function(){
     $('input[name="table_exist"]').click(function(){
      if($('input[name="table_name"]').val()=='users' &amp;&amp; $('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="table_name"]').val('');
   }
   else if($('input[name="table_name"]').val()=='' &amp;&amp; !$('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="table_name"]').val('users');
   }
   
   if($('input[name="user_id"]').val()=='user_id' &amp;&amp; $('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_id"]').val('');
   }
   else if($('input[name="user_id"]').val()=='' &amp;&amp; !$('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_id"]').val('user_id');
   }
   
   if($('input[name="user_name"]').val()=='user_name' &amp;&amp; $('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_name"]').val('');
   }
   else if($('input[name="user_name"]').val()=='' &amp;&amp; !$('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_name"]').val('user_name');
   }
   
   if($('input[name="user_email"]').val()=='user_email' &amp;&amp; $('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_email"]').val('');
   }
   else if($('input[name="user_email"]').val()=='' &amp;&amp; !$('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_email"]').val('user_email');
   }
   
   if($('input[name="user_pass"]').val()=='user_pass' &amp;&amp; $('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_pass"]').val('');
   }
   else if($('input[name="user_pass"]').val()=='' &amp;&amp; !$('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="user_pass"]').val('user_pass');
   }
   
   if($('input[name="joining_date"]').val()=='joining_date' &amp;&amp; $('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="joining_date"]').val('');
   }
   else if($('input[name="joining_date"]').val()=='' &amp;&amp; !$('input[name="table_exist"]').is(':checked'))
   {
    $('input[name="joining_date"]').val('joining_date');
   }
     });
 });
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form method="POST"&gt;

    &lt;h2&gt;DB Table&lt;/h2&gt;

    &lt;p&gt;
     Activate the slider if you already have your own database table created!
    &lt;/p&gt;

    &lt;div class="inputCheckBox"&gt;
     &lt;input type="checkbox" name="table_exist" /&gt;
    &lt;/div&gt;

    &lt;p&gt;
     Edit here only if you have your own predifined table header names!
    &lt;/p&gt;

    &lt;div class="inputBox"&gt;
     &lt;input type="text" name="table_name" value="users" required /&gt;
     &lt;label&gt;Table Name&lt;/label&gt;
    &lt;/div&gt;

    &lt;div class="inputBox"&gt;
     &lt;input type="text" name="user_id" value="user_id" required /&gt;
     &lt;label&gt;User ID&lt;/label&gt;
    &lt;/div&gt;

    &lt;div class="inputBox"&gt;
     &lt;input type="text" name="user_name" value="user_name" required /&gt;
     &lt;label&gt;User Name&lt;/label&gt;
    &lt;/div&gt;

    &lt;div class="inputBox"&gt;
     &lt;input type="text" name="user_email" value="user_email" required /&gt;
     &lt;label&gt;User E-mail&lt;/label&gt;
    &lt;/div&gt;

    &lt;div class="inputBox"&gt;
     &lt;input type="text" name="user_pass" value="user_pass" required /&gt;
     &lt;label&gt;User Password&lt;/label&gt;
    &lt;/div&gt;

    &lt;div class="inputBox"&gt;
     &lt;input type="text" name="joining_date" value="joining_date" required /&gt;
     &lt;label&gt;User Added Date&lt;/label&gt;
    &lt;/div&gt;

    &lt;button type="submit" name="btn-install"&gt;
     Install
    &lt;/button&gt;

   &lt;/form&gt;




The whole process is to identify if the fields have the default values when a checkbox is unchecked. If the state is changed to checked then empty all fields to input custom information/values. If unchecked again it returns the initial values.
There're multiple ways to do that. You should use a loop.

I've wrote a small script, that would do the job. I do not know if the if block is correct but you should easily fix that with this base.



$(document).ready(function(){
$('input[name="table_exist"]').click(function(){
 var table_exist_checked = $('input[name="table_exist"]').is(':checked');
 
 var fields = [
  'table_name',
  'user_id',
  'user_name',
  'user_email',
  'user_pass',
  'joining_date',
 ]; // Your field names
 
 // iterate over all fieldnames
 for(var index of fields) {
  var fieldName = fields[index]; // extract current fieldName
  var $elem = $('input[name="' + fieldName + '"]'); // save current element so we do not need to repeat
  
  // This is ur if-else. I do not exactly know if this is correct
   if($elem.val() == fieldName &amp;&amp; table_exist_checked){
   $elem.val('');
  } else if($elem.val()=='' &amp;&amp; !table_exist_checked){
   $elem.val(fieldName);
  }
 }
 
}); });