JSFiddle - React, Tailwind, and code Playground

by robwalkersk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<label for="age" class="col-sm-4 control-label" data-reactid=".0.1.0.3.0.0.1.1.0.1.0.0.1.0.0.0.0.0.1.0.1.0.1:0.0">age (Age of the subject in years)</label>
									<div class="col-sm-8" data-reactid=".0.1.0.3.0.0.1.1.0.1.0.0.1.0.0.0.0.0.1.0.1.0.1:0.1">
										<input id="age" name="age" type="text" class="form-control" value="63" data-nthinput="input1" data-paramtype="Inputs" data-testtype="RRS" data-reactid=".0.1.0.3.0.0.1.1.0.1.0.0.1.0.0.0.0.0.1.0.1.0.1:0.1.0" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
										</div>
										<div data-reactid=".0.1.0.3.0.0.1.1.0.1.0.0.1.0.0.0.0.0.1.0.1.0.1:0.2"/>
									</div>
                  
                  <label for="sex" class="col-sm-4 control-label" data-reactid=".0.1.0.3.0.0.1.1.0.1.0.0.1.0.0.0.0.0.1.0.1.0.1:1.0">sex (1 = male; 0 = female)</label>
										<div class="col-sm-8" data-reactid=".0.1.0.3.0.0.1.1.0.1.0.0.1.0.0.0.0.0.1.0.1.0.1:1.1">
											<input id="sex" name="sex" type="text" class="form-control"...

JavaScript

function Predict(){
    
	var age = $('#age').val();
	var sex = $('#sex').val();
	var cp = $('#cp').val();
	var trestbps = $('#trestbps').val();
	var chol = $('#chol').val();
	var fbs = $('#fbs').val();
	var restecg = $('#restecg').val();
	var thalach = $('#thalach').val();
	var exang = $('#exang').val();
	var oldpeak = $('#oldpeak').val();
	var slope = $('#slope').val();
	var ca = $('#ca').val();
	var thal = $('#thal').val();
	
    var webMethod = "https://heartdiseaseapi.azurewebsites.net/api/heartdisease";
    var parameters = "{'age': "+age+",'thal': "+thal+",'ca': "+ca+",'slope': "+slope+",'oldpeak': '"+oldpeak+"','exang': "+exang+",'thalach': "+thalach+",'restecg': "+restecg+",'fbs': "+fbs+",'chol': "+chol+",'trestbps': "+trestbps+",'cp': "+cp+",'sex': "+sex+" }";

    $.ajax({
        type: "POST",
        url: webMethod,
        data: parameters,
        crossOrigin: true,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            $('#output').html('heartDiseasePredicted: ' +msg.heartDiseasePredicted + ' accuracy: ' + msg.accuracy);
        },
        error: function(xhr, status, error){
         var errorMessage = xhr.status + ': ' + xhr.statusText
         $('#output').html('Error - ' + errorMessage);
     }
     
    });
}