jQuery code to detect whether form fields have the default value when a checkbox is unchecked

Question

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' && $('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="table_name"]').val('');
			}
			else if($('input[name="table_name"]').val()=='' && !$('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="table_name"]').val('users');
			}
			
			if($('input[name="user_id"]').val()=='user_id' && $('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_id"]').val('');
			}
			else if($('input[name="user_id"]').val()=='' && !$('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_id"]').val('user_id');
			}
			
			if($('input[name="user_name"]').val()=='user_name' && $('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_name"]').val('');
			}
			else if($('input[name="user_name"]').val()=='' && !$('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_name"]').val('user_name');
			}
			
			if($('input[name="user_email"]').val()=='user_email' && $('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_email"]').val('');
			}
			else if($('input[name="user_email"]').val()=='' && !$('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_email"]').val('user_email');
			}
			
			if($('input[name="user_pass"]').val()=='user_pass' && $('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_pass"]').val('');
			}
			else if($('input[name="user_pass"]').val()=='' && !$('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="user_pass"]').val('user_pass');
			}
			
			if($('input[name="joining_date"]').val()=='joining_date' && $('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="joining_date"]').val('');
			}
			else if($('input[name="joining_date"]').val()=='' && !$('input[name="table_exist"]').is(':checked'))
			{
				$('input[name="joining_date"]').val('joining_date');
			}
	    });
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST">

				<h2>DB Table</h2>

				<p>
					Activate the slider if you already have your own database table created!
				</p>

				<div class="inputCheckBox">
					<input type="checkbox" name="table_exist" />
				</div>

				<p>
					Edit here only if you have your own predifined table header names!
				</p>

				<div class="inputBox">
					<input type="text" name="table_name" value="users" required />
					<label>Table Name</label>
				</div>

				<div class="inputBox">
					<input type="text" name="user_id" value="user_id" required />
					<label>User ID</label>
				</div>

				<div class="inputBox">
					<input type="text" name="user_name" value="user_name" required />
					<label>User Name</label>
				</div>

				<div class="inputBox">
					<input type="text" name="user_email" value="user_email" required />
					<label>User E-mail</label>
				</div>

				<div class="inputBox">
					<input type="text" name="user_pass" value="user_pass" required />
					<label>User Password</label>
				</div>

				<div class="inputBox">
					<input type="text" name="joining_date" value="joining_date" required />
					<label>User Added Date</label>
				</div>

				<button type="submit" name="btn-install">
					Install
				</button>

			</form>

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.

user188924 · Accepted Answer · 2018-12-26 16:40:29Z

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 && table_exist_checked){
			$elem.val('');
		} else if($elem.val()=='' && !table_exist_checked){
			$elem.val(fieldName);
		}
	}
	
}); });

user1286956 · Accepted Answer · 2018-12-26 18:50:58Z

Following @ArayniMax example I fixed it this way:

$(document).ready(function(){
    $('input[name="table_exist"]').click(function(){

        var inputCheck = $('input[name="table_exist"]').is(':checked');

        var fields = {
            'table_name': 'users',
            'user_id': 'user_id',
            'user_name': 'user_name',
            'user_email': 'user_email',
            'user_pass': 'user_pass',
            'joining_date': 'joining_date'
        };

        $.each(fields, function(key, value) {

            var fieldInput = $('input[name="' + key + '"]');

            if(fieldInput.val()==value && inputCheck)
            {
                fieldInput.val('');
            }
            else if(fieldInput.val()=='' && !inputCheck)
            {
                fieldInput.val(value);
            }
        });
    });
});

Thank you for your help everyone!

Stack Exchange Network

jQuery code to detect whether form fields have the default value when a checkbox is unchecked

2 Answers 2

You must log in to answer this question.

Hot Network Questions

jQuery code to detect whether form fields have the default value when a checkbox is unchecked

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions