JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    
    <form id="urlTracker">
        
        <div class="form-group">
            <label for="url" class="col-sm-2 control-label">URL</label>
            <div class="col-sm-10">
                <input type="url" class="form-control" id="url" placeholder="https://www.example.com/" />
            </div>
        </div>
        
        <div class="form-group">
            <label for="id" class="col-sm-2 control-label">Affiliate ID</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="id" placeholder="1111" />
            </div>
        </div>
        
        <div class="form-group">
         <label class="col-sm-2 control-label">Where will the link be shared?</label>
         <div class="col-sm-10">
             <div class="radio">
                  <label>
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="referral" />
                       On Site
                  </label>
             </div>    
             <div class="radio">
                  <label>
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="email" />
                       In Email
                  </label>
             </div>
             <div class="radio">
                  <label>
                      <input type="radio" name="optionsRadios" id="optionsRadios1" value="social" />
                       On Social Media
                  </label>
             </div>
         </div>
        </div>
        <button type="submit" class="btn btn-success">Track URL</button>
    </form>
    <output />
</div>

JavaScript

$(function(){
    $('#urlTracker').submit(function(e){
        e.preventDefault();
        
        var url = $('#url').val();
        var id = $('#id').val();
        
    });
});