All Apps and Add-ons

Nested Form Inputs: Is it possible to have textbox as an option for a Radio button in Simple XML or Sideview Utils?

Path Finder

Is it possible to have textbox as an option for Radio button?

Scenario:

I need to have a Radio button input type with two options.
First option is a static one.
Second option should have a label and text box.
On click of second option, I need the text box to get enabled so that user can enter the values in it as part of radio input type.
Is it possible to achieve the above in simple XML? or in Sideview Utils?

0 Karma
1 Solution

SplunkTrust
SplunkTrust

Here's a way to implement it in Sideview Utils without any CustomBehavior. meaning without having to write or think about any custom javascript.

<module name="Radio">
  <param name="name">myRadio</param>
  <param name="template">someField="$value$"</param>
  <param name="float">left</param>
  <param name="staticRadios">
    <list>
      <param name="label">Value 1</param>
      <param name="value">auto</param>
    </list>
    <list>
      <param name="label"> </param>
      <param name="value">manual</param>
    </list>
  </param>

  <module name="Switcher" group=" ">
    <param name="selectedGroup">$myRadio$</param>

    <module name="TextField" group="manual">
      <param name="name">myRadio</param>
      <param name="template">someField="$value$"</param>

      <module name="Gate">
        <param name="to">everythingElse</param>
      </module>
    <module>
    <module name="Gate" group="auto">
      <param name="to">everythingElse</param>
    </module>
  </module>
</module>
<module name="Gate">
  <param name="id">everythingElse</param>
  .. all your other modules that actually use $myRadio$ will go inside here. 
</module>

The idea above is to make the Switcher module do the dirty work of showing/hiding the TextField module. It's a bit weird in that if the user selects the first radio, the textfield will dissappear entirely rather than grey out. If you are comfortable in JS, it might be good to explore a simple customBehavior here, in which case you could disable and undisable the Textfield's textbox fairly easily and thus dispense with the complexity of the Switcher module and the Gate modules...

View solution in original post

SplunkTrust
SplunkTrust

Here's a way to implement it in Sideview Utils without any CustomBehavior. meaning without having to write or think about any custom javascript.

<module name="Radio">
  <param name="name">myRadio</param>
  <param name="template">someField="$value$"</param>
  <param name="float">left</param>
  <param name="staticRadios">
    <list>
      <param name="label">Value 1</param>
      <param name="value">auto</param>
    </list>
    <list>
      <param name="label"> </param>
      <param name="value">manual</param>
    </list>
  </param>

  <module name="Switcher" group=" ">
    <param name="selectedGroup">$myRadio$</param>

    <module name="TextField" group="manual">
      <param name="name">myRadio</param>
      <param name="template">someField="$value$"</param>

      <module name="Gate">
        <param name="to">everythingElse</param>
      </module>
    <module>
    <module name="Gate" group="auto">
      <param name="to">everythingElse</param>
    </module>
  </module>
</module>
<module name="Gate">
  <param name="id">everythingElse</param>
  .. all your other modules that actually use $myRadio$ will go inside here. 
</module>

The idea above is to make the Switcher module do the dirty work of showing/hiding the TextField module. It's a bit weird in that if the user selects the first radio, the textfield will dissappear entirely rather than grey out. If you are comfortable in JS, it might be good to explore a simple customBehavior here, in which case you could disable and undisable the Textfield's textbox fairly easily and thus dispense with the complexity of the Switcher module and the Gate modules...

View solution in original post

Motivator

hi jackson 19990,
try use this code

<form>
  <label>Radio Form Input Element and text box </label>
  <earliestTime>-24h@h</earliestTime>
  <latestTime>now</latestTime>

  <fieldset autoRun="true" submitButton="false">
    <input type="radio" token="username" searchWhenChanged="true">
      <label>Select a User:</label>
      <default>*</default>
      <choice value="*">All</choice>
      <choice value="admin">Admin</choice>
    </input>

      <input type="text" token="username" searchWhenChanged="true">
      <label>Enter one UserName:</label>
      <default>*</default>
      </input> 

  </fieldset>

  <row>

    <chart>
      <title>Chart of Events for user="$username$"</title>
      <searchString>index=_internal user=$username$ | timechart count </searchString>
      <option name="charting.chart">column</option>
    </chart>

  </row>
</form>

copy and paste in your xml view

0 Karma