How to generate event from HTML dropdown select list?

kkl · Post by **kkl** » Thu Dec 29, 2016 11:06 pm

This seems like a basic question, but I couldn't find an example. On a webserver plugin html page, how do you generate an event from a dropdown select list? Here's what I have so far:

Code: Select all

<form method="get" action="selecttemp.html" name="Adjust Temp">
<select name="Adjust">
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
</select>
</form>

What am I missing that would push the value selected to EG? Thanks.

yokel22 · Post by **yokel22** » Fri Dec 30, 2016 1:29 am

You need to setup a OnChange javascript function. Something like this:

Code: Select all

<script>
function onSelectFunction() {
    var value = document.getElementById("setTemp").value;
    "your get request"; 
}
</script>

Code: Select all

<form method="get" action="selecttemp.html" name="Adjust Temp">
<select id="setTemp" name="Adjust" onchange="onSelectFunction()">
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
</select>
</form>

Or you can set it up globally for all Selects like this:

Code: Select all

$('input[type="select"]').bind('change', function(event){
        var id = $(this).attr('id');
        var selected = $("#"+id+" option:selected");
        "your get request";

});

If you see this thread, there is a demo that's shows this. viewtopic.php?f=13&t=9487

kkl · Post by **kkl** » Fri Dec 30, 2016 5:21 am

Thanks for trying to help, but I must be too dense. I still couldn't get it too work.

Code: Select all

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>select6</title>
<script>
function onSelectFunction() {
var value = document.getElementById("setTemp").value;
"your get request";
}
</script>
</head>
<body>
<form method="get" action="selecttemp.html" name="Adjust Temp">
<select id="SetTemp" name="Adjust" onchange="onSelectFunction()">
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
</select>
</form>
</body>
</html>

Since you advised using javascript, I googled some other very basic examples and tried them. I don't get an Event generated in EG. What am I still missing?

kgschlosser · Post by **kgschlosser** » Fri Dec 30, 2016 11:18 am

it looks as tho you are missing the trigger event from the java script

this link should get ya going.

viewtopic.php?f=13&t=8151

it's gonna have everything you need

kkl · Post by **kkl** » Fri Dec 30, 2016 6:18 pm

The problem for me is that javascript might as well be Swahili, without google translate. I did find an example of basic HTML that works, as adapted:

Code: Select all

<form method="get" action="status.html" name="Adjust Temp">
<select onchange="window.location.href=this.value;">
<option disabled="disabled" selected="selected" value=""></option>
<option value="?65">65</option>
<option value="?66">66</option>
<option value="?67">67</option>
<option value="?68">68</option>
<option value="?69">69</option>
<option value="?70">70</option>
</select>
</form>

Example event: HTTP.65 []

Now the problem is that I use <meta http-equiv="refresh" content="5"> to refresh the page, and the event keeps getting sent on every refresh. Maybe a javascript version would avoid that.

yokel22 · Post by **yokel22** » Fri Dec 30, 2016 6:30 pm

Sorry that was my fault. I had a the id Case mismatched, i fixed the above example now. If your using raw javascript this function will work.
If you can show me how you have your get request to the server set up i can add it for you.

Code: Select all

<script>
function onSelectFunction() {
    var value = document.getElementById("setTemp").value;
    alert(value);
}
</script>

<form method="get" action="selecttemp.html" name="Adjust Temp">
<select id="setTemp" name="Adjust" onchange="onSelectFunction()">
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
</select>
</form>

kkl · Post by **kkl** » Fri Dec 30, 2016 7:15 pm

That code is progress. Now when I select an item, I get a popup that says, <Webserver> says: 68, but no EG event.

I would normally have a link like this, "<a href="commands.html?Test1">This is Test1</a>". When the link is selected, I would get an EG event like HTTP.Test1[]. That's what I'm looking for.

yokel22 · Post by **yokel22** » Fri Dec 30, 2016 7:33 pm

that is your get request i was referencing. I set up that alert, just to show that it was functioning. Try this:

Code: Select all

<script>
function onSelectFunction() {
    var value = document.getElementById("setTemp").value;
    window.location.href = "commands.html?Test1&" + value;
}
</script>

I would still look at one of the WS tutorials. It will probably change your thinking on how to go about all this stuff.

kkl · Post by **kkl** » Fri Dec 30, 2016 7:55 pm

I really appreciate the help. That code works great. Because the page is set to refresh, once an item is selected, the event keeps getting generated. Any idea how to resolve that? I'm just trying to do a quick and dirty for my own use.

Edit: The repeat appears to be because the page changes from *.html to *.html?&69

yokel22 · Post by **yokel22** » Fri Dec 30, 2016 8:12 pm

I don't experience this behavior with that code. It just generates the event once. So i'm not really sure what's going on.

This is the test html page i'm using. FYI, if you used a websocket connection this would be a moot issue.

Code: Select all

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>



</head>

<body>

<script>
function onSelectFunction() {
    var value = document.getElementById("setTemp").value;
    window.location.href = "index.html?Test1&" + value;
}
</script>

<form method="get" action="selecttemp.html" name="Adjust Temp">
<select id="setTemp" name="Adjust" onchange="onSelectFunction()">
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
</select>
</form>

</body>
</html>

yokel22 · Post by **yokel22** » Fri Dec 30, 2016 9:29 pm

Okay, try it like this. I think it should work without multiple events sending it as an ajax post instead.

Code: Select all

<script>
function onSelectFunction() {
    var value = document.getElementById("setTemp").value;
    var request = new XMLHttpRequest();
	request.open('POST', 'EG', true);
	request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	request.send('test1&' + value);
}
</script>

kkl · Post by **kkl** » Fri Dec 30, 2016 10:21 pm

Sorry, I was referencing my earlier comment that I automatically refresh the page with <meta http-equiv="refresh" content="5">. I don't have a clue how to setup a websocket connection to do this.

kkl · Post by **kkl** » Fri Dec 30, 2016 10:25 pm

yokel22 wrote:Okay, try it like this. I think it should work without multiple events sending it as an ajax post instead.
Code: Select all
<script>
function onSelectFunction() {
    var value = document.getElementById("setTemp").value;
    var request = new XMLHttpRequest();
	request.open('POST', 'EG', true);
	request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	request.send('test1&' + value);
}
</script>

Fantastic! That works perfectly. Thanks so much.

yokel22 · Post by **yokel22** » Fri Dec 30, 2016 10:51 pm

Excellent.

EventGhost

How to generate event from HTML dropdown select list?

How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?

Re: How to generate event from HTML dropdown select list?