JSFiddle - React, Tailwind, and code Playground

by mstalfoort

HTML

<form name="theform" id="theform" action="http://funiks.com/invoice/phonebook/submit_new_contact_ajax.php" method="post"  autocomplete="off">
                    <fieldset>
                        
                        <section><label for="text_tooltip">Full Name</label>
                            <div><input type="text" id="text_tooltip" name="text_fullname" title="Full Name">
                            <span>Please tell us your complete name</span>
                            </div>
                        </section>
                        
                        <section><label for="text_placeholder">Phone no.</label>
                            <div><input type="text" id="text_placeholder" name="text_phno" placeholder="Contact no. with country code">
                            <span>Like <code>eg="+91-9216142737"</code></span>
                            </div>
                        </section>
                    </fieldset>
                    
                        <section>
                        
                            <div>
                            <button class="reset">Reset</button>
                            <button class="button" type="submit"   value="submitbuttonvalue">Submit </button>
                        
                            </div>
    
                        </section>
                </form>

JavaScript

$("#theform").on('submit', function(evt) {
    evt.preventDefault();
    
    var fieldName = ""+$("#text_tooltip").val();
    var fieldPhone = ""+$("#text_placeholder").val();
    var dataString = 'name='+ fieldName + '&ph=' + fieldPhone;
    
   $.ajax({
        type: "POST",
        url: $('#theform').attr('action'),
        data: dataString,
        success: function(){
            $('.success').fadeIn(200).show();
            $('.error').fadeOut(200).hide();
        }
    });
});