JSFiddle - React, Tailwind, and code Playground

by Kyros Koh

HTML

<form name="myform" actopm="/echo/html/" method="post">
    <table border="1" width="100%">
        <tr>
            <th>Shape ID</th>
            <td><input type="text" name="shapeid" placeholder="input shapeid"/></td>
            <th>Lat Lng</th>
            <td><input type="text" name="latlng" placeholder="input latlng" height="300px" width="500px"/></td>
            <th>Count</th>
            <td><input type="text" name="count" placeholder="input count" value=""/></td>            
        </tr>
    </table>
    <div class="center">
    <input type="button" name="render" value="Render"/>
        <hr/>Result: <p><div id="result"/>
    </div>
</form>

JavaScript

var shape_id = document.getElementById("shapeid");
var latlng = document.getElementById("latlng");
var count = document.getElementById("count");
var result;
var render;

var form = document.forms.myform,
    elem = form.elements;

form.onsubmit = function(){
    if(!elem.shapeid.value){
        alert('please input text.');
        elem.shapeid.focus();
        return false;
    }
    if(!elem.latlng.value){
        alert('please input latlng.');
        elem.latlng.focus();
        return false;
    }
    if(!elem.count.value){
        alert('please input count.');
        elem.count.focus();
        return false;
    }    
    return true;
}
    
shapeid = elem.shapeid.value;
latlng = elem.latlng.value;
count = elem.count.value;

result +=  shapeid + "," + latlng + "," + count + "\n";
render = document.getElementById("result");
render.innerHTML = result;