News:

Wondering if this will always be free?  See why free is better.

Main Menu

javascript for hidden button request

Started by rcane, February 09, 2023, 06:36:25 PM

Previous topic - Next topic

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

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:


<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">.
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

dodos26

#4
To safe hidden:

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.:
<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>

Advertisement: