0

How can I make the value of the first input text (number) disappear when I use the reset button as part of the following form:

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type="text" name="number" value="<?php echo $result;?>">
    <input type="submit">
    <input type="reset">
    <p name="result">The result is: <?php echo $result; ?> </p>
</form>
Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
  • 1
    Try echo all of the p tag – Zein Aug 01 '21 at 09:56
  • 3
    Does this answer your question? [How to reset ONLY a single input tag in a formfield with just html5](https://stackoverflow.com/questions/24351557/how-to-reset-only-a-single-input-tag-in-a-formfield-with-just-html5) – catcon Aug 01 '21 at 10:07
  • 1
    input `type='reset'` reset the whole form, if you want to reset just one input, you have to define your own event handler. Have a look at my suggest dupplicate – catcon Aug 01 '21 at 10:09

2 Answers2

0

You can do something like this with JS:

Define your elements

let reset_btn = document.getElementById('btn-one');
let default_btn = document.getElementById('btn-two');

When clicking on reset set value to null

reset_btn.onclick = function(){
  document.getElementById('name-input').value = '';
}

Set value back to default

default_btn.onclick = function(){
  document.getElementById('name-input').value = '<?php echo $result;?>';
}

Remember to add id's to your btns.

Gass
  • 7,536
  • 3
  • 37
  • 41
0

Here is how I would do it:

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
    <input type="text" id="input" name="number" value="<?php echo $result;?>">
    <input type="submit">
    <input type="button" onclick="resetInput()" value="Reset">
    <p name="result">The result is: <?php echo $result; ?> </p>
</form>

And the JavaScript:

function resetInput() {
    document.getElementById("input").value = "";
}

When clicking the button, the value of the first input with the id input will be set to an empty string.

Felix
  • 66
  • 3