How to automate site creation on save in a SP list form using JSOM?

For one of the Clients Requirements, I have to automate Sharepoint site creation on a button click. Basically there will be a SharePoint list form in which a user will enter data as title, url, and select a template. Once clicked on save it should create a sharepoint site. I have been able to implement this using a HTML form web part but now i need to Use SharePoint OOTB list form and need to do the same thing. Below is the code I wrote that creates a sharepoint site upon button click, the code works fine and creates a site depending upon the selection. I am using SharePoint online.

Any ideas on how to convert this approach to A Sharepoint list form approach?

    <script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

function PreSaveAction(){
    CreateSubWeb();
    return true;
}

function CreateSubWeb() {
    // defualt list Title field
    var webTitle=$("input[title='Client_x0020_Name']").val();
    //custom fields URL and Template
    var url=$("input[title='Site_x0020_URL']").val();
    var template=$("input[title='Custom_x0020_Template']").val();

    // current web url
    var webUrl = _spPageContextInfo.webAbsoluteUrl;

    var clientContext = new SP.ClientContext(webUrl);
    this.oWebsite = clientContext.get_web();

    var webCreationInfo = new SP.WebCreationInformation();
    webCreationInfo.set_title(webTitle);
    webCreationInfo.set_language(1033);
    webCreationInfo.set_url(url);
    webCreationInfo.set_useSamePermissionsAsParentSite(true);

    if(template == 'Customer W Project'){       
            webCreationInfo.set_webTemplate("{2936BD84-30AD-413E-8933-2A6B7856D10F}#Template 2");
    }
    else
    {
        webCreationInfo.set_webTemplate("{ED884F01-6B10-4791-A704-FF05A047D0F3}#Template 1");   
    }
    oWebsite.get_webs().add(webCreationInfo);
    oWebsite.update();
    clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);

}
function onQuerySucceeded(sender, args) {
    alert('success'); 
}
function onQueryFailed(sender, args) {
     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
}  
</script>

Solution

The code below for your reference, add the code into script editor web part in new form page.

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PreSaveAction(){
    var templateName=$("select[title='Custom Template']").val();
    getTemplateName(templateName).done(function(template) {
        createSubSite(template);    
    }); 
    return true;
}
var createSubSite = function(templateName) {
    // defualt list Title field
    var webTitle=$("input[title='Title Required Field']").val();
    //custom fields URL and Template
    var url=$("input[title='Site URL']").val();

    // current web url
    var webUrl = _spPageContextInfo.webAbsoluteUrl;

    var clientContext = new SP.ClientContext(webUrl);
    this.oWebsite = clientContext.get_web();

    var webCreationInfo = new SP.WebCreationInformation();
    webCreationInfo.set_title(webTitle);
    webCreationInfo.set_language(1033);
    webCreationInfo.set_url(url);
    webCreationInfo.set_useSamePermissionsAsParentSite(true);
    webCreationInfo.set_webTemplate(templateName);
    oWebsite.get_webs().add(webCreationInfo);
    oWebsite.update();
    clientContext.executeQueryAsync(function() {
            console.log("Done");
        }, function(sender,args){ 
            console.log("failed. Message:" + args.get_message());
    });
}

var getTemplateName = function(templateName) {
    var dfd = new $.Deferred(); 
    var clientContext = SP.ClientContext.get_current();
    var templates = clientContext.get_web().getAvailableWebTemplates(1033, false);
    clientContext.load(templates);

    clientContext.executeQueryAsync(function() {
        var templateGuidName;

        for (var template in templates.get_data()) {
                if (templates.itemAt(template).get_title() === templateName) {
                    templateGuidName = templates.itemAt(template).get_name();
                    break;
                }
            }   
        dfd.resolve(templateGuidName);

     }, function() { dfd.reject(); });

    return dfd.promise();

}
</script>