How to generate event from HTML dropdown select list?

If you have a question or need help, this is the place to be.

How to generate event from HTML dropdown select list?

Postby 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.
kkl
Experienced User
 
Posts: 297
Joined: Wed May 04, 2011 9:32 pm

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

Postby 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. http://www.eventghost.net/forum/viewtopic.php?f=13&t=9487
Last edited by yokel22 on Fri Dec 30, 2016 6:31 pm, edited 1 time in total.
yokel22
Experienced User
 
Posts: 67
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city

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

Postby 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?
kkl
Experienced User
 
Posts: 297
Joined: Wed May 04, 2011 9:32 pm

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

Postby 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
A loved one and Time, The 2 things that can never be replaced.

Family, The only thing you don't get to choose in life.
User avatar
kgschlosser
Site Admin
 
Posts: 1254
Joined: Fri Jun 05, 2015 5:43 am
Location: Rocky Mountains, Colorado USA

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

Postby 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.
kkl
Experienced User
 
Posts: 297
Joined: Wed May 04, 2011 9:32 pm

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

Postby 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>
yokel22
Experienced User
 
Posts: 67
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city

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

Postby 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.
kkl
Experienced User
 
Posts: 297
Joined: Wed May 04, 2011 9:32 pm

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

Postby 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.
yokel22
Experienced User
 
Posts: 67
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city

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

Postby 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
kkl
Experienced User
 
Posts: 297
Joined: Wed May 04, 2011 9:32 pm

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

Postby 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
Experienced User
 
Posts: 67
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city

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

Postby 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>
yokel22
Experienced User
 
Posts: 67
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city

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

Postby 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
Experienced User
 
Posts: 297
Joined: Wed May 04, 2011 9:32 pm

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

Postby 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.
kkl
Experienced User
 
Posts: 297
Joined: Wed May 04, 2011 9:32 pm

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

Postby yokel22 » Fri Dec 30, 2016 10:51 pm

Excellent.
yokel22
Experienced User
 
Posts: 67
Joined: Thu Feb 05, 2015 5:56 pm
Location: U.S. - Kansas city


Return to General Support

Who is online

Users browsing this forum: No registered users and 7 guests