This is part of my assessment and we have to use JavaScript HTML and PHP to make a calculator with buttons, not fields.
I have managed to make the 'interface' but cannot workout how to make the buttons work. I need the numbers to show in the input field (has to be readonly)
What I'm asking for is help with making the buttons I've created show in the input field:
I need to show the input within the text field
HTML
</head>
<body>
<input id="ip1" type="text" readonly="readonly"/><br/>
<button>1</button>
<button>2</button>
<button>3</button>
<button>CE</button> </br>
<button>4</button>
<button>5</button>
<button>6</button>
<button>/</button> <br>
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button> </br>
<button>0</button>
<button>-</button>
<button>+</button>
<button>=</button> </br>
</body>
</html>
JavaScript (jQuery)
<script>
$(document).ready(function() {
$("button").click(function() {
$.post("calc.php", { formText : $("#ip1").val() },
function(data, status) { $("#ip1").val(data);
});
});
});
</script>
PHP
<?php
$_POST['formText'];
?>
You can get the clicked button text by .text() first then set it to input field by .val(text). Example:
$(document).ready(function() {
$("button").click(function() {
var val = $(this).text();
if($.isNumeric(val)){ //for checking numeric number
$("#ip1").val(val);
}
});
});