JSFiddle - React, Tailwind, and code Playground

by alaa13212

HTML

<form id="user" name="user">
    <label for="fname">الأسم الأول </label><input type="text" name="fname"placeholder="أدخل اسمك الأول" id="fname"/>
    <label for="lname">العائلة </label><input type="text" name="lname"placeholder="أدخل عائلتك" id="lname"/>
    <button id="merge" name="merge">دمج</button><br />
    <output id="fullname" name="fullname"></output>
    </form>

CSS

body{
    direction:rtl;
}

JavaScript

(function($){
    var $userForm    = $('#user');
    var $margeButton = $userForm.children('#merge');
    margeName = function (){
        var firstName = $userForm.children('#fname').val();
        var lastName  = $userForm.children('#lname').val();
        
       $userForm.children('#fullname').val(firstName + " " + lastName);
       return false;
    }
    $margeButton.click(margeName);
})(window.jQuery);