Jump to content
UBot Underground

Dropdown Menu With Dynamic Html Containing Form


Recommended Posts

I want to change dynamic content, in this case input fields, within a UI HTML Panel based on item selected in dropdown menu.

 

I've been using "onchange" with dropdown menus which has worked fine for me - until now, since it doesn't appear to play very nicely with input fields.

"onchange" is clearing the input fields as soon as they're immediately selected, and will not accept any values for variables.

Is there an easy way to deal with this?

TIA

ui html panel("<div>
<select name=\"category\" class=\"dropdown\" variable=\"#Dropdown\" fillwith=\"value\" onchange=\"ubot.runScript(\'SwitchHTML()\')\" >
    <option value=\"null\">Select</option>
    <option value=\"one\">One</option>
    <option value=\"two\">Two</option>
</select>
</div>
<div variable=\"#html\" fillwith=\"innerhtml\"></div>",200)
define SwitchHTML {
    if($contains(#Dropdown,"null")) {
        then {
            set(#html,"","Global")
            stop script
        }
        else {
        }
    }
    if($contains(#Dropdown,"one")) {
        then {
            set(#html,"<input name=\"entry1\" type=\"text\" class=\"Textbox\" placeholder=\"enter box1\" variable=\"{#entry1}\" />","Global")
        }
        else {
        }
    }
    if($contains(#Dropdown,"two")) {
        then {
            set(#html,"<input name=\"entry2\" type=\"text\" class=\"Textbox\" placeholder=\"enter box2\" variable=\"{#entry2}\" />
<br>
<input name=\"entry3\" type=\"text\" class=\"Textbox\" placeholder=\"enter box3\" variable=\"{#entry3}\" />","Global")
        }
        else {
        }
    }
}


 

Link to post
Share on other sites

Doing it that way will replace the html constantly because its looking for changes to the variable that is why when you click on it the field is only active for a brief period of time. Or at least that's my understanding of it.

 

Probably just using some js is the way to go, here is an example:

ui html panel("<html>
<head>
    <script type=\"text/javascript\">
    function showInput() \{
        var category = document.getElementById(\'category\').value;
        if (category == \'one\') \{
            document.getElementById(\'entry1\').style.display = \'block\';
            document.getElementById(\'entry2\').style.display = \'none\';
        \}
        else if (category == \'two\') \{
            document.getElementById(\'entry1\').style.display = \'none\';
            document.getElementById(\'entry2\').style.display = \'block\';
        \}
        else \{
            document.getElementById(\'entry1\').style.display = \'none\';
            document.getElementById(\'entry2\').style.display = \'none\';
        \}
    \}
    </script>
</head>
<body>
<div>
<select id=\"category\" class=\"dropdown\" variable=\"#Dropdown\" fillwith=\"value\" onchange=\"javascript:showInput();\">
    <option value=\"null\">Select</option>
    <option value=\"one\">One</option>
    <option value=\"two\">Two</option>
</select>
</div>
<div id=\"entry1\">
    <input name=\"entry1\" type=\"text\" class=\"Textbox\" placeholder=\"enter box1\" variable=\"#entry1\" />
</div>
<div id=\"entry2\">
    <input name=\"entry2\" type=\"text\" class=\"Textbox\" placeholder=\"enter box2\" variable=\"#entry2\" />
<br>
<input name=\"entry3\" type=\"text\" class=\"Textbox\" placeholder=\"enter box3\" variable=\"#entry3\" />
</div>
</body>
</html>",200)
Link to post
Share on other sites

Hoping for just a little more insight/help.

 

What I have is two different dynamic interactive dropdown menus in a display/none div, similar to the sample HelloInsomnia provided.
The first is acting as a main menu, and the second as a sub-menu.

 

I'm using sqlite and attempting to auto-populate/re-populate each on a change to one and the other.

 

I have it working beautifully without the interference of javascript it's fancier menu interactions.

 

However, I immediately found I couldn't solely rely on ubot, since it wouldn't trigger without first re-triggering one of the initial dropdowns in example above.

Which makes a lot of sense, if I consider the js is acting as a wrapper and an event is only possible with the js calls provided within the html.

So I investigated js a bit and pretty quickly came upon event listeners.

 

And I've been working like a dog all weekend learning what I can and trying to get the addEventListener for this working properly.

I'm able to get a single event listener working properly, and have had different iterations of similar working, such as with switch blocks, anonymous functions, function within a function and calling an external function.

 

And I understand the better way to set up an event listener is through a parent node especially where multiple events are required... it's fair to say I know a little more about js than I thought I would or expected to after this weekend has passed.

 

So I have two code samples I'm providing below.

The first uses two event listeners and calls the ubot command through an external function.

The other takes advantage of a parent node as a single event listener using an anonymous function with a conditional statement for each dropdown list.

I took some time to build on the example above with a simplified version of what I've got built out with my project, and instead using a simple alert.
I've got them each behaving similar to what I'm experiencing in my project build.

 

They don't just fire once, but perpetually.

I can't get them to stop firing.

I've instructed the 'change' parameter, but that doesn't seem to matter.

Really appreciate any help and insight.

Version1 (full ubot code):

ui html panel("<html>
<head>

</head>
<body>
<div>
<select id=\"category\" class=\"dropdown\" variable=\"#Dropdown\" fillwith=\"value\" onchange=\"javascript:showInput();\">
    <option value=\"null\">Select</option>
    <option value=\"one\">One</option>
    <option value=\"two\">Two</option>
</select>
</div>
<div id=\"entry1\">
    <input name=\"entry1\" type=\"text\" class=\"Textbox\" placeholder=\"enter box1\" variable=\"#entry1\" />


<div id=\"sectionone\">
	<select class=\"dropdown DropDown0 DropDown0select\" id=\"Fruit\" list=\"#list1\" list-fillwith=\"options\" variable=\"#DropDown0\">
	</select>
</div>

<div id=\"sectiontwo\">
	<select class=\"dropdown DropDown0 DropDown0select\" id=\"Vegetables\" list=\"#list2\" list-fillwith=\"options\" variable=\"#DropDown0\">
	</select>
</div>
</div>
<div id=\"entry2\">
    <input name=\"entry2\" type=\"text\" class=\"Textbox\" placeholder=\"enter box2\" variable=\"#entry2\" />
<br>
<input name=\"entry3\" type=\"text\" class=\"Textbox\" placeholder=\"enter box3\" variable=\"#entry3\" />
</div>
</body>


<script type=\"text/javascript\">
function listener1 (event) \{
	ubot.runScript(\'alertOne()\');
\}

function listener2 (event) \{
	ubot.runScript(\'alertTwo()\');
\}

var fruit = document.getElementById(\'Fruit\');
fruit.addEventListener(\'change\', listener1);

var vegetables = document.getElementById(\'Vegetables\');
vegetables.addEventListener(\'change\', listener2);

function showInput() \{
    var category = document.getElementById(\'category\').value;
    if (category == \'one\') \{
        document.getElementById(\'entry1\').style.display = \'block\';
        document.getElementById(\'entry2\').style.display = \'none\';
    \}
    else if (category == \'two\') \{
        document.getElementById(\'entry1\').style.display = \'none\';
        document.getElementById(\'entry2\').style.display = \'block\';
    \}
    else \{
        document.getElementById(\'entry1\').style.display = \'none\';
        document.getElementById(\'entry2\').style.display = \'none\';
    \}
\}
</script>
</html>",200)
set(#list1,"oranges, apples, peaches","Global")
set(#list2,"potatoes, peas, carrots","Global")
define alertOne {
    alert("Fruit has changed!")
}
define alertTwo {
    alert("Vegetables have changed!")
}

Version2 (utilizing the parent node, ui html panel only):

<html>
<head>

</head>
<body>
<div>
<select id="category" class="dropdown" variable="#Dropdown" fillwith="value" onchange="javascript:showInput();">
    <option value="null">Select</option>
    <option value="one">One</option>
    <option value="two">Two</option>
</select>
</div>

<div id="entry1">
<input name="entry1" type="text" class="Textbox" placeholder="enter box1" variable="#entry1" />

<div id="parentnode">
<div id="sectionone">
<select class="dropdown DropDown0 DropDown0select" id="Fruit" list="#list1" list-fillwith="options" variable="#DropDown0">
</select>
</div>

<div id="sectiontwo">
<select class="dropdown DropDown0 DropDown0select" id="Vegetables" list="#list2" list-fillwith="options" variable="#DropDown0">
</select>
</div>
</div>
</div>


<div id="entry2">
    <input name="entry2" type="text" class="Textbox" placeholder="enter box2" variable="#entry2" />
<br>
<input name="entry3" type="text" class="Textbox" placeholder="enter box3" variable="#entry3" />
</div>
</body>

<script type="text/javascript">
var parentnode = document.getElementById('parentnode');
parentnode.addEventListener('change', function(e) {
if ( event.target.id == "FRUIT" ) {
ubot.runScript('alertOne()');
}

else if ( event.target.id == "Vegetables" ) {
ubot.runScript('alertTwo()');
}
});

function showInput() {
    var category = document.getElementById('category').value;
    if (category == 'one') {
        document.getElementById('entry1').style.display = 'block';
        document.getElementById('entry2').style.display = 'none';
    }
    else if (category == 'two') {
        document.getElementById('entry1').style.display = 'none';
        document.getElementById('entry2').style.display = 'block';
    }
    else {
        document.getElementById('entry1').style.display = 'none';
        document.getElementById('entry2').style.display = 'none';
    }
}
</script>
</html>
Edited by Xochipelli
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...