Wix Custom Element

Ask the community
,
1

Hello guys! I’ve tried to code dynamically format input and I failed. I want to integrate this example to my site. Please help! :confused: @jonatandor35 @russian-dima @yisrael-wix

2

Put this into your HTML-Component…

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
  html {
  box-sizing: border-box;
  font-family: 'PT Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}
body {
  background-color: #f3f3f3;
}
form {
  width: 100%;
  max-width: 300px;
  margin: 60px auto;
}
form input {
  font-size: 30px;
  padding: 0;
  border: 2px solid #ccc;
  border-left: 0;
  width: 100%;
  color: #666;
  border-radius: 0 7px 7px 0;
  font-family: 'PT Sans', sans-serif;
  font-weight: bold;
}
form input:focus {
  outline: 0;
}
form input.error {
  border-color: #ff0000;  
}
form label.error {
  background-color: #ff0000;
  color: #fff;
  padding: 6px;
  font-size: 11px;
}

label {
  color: #999;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em
}
.flex {
  display: flex;
  justify-content: flex-start;
}
.flex input {
  max-width: 300px;
  flex: 1 1 300px;
}
.flex .currency {
  font-size: 30px;
  padding: 0 10px 0 20px;
  color: #999;
  border: 2px solid #ccc;
  border-right: 0;
  line-height: 2.5;
  border-radius: 7px 0 0 7px;
  background: white;
}
</style>

<script>
	(function($, undefined) {

  "use strict";

  // When ready.
  $(function() {
    
    var $form = $( "#form" );
    var $input = $form.find( "input" );

    $input.on( "keyup", function( event ) {      
      // When user select text in the document, also abort.
      var selection = window.getSelection().toString();
      if ( selection !== '' ) {
        return;
      }
      
      // When the arrow keys are pressed, abort.
      if ( $.inArray( event.keyCode, [38,40,37,39] ) !== -1 ) {
        return;
      }
      
      var $this = $( this );
      
      // Get the value.
      var input = $this.val();
      
      var input = input.replace(/[\D\s\._\-]+/g, "");
          input = input ? parseInt( input, 10 ) : 0;

          $this.val( function() {
            return ( input === 0 ) ? "" : input.toLocaleString( "en-US" );
          } );
    } );
    
    /**
     * ==================================
     * When Form Submitted
     * ==================================
     */
    $form.on( "submit", function( event ) {
      
      var $this = $( this );
      var arr = $this.serializeArray();
    
      for (var i = 0; i < arr.length; i++) {
          arr[i].value = arr[i].value.replace(/[($)\s\._\-]+/g, ''); // Sanitize the values.
      };
      
      console.log( arr );
      
      event.preventDefault();
    });
  });
})(jQuery);
</script>
  </head>
  
  <body>
    <form id="form" method="post" action="">
    <p>
      <label for="amount">Enter amount</label>
      <div class="flex">
        <span class="currency">$</span>
        <input id="amount" name="amount" type="text" maxlength="15" />
      </div>
    </p>
  </form>
  </body>
</html>

Have FUN !:sunglasses:

Here a little working example… Format Numbers - JSFiddle - Code Playground

3

Thanks mate! Now I want to optimize design and get this value from element. Which steps should I do? :slight_smile:

4

@ramazanbugdayci02
https://www.wix.com/velo/reference/$w/htmlcomponent

And to change design, you will have to know basic CSS.

Search for CSS in the www.