taskinoz/FormValues.html

## FormValues.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      function logVal(){
        test="";
        $("form input[type=checkbox]:checked").each(function(){
          test+=$(this).val()+"\n";
        })
        return test;
      }

      function download(text, name) {
        var a = document.getElementById("dl");
        var file = new Blob([text], {type: 'text/plain'});
        a.href = URL.createObjectURL(file);
        a.download = name;
      }

      $('form').on("change", function(event){
        event.preventDefault();
        console.log(logVal());
        if (logVal()==""){
          $('#dl').removeAttr('href');
        }
        else {
          download(logVal(), 'custom.cfg');
        }
      });
    });
  </script>
  <style media="screen">
    body{
      font-family: Arial;
    }
    #dl{
      background: #777;
      border-color: #777;
      color: #ddd;
      opacity: 0.7;
    }
    #dl[href]{
      background: #148fca;
      color: #fff;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <h1>Config Creator</h1>
      </div>
    </div>
    <div class="row">
      <form>
        <section>
          <h2>HUD</h2>
          <div class="config-opt">
            <input id="opt1" type="checkbox" name="1" value="sv_cheats 1">
            <label for="opt1">Enable Cheats</label>
          </div>
          <div class="config-opt">
            <input id="opt2" type="checkbox" name="2" value="cl_showpos 1">
            <label for="opt2">Show Position</label>
          </div>
          <div class="config-opt">
            <input id="opt3" type="checkbox" name="3" value="cl_showfps 1">
            <label for="opt3">Show FPS</label>
          </div>
        </section>
        <section>
          <h2>Misc</h2>
          <div class="config-opt">
            <input id="opt4" type="checkbox" name="4" value="wallrun_enable 0">
            <label for="opt4">Disable Wallrun</label>
          </div>
        </section>
        <section>
          <h2>Binds</h2>
          <div class="config-opt">
            <div class="bind">
              <p>Bind <input type="text" placeholder="KEY"> <input type="text" name="" list="binds"> <input type="text" placeholder="e.g Quicksave, 100"></p>
            </div>
          </div>
        </section>
      </form>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <a id="dl" class="btn btn-primary" role="button" download>Download</a>
      </div>
    </div>
  </div>
  <datalist id="binds">
    <option value="save">Quicksave</option>
    <option value="load">Quicksave</option>
    <option value="host_timescale">Timescale</option>
    <option value="sv_gravity">Gravity</option>
    <option value="">Blank</option>
  </datalist>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	function logVal(){
	test="";
	$("form input[type=checkbox]:checked").each(function(){
	test+=$(this).val()+"\n";
	})
	return test;
	}

	function download(text, name) {
	var a = document.getElementById("dl");
	var file = new Blob([text], {type: 'text/plain'});
	a.href = URL.createObjectURL(file);
	a.download = name;
	}

	$('form').on("change", function(event){
	event.preventDefault();
	console.log(logVal());
	if (logVal()==""){
	$('#dl').removeAttr('href');
	}
	else {
	download(logVal(), 'custom.cfg');
	}
	});
	});
	</script>
	<style media="screen">
	body{
	font-family: Arial;
	}
	#dl{
	background: #777;
	border-color: #777;
	color: #ddd;
	opacity: 0.7;
	}
	#dl[href]{
	background: #148fca;
	color: #fff;
	opacity: 1;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-lg-12">
	<h1>Config Creator</h1>
	</div>
	</div>
	<div class="row">
	<form>
	<section>
	<h2>HUD</h2>
	<div class="config-opt">
	<input id="opt1" type="checkbox" name="1" value="sv_cheats 1">
	<label for="opt1">Enable Cheats</label>
	</div>
	<div class="config-opt">
	<input id="opt2" type="checkbox" name="2" value="cl_showpos 1">
	<label for="opt2">Show Position</label>
	</div>
	<div class="config-opt">
	<input id="opt3" type="checkbox" name="3" value="cl_showfps 1">
	<label for="opt3">Show FPS</label>
	</div>
	</section>
	<section>
	<h2>Misc</h2>
	<div class="config-opt">
	<input id="opt4" type="checkbox" name="4" value="wallrun_enable 0">
	<label for="opt4">Disable Wallrun</label>
	</div>
	</section>
	<section>
	<h2>Binds</h2>
	<div class="config-opt">
	<div class="bind">
	<p>Bind <input type="text" placeholder="KEY"> <input type="text" name="" list="binds"> <input type="text" placeholder="e.g Quicksave, 100"></p>
	</div>
	</div>
	</section>
	</form>
	</div>
	<div class="row">
	<div class="col-lg-12">
	<a id="dl" class="btn btn-primary" role="button" download>Download</a>
	</div>
	</div>
	</div>
	<datalist id="binds">
	<option value="save">Quicksave</option>
	<option value="load">Quicksave</option>
	<option value="host_timescale">Timescale</option>
	<option value="sv_gravity">Gravity</option>
	<option value="">Blank</option>
	</datalist>

	</body>
	</html>