javascript for hidden button request

[rcane]

While I'm pretty sure you can make some listeners to render a button on an html form invisible until someone starts filling out the field, does making it invisible remove it?

Meaning, if someone hovers over the spot, will their cursor recognize the button and risk a submit?

Interested to see any code examples if you have it.

[Diego Andrés]

No risk but you have to add more logic to it since they could also submit with the keyboard

[rcane]

Is there an html method to include--on submit--those values that I had appear in the form when it was displayed?

for example, a field called november:

Code Select Expand


<input id="inputField" style="text-align: right; margin-left: 15px"type="number" step="0.01" name="november" size="7" value="<?php echo $nov; ?>" required>


The value shown as the echo'd variable doesn't actually get passed during the submit.

[Sesquipedalian]

If you want there to be a default value that the user can edit, just set the input's value parameter to that default value in your HTML.

If instead you are trying to have the form submit a value that the user is not supposed to edit, try <input type="hidden">.

[dodos26]

To safe hidden:

Code Select Expand

button.myButton {
  visibility: hidden;
  pointer-events: none;
}
All buttons with class myButton
visibility: hidden;  Hide button
pointer-events: none; disable keys and other events.


To insert a default value that is reliable, but the text that the user types is already visible. javascript used.:

Code Select Expand

<style>
#myInput {
  color: transparent;
  display: inline-block;
  width: 150px;
}
</style>
 
<input type="text" id="myInput" value="value default">
 
<script>
const myInput = document.getElementById("myInput");

myInput.addEventListener("focus", function(){
  if(this.value === 'value default') {
    this.value = '';
    this.style.color = 'initial';
  }
});

myInput.addEventListener("blur", function(){
  if(this.value === '') {
    this.value = 'value default';
    this.style.color = 'transparent';
  }
});
</script>