change input box and submit text after click
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#change").click(function(){
var $name = $(this);
if(this.value=="percent"){
$("#percent_input").show();
$("#flat_input").hide();
this.value = 'flat';
$name.text('Flat');
}else{
$("#percent_input").hide();
$("#flat_input").show();
this.value = 'percent';
$name.text('Percent');
}
});
});
</script>
</head>
<body>
<button id="change" value="percent">Percent</button>
<input id="percent_input" style="display:none" placeholder="Percent">
<input id="flat_input" style="display:none" placeholder="Flat">
</body>
</html>