idarktech

Pass field value to widget

Jan 20th, 2021
894
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.       <title>Dropdown list onFly</title>
  5.       <meta charset="UTF-8">
  6.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  8.       <script src="//js.jotform.com/JotFormCustomWidget.min.js"></script>
  9.       <style>
  10.       /* input
  11.       styles */
  12.         #sourceString {
  13.           height: 2.5em;
  14.           min-width: 100%;
  15.           max-width: 100%;
  16.           background-color: #fff;
  17.           border-color: #c3cad8 !important;
  18.           color: #2c3345;
  19.           font-size: 1em;
  20.           border-radius: 4px;
  21.           border: 1px solid;
  22.           display: block;
  23.           padding: 0 .625em;
  24.           outline: 0;
  25.           margin: 0;
  26.           text-align: left;
  27.           box-sizing: border-box;
  28.         }
  29.       </style>
  30.    </head>
  31.    <body>
  32.      <input type="text" id="sourceString" class="form-textbox" value="">
  33.      
  34.      <script type="text/javascript">
  35.        var input = $('#sourceString');
  36.      
  37.        function myWidget() {
  38.          // get widget parameters if any
  39.          var params = JFCustomWidget.getWidgetSettings();
  40.          
  41.          // exposed functions
  42.          this.init = init;
  43.          this.getData = getData;
  44.          this.fillConditionValue = fillConditionValue;
  45.          
  46.          // initialization of the widget
  47.          function init(formData) {
  48.            
  49.            // send data to Jotform on change input
  50.            input.on('change', function() {
  51.              JFCustomWidget.sendData(getData());
  52.              JFCustomWidget.hideWidgetError();
  53.            });
  54.          }
  55.          
  56.          // fill the value set by conditions
  57.          function fillConditionValue(data) {
  58.            var inputValue = data.value || '';
  59.            input.val(inputValue);
  60.            JFCustomWidget.hideWidgetError();
  61.          }
  62.          
  63.          // get widget data
  64.          function getData() {
  65.            var inputValue = input.val();
  66.            return {
  67.              valid: !!inputValue,
  68.              value: inputValue
  69.            };
  70.          }
  71.        }
  72.         // always subscribe to ready event and implement widget related code
  73.         // inside callback function , it is the best practice while developing widgets
  74.         JFCustomWidget.subscribe("ready", function(data) {
  75.           var widget = new myWidget();
  76.           widget.init(data);
  77.  
  78.           JFCustomWidget.subscribe("submit", function() {
  79.             JFCustomWidget.sendSubmit(widget.getData());
  80.           });
  81.          
  82.           JFCustomWidget.subscribe('populate', widget.fillConditionValue);
  83.         });
  84.        
  85.      </script>
  86.    </body>
  87. </html>
  88.  
RAW Paste Data