JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div id='delete'>
    <form id='fform'> 
        <span class='front15'>Enter your name </span>

        <input type='text' id='tf' placeholder='name' />
        <input type='submit' id='get_button' value='Get' text='Get'>
    </form>
</div>

CSS

#tf{
	width: 100px;
	height: 32px;
	font-size: 15px;
	direction: ltr;
	border: 1px solid #b9b9b9;
	border-top: 1px solid #a0a0a0;
	margin: 0;
	padding: 0 8px;
	line-height: 32px\9;
}
.clr {
	clear: both;
	height: 1px;
	overflow: hidden;
}
#get_button {
	background-color: #4D90FE;
	color: white;
	height: 32px;
	width: 65px;
	border: none;
	font: 13px arial, helvetica, sans-serif;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid #3079ED;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}

JavaScript

$('body').on('submit','#fform',function(){ 

		var tf = $('#tf').val();
		$.trim(tf);
		if(tf.indexOf("http://") == -1){
		 tf="http://"+tf;
		}
    
	$('#delete').html("<span class='front'>Processing...</span>").show('slide');
		$.ajax({
			  type: 'POST',
			  url: 'test.php',
			  data: { 
			        'url': tf
			    },
			    success: function(data){
				    if($.trim(data) == 'false'){
					   $('#ic').fadeIn(1000);
					   $('#delete').hide();
					   $('#ic').on('click',function(){
						   $('#ic').hide();
						   $('#delete').html(mhtml);
					       $('#delete').show();
					   });
					}else{
					 $('#delete').hide();
					 $('#url').show('slow');
					 $('#aurl').prop('href',data);
					 $('#aurl').text(data);
					}
			      }
			});

		return false;
		});