How to mix an html form with the Holographic and 3D button demo without page reloading

Questions
1

So I have a simple html form with code

div
form action=“” id=“form1”
input type=“submit” value=“Set Output 0”
input type=“hidden” name=‘“Output_0”’ value=“1”
/form
form action=“” id=“form2”
input type=“submit” value=“Reset Output 0”
input type=“hidden” name=‘“Output_0”’ value=“0”
/form
Output 0 : :=“Output_0”: br
input id=“btn1” type=“button” name=‘“Output_0”’ value=“1”
input id=“btn2” type=“button” name=‘“Output_0”’ value=“0”
input id=“btn3” type=“button” name=‘“Output_0”’ onclick=“Output_0= 0;”
/div

And I’m using the holographic button demo

and there’s this documentation from stackoverflow about how to make a form not reload the page
using jquery referenced in method 2.

The issue I’m having is that in order to get the buttons to execute the form functionalities
I have to put the code like this

button.onPointerClickObservable.add(function () {

    if (output == 0) {

document.getElementById(“form1”).submit();
output = 1;
} else {

document.getElementById(“form2”).submit();
output = 0;
}
button.text = "Clicks: " + output;

return false;
});

The issue is that it causes the page to reload.
Can anyone figure this out?

2

I am not sure you need jquery for this, the pseudo code below should do the trick ?

@RaananW in case he gets other ideas ?

document.onsubmit = () => { 
// Do what you want
return false;
}
3

I believe preventDefault Event.preventDefault() - Web APIs | MDN will do the trick here. Call it in the submit callback and it will stop the default browser behavior, which is reloading on submit

1 Like
4

Thanks for the replies. I really appreciate the help.
Unfortunately those methods won’t work for what I’m needing. Because the way I need things to work, technically I need it to post but not refresh.
Some of those methods I was finding that the page actually does refresh, it just happens so fast you can’t tell until you add in a 3D environment where orientation gets set back to default lol

So I’ve found a way to get the posting I need happening by posting to a file in the background and come up with this code vomit

FIG.1

<script type="text/javascript"

$(document).ready(function() {

$.ajaxSetup({cache:false});
setInterval(function(){
$.get(“IOOutput0.htm”, function(result){
$(‘#output_label0’).text(result);
});
},1000);

$.ajaxSetup({cache:false});
setInterval(function(){
$.get(“IOOutput1.htm”, function(result){
$(‘#output_label1’).text(result);
});
},1000);

$(“button”).click(function(e){
var idClicked = e.target.id;
if( idClicked == “start0”)
{
url=“IOOutput0.htm”;
name=‘“webdata”.Output_0’;
}
if( idClicked == “stop0”)
{
url=“IOOutput0.htm”;
name=‘“webdata”.Output_0’;
}
if( idClicked == “start0”)
{
val=1;
}
if(idClicked == “stop0”)
{
val=0;
}
if( idClicked == “start1”)
{
url=“IOOutput1.htm”;
name=‘“webdata”.Output_1’;
}
if( idClicked == “stop1”)
{
url=“IOOutput1.htm”;
name=‘“webdata”.Output_1’;
}
if( idClicked == “start1”)
{
val=1;
}
if(idClicked == “stop1”)
{
val=0;
}
sdata=escape(name)+‘=’+val;
$.post(url,sdata,function(result){});
});

});
</script

So now the tricky part is taking this piece:
FIG.2

$(“button”).click(function(e){
var idClicked = e.target.id;
if( idClicked == “start0”)

And apply it to the babylon holographic buttons
The button referenced in FIG.2 just comes from normal html button with the id and name set like this:
FIG.3

button id=“start0”>Start</button

Which I think I can get the id for these buttons in the example code:
FIG.4

panel.addControl(button);

           button.text = "Button #" + panel.children.length;

I think I’m figuring it out here as I babylon so to speak hahaha