JSFiddle - React, Tailwind, and code Playground

by SEOKWOO LEE

HTML

<input type='button' id='submit' value='check' />
<input type='button' id='confirm' value='confirm'>
<input type='button' id='disabled' value='disalbed'>
<input type='button' id='enabled' value='enabled'>
<!-- input type hidden value -->
<input type='hidden' name='searchValue' value='${searchValue}' />
<input type='hidden' name='searchType' value='${searchType}' />
<br>
<br>
<table>
    <tr>
        <td>
            <input type='text' id='userId' placeholder='USER ID'>
        </td>
        <td rowspan='2'>
            <input type='button' id='login' value='ok'>
        </td>
    </tr>
    <tr>
        <td>
            <input type='password' id='password' placeholder='PASSWORD'>
        </td>
    </tr>
</table>
<br>
<p id='viewUserId'></p>
<p id='viewPassword'></p>

JavaScript

//button click event
$('#submit').click(function () {
    alert("test");
});

//button click confirm
$('#confirm').click(function () {
    if (confirm('confirm')) {
        alert('do something');
    } else {
        alert('cancel');
    }
});

//button click input type text disabled
$('#disabled').click(function () {
    //$('input').prop('disabled',true);        // all input disabled 
    $('input[type="text"]').prop('disabled', true);
    $('input[type="password"]').prop('disabled', true);
});

//button click input type text enabled
$('#enabled').click(function () {
    $('input[type="text"]').removeAttr('disabled');
    $('input[type="password"]').removeAttr('disabled');
});

//enable when user input userId and password
$('#userId').on('input', function () {
    // alert('Changed!');
});

//check valid data
$('#login').click(function () {
    var userId = $('#userId').val();
    var password = $('#password').val();

    if (isValid(userId, password)) {
        alert('submit');
        $('#viewUserId').text(userId);
        $('#viewPassword').text(password);

    } else {
        alert('you have to input ID or Password !');
    }

});

function isValid(param1, param2) {
    return (param1 != '') && (param2 != '');
}


//alert user input value (userId, password)
$('#login').click(function () {
    var userId = $('#userId').val();
    var password = $('password').val();

});


//button click get checkbox size and value