JSFiddle - React, Tailwind, and code Playground

HTML

<div class="signup">

     <h1>Signup</h1>
<form id="signup_form_id" onsubmit="sign_up_client()">
         <label>First Name: </label><input id="fname1" type="text" name="s_fname" required>
         <br>
         <label> Last Name: </label><input id="lname1" type="text" name="s_lname" required>
         <br>
         <label> City: </label><input id="city1" type="text" name="s_city" required>
         <br>
         <label> Country: </label><input id="country1" type="text" name="s_country" required>
         <br>
         <label> Male: </label><input id="gender1" type="radio" name="sex" value="male" required>
         <br>
         <label> Female: </label><input type="radio" name="sex" value="female" required>
         <br>
         <label> Email: </label><input id="email1" type="email" name="s_email" required>
         <br>
         <label> Password: </label><input id="password1" type="password" name="s_password" required>
         <br>
         <label> Repeat Pas: </label><input id="password2" type="password" name="s_rpassword" required>
         <br>
         <label>  </label><input type="submit" value="Submit">
      </form> 
             </div>

JavaScript

$("form").on("submit", function() {

    var o = {};
    $(".signup").find("input, textarea, select").map(function(index, elem) {
		//Ingore types such as button, submit and radio
        elem.type.match(/button|submit|radio/i) === null &&
		(o[elem["name"]] = elem.value || "")
        //If type = radio, grab the selected radio's value
        elem.type.match(/radio/i) !== null &&
		elem.checked && (o[elem["name"]] = elem.value || "")

    });

    alert (JSON.stringify(o, null, 4));
    return false;
});