Develop Reference

how can i make token with jquery

I have two entries and want to hash their values ​​and when they are clicked on another entry that is disable they will be inside this entry i show this code in jquery field i mean i want these inputs values make hash and then set to disable input
$('#token').click(function() {
if (empty($('#username').val()) && empty($('#personalid').val())) {
$("input[name='token']").focus(function () {
$(this).next('span').css('display','inline').fadeout(1500)
});
} else if($('#username').val() && $('#personalid').val()) {
$('#token').change(function() {
var hashToken = md5($('#username').val(),$('#personalid').val());
$(this).val(hashToken);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="username" id="username">
<input type="text" name="personalid" id="personalid">
<input type="text" name="token" id="token" disabled>
</form>

Adding messages to or below input

I have this form that has a series of inputs. Input 1 changes the options for Input 2. Input 2 is blank and until input one is filled, I need to make it so that if the user clicks on input 2 to try to fill out first a message tells them to please select from input 1 first.
I have jQuery doing an alert box currently but how can I have the message show up in the input or right below it?
CodePen: https://codepen.io/anon_guy/pen/WXgZQw
HTML:
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" >
</form>
jQuery:
$( "#two" ).click(function() {
alert( "Please enter Input 1 First" );
});

It would make more sense, and be a better user experience, to only enable input 2 once input 1 has received a value. You can do that using the input event, like this:
$('#one').on('input', function() {
$('#two').prop('disabled', this.value.trim() == '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" disabled="disabled">
</form>

To add it inside the first input box (as a placeholder):
$("#two").click(function() {
if ($("#one").val() == "") {
$("#one").attr("placeholder", "Please enter Input 1 First");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br> Input-2:
<br>
<input type="text" name="second" id="two">
</form>
To add it as a message below the inputs:
$("#two").click(function() {
if ($("#one").val() == "") {
var newDiv = document.createElement('div');
newDiv.id = "newDiv";
newDiv.innerText = "Please enter Input 1 First";
$("form").append(newDiv, $("#two").next());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br> Input-2:
<br>
<input type="text" name="second" id="two">
</form>
The if statement will cause the message to only display if the first input box has no value:
if ($("#one").val() == "")

You can dynamically insert text/html via after() if the criteria isn't met. Though a more ideal approach would be to use focus over click in this case:
$( '#two' ).on('focus', function() {
if (!$('#one').val().length) {
$('#two').after('<p>Please enter Input 1 First</p>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Input-1:<br>
<input type="text" name="first" id="one"><br>
Input-2:<br>
<input type="text" name="second" id="two" >
<p class="warning"></p>
</form>

You need to attach it to the parent.
You can evaluate the first input field to see if it is empty. There are a number of things you can do to remove the appended div.
$( "#two" ).click(function() {
if($("#one").val("")){
$(this).parent().append("<div>Please enter Input 1 First</div>");
}
});

How do I refocus on an input field after tabbing past the last one?

I have thee input fields. Two require input one is type submit. Like you see below.
<input id="cs1" type="text" value="" placeholder="Call Sign" onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus="autofocus" />
<input id="Fname" type="text" value="" name="Fname" placeholder="First Name" onkeyup="nameHint(this.value);" onblur="checkIn();" />
<input id="ckin1" type="submit" value="Check In" />
The usual method is input into cs1, which drops hints at possible values. Select a possible value and tab to the Name input. At which time a name may have been automatically filled or not. Either enter the name or accept the one there. Then tab to the submit input and either click on it or press tab.
This is where the problem is, if you tab you are placed on the URL (address bar) which is bad. If you click the submit the cursor is returned correctly to the cs1 input again.
I've tried all kinds of stuff like you see below, but none of it works.
$(document).ready(function () {
$('#ckin1').on('keydown', function (e) {
if (e.keyCode == 9) {
document.body.firstElementChild.focus();
e.preventDefault();
return false;
}
});
})
$(document).ready(function () {
$( "#ckin1" ).click(function() {
$( "#cs1" ).focus();
});
});
How do I get the cursor to return automatically to the cs1 input filed after a tab from the ckin1 submit?

This seems to work just fine. Since you are already using jQuery, use it to focus the first element.
$("#ckin1").on('keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9 && !e.shiftKey) {
e.preventDefault();
$('#cs1').focus();
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="cs1" type="text" value="" placeholder="Call Sign" maxlength="16" />
<input id="Fname" type="text" value="" name="Fname" placeholder="First Name" />
<input id="ckin1" type="submit" value="Check In" />

How to move cursor to the next text field?

On my work-through I tried to implement moving focus from one text field to another by pressing enter. I have found possible answers in the following links:
How to go to next textbox when enter is pressed?
Move Cursor to next text Field pressing Enter
But none of these are working for me. My code:
<script>
$('input[type='text']').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
</script>
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />
<input type='text' />

$(document).ready(function () {
$('form').on('submit', function (event) {
event.preventDefault();
})
$('input[type="text"]').keyup(function(event) {
if(event.keyCode === 13) {
$(this).next().focus();
}
});
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>

Just update $('input[type='text']') to $('input[type="text"]'). You had unclosed strings.
Working codepen here.

Here's what's happening:
<!-- Start loading the page -->
<script>
// execute javascript. Note that there
// are no inputs on the page currently - they will be loaded later
// This selector matches nothing:
$("input[type='text']").keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
</script>
<!-- JavaScript executed. Now add inputs to the page -->
<input type='text' />
<input type='text' />
What you can do is either move the <script> below the inputs (easiest) or move the keyup listener to a onload function:
$(function(){
// i.e. wrap your js here
// the js here will be executed only after page has loaded
});

The order of my jquery validator is working wrong, and I have no idea why

My form validator works, but it works in a certain order, if I check the checkbox, it works fine, but if I fill the inputs first and then use the checkbox, it not works, unless I type something in the inputs
$(document).ready(function() {
$('#send').attr('disabled', true);
$('.input,#check').on('keyup', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').attr('disabled', false);
} else {
$('#send').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>

You only run your validation code during the keyup event, which only happens on the input boxes. You also need to do validation during a click event on the checkbox.
You can put multiple event names in the argument to .on(), to handle both with the same code.
You also have an incorrect class .input, there are no elements with class="input" in the HTML. I've changed it to .input-cpk.
$(document).ready(function() {
$('#send').prop('disabled', true);
$('.input-cpk,#check').on('keyup click', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').prop('disabled', false);
} else {
$('#send').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>

It's because you're using the wrong selector.
Try this
$('input,#check').on('keyup', function() {
Instead of this
$('.input,#check').on('keyup', function() {
Additionally you might want to use the .on('change') instead of .on('keyup')