Javascript or jQuery fill data based on value
0
I am currently trying to get a solution in order to simplify the login for my staff. Ideally I am looking for a js or jQuery script that pre-fills 2 input fields based upon the data they enter.
E.g. the main field should be: Enter token
IF the token equals 123 then fill input1 and input2 with certain amount of data, while if the token is 456 fill it with other data - if no token matches then do not fill any data. I know this is very unsecure but since it's something running only locally it would work for my specific needs.
<style>.hidden {display: none !important;}</style>
<form>
<input id="token" type="text">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>
Some advice would be greatly appreciated, thank you
javascript jquery
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
asked Nov 13 '18 at 5:15
dvoipdvoip
287
add a comment |
0
I am currently trying to get a solution in order to simplify the login for my staff. Ideally I am looking for a js or jQuery script that pre-fills 2 input fields based upon the data they enter.
E.g. the main field should be: Enter token
IF the token equals 123 then fill input1 and input2 with certain amount of data, while if the token is 456 fill it with other data - if no token matches then do not fill any data. I know this is very unsecure but since it's something running only locally it would work for my specific needs.
<style>.hidden {display: none !important;}</style>
<form>
<input id="token" type="text">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>
Some advice would be greatly appreciated, thank you
javascript jquery
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
asked Nov 13 '18 at 5:15
dvoipdvoip
287
Have you tried anything that isn't working as expected? You're basically wanting to add aninputevent listener to#tokenand set the values of the hidden inputs based on the value entered. Is that close to what you have or are you going down a different track?
– Phil
Nov 13 '18 at 5:17
Please provide the script you have tried, only then we can help you
– Dark_thunder
Nov 13 '18 at 5:19
1
FYI, you can use<input type="hidden">instead of hiding them with CSS
– Phil
Nov 13 '18 at 5:20
add a comment |
0
0
0
I am currently trying to get a solution in order to simplify the login for my staff. Ideally I am looking for a js or jQuery script that pre-fills 2 input fields based upon the data they enter.
E.g. the main field should be: Enter token
IF the token equals 123 then fill input1 and input2 with certain amount of data, while if the token is 456 fill it with other data - if no token matches then do not fill any data. I know this is very unsecure but since it's something running only locally it would work for my specific needs.
<style>.hidden {display: none !important;}</style>
<form>
<input id="token" type="text">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>
Some advice would be greatly appreciated, thank you
javascript jquery
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
asked Nov 13 '18 at 5:15
dvoipdvoip
287
I am currently trying to get a solution in order to simplify the login for my staff. Ideally I am looking for a js or jQuery script that pre-fills 2 input fields based upon the data they enter.
E.g. the main field should be: Enter token
IF the token equals 123 then fill input1 and input2 with certain amount of data, while if the token is 456 fill it with other data - if no token matches then do not fill any data. I know this is very unsecure but since it's something running only locally it would work for my specific needs.
<style>.hidden {display: none !important;}</style>
<form>
<input id="token" type="text">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>
Some advice would be greatly appreciated, thank you
javascript jquery
javascript jquery
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
asked Nov 13 '18 at 5:15
dvoipdvoip
287
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
asked Nov 13 '18 at 5:15
dvoipdvoip
287
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
edited Nov 13 '18 at 5:36
Phil
96.6k11137157
96.6k11137157
asked Nov 13 '18 at 5:15
dvoipdvoip
287
asked Nov 13 '18 at 5:15
dvoipdvoip
287
asked Nov 13 '18 at 5:15
dvoipdvoip
287
287
Have you tried anything that isn't working as expected? You're basically wanting to add aninputevent listener to#tokenand set the values of the hidden inputs based on the value entered. Is that close to what you have or are you going down a different track?
– Phil
Nov 13 '18 at 5:17
Please provide the script you have tried, only then we can help you
– Dark_thunder
Nov 13 '18 at 5:19
1
FYI, you can use<input type="hidden">instead of hiding them with CSS
– Phil
Nov 13 '18 at 5:20
add a comment |
Have you tried anything that isn't working as expected? You're basically wanting to add aninputevent listener to#tokenand set the values of the hidden inputs based on the value entered. Is that close to what you have or are you going down a different track?
– Phil
Nov 13 '18 at 5:17
Please provide the script you have tried, only then we can help you
– Dark_thunder
Nov 13 '18 at 5:19
1
FYI, you can use<input type="hidden">instead of hiding them with CSS
– Phil
Nov 13 '18 at 5:20
Have you tried anything that isn't working as expected? You're basically wanting to add an
input event listener to #token and set the values of the hidden inputs based on the value entered. Is that close to what you have or are you going down a different track?– Phil
Nov 13 '18 at 5:17
Have you tried anything that isn't working as expected? You're basically wanting to add an
input event listener to #token and set the values of the hidden inputs based on the value entered. Is that close to what you have or are you going down a different track?– Phil
Nov 13 '18 at 5:17
Please provide the script you have tried, only then we can help you
– Dark_thunder
Nov 13 '18 at 5:19
Please provide the script you have tried, only then we can help you
– Dark_thunder
Nov 13 '18 at 5:19
1
1
FYI, you can use
<input type="hidden"> instead of hiding them with CSS– Phil
Nov 13 '18 at 5:20
FYI, you can use
<input type="hidden"> instead of hiding them with CSS– Phil
Nov 13 '18 at 5:20
add a comment |
3 Answers
3
active
oldest
votes
2
You're basically wanting to add an input event listener to #token and set the values of the hidden inputs based on the value entered.
Something like this should suffice...
// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
That's amazing - thank you so much @Phil
– dvoip
Nov 13 '18 at 5:42
add a comment |
3
Its pretty simple, You can get the desired result by using the conditional statement like if else.
here is the solution for your problem.
var token=$('#token').val();
if(token==123)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else if(token==456)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else {
$('#input1').val('');
$('#input1').val('');
}
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
add a comment |
1
Try the jquery code given below:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$('#token').keyup(function() {
if($(this).val() == 123) {
$('#input1').val('1'); //assign the value you want
$('#input2').val('1'); //assign the value you want
} else if($(this).val() == 456) {
$('#input1').val('2'); //assign the value you want
$('#input2').val('2'); //assign the value you want
} else {
$('#input1').val('');
$('#input2').val('');
}
});
</script>
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274241%2fjavascript-or-jquery-fill-data-based-on-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You're basically wanting to add an input event listener to #token and set the values of the hidden inputs based on the value entered.
Something like this should suffice...
// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
That's amazing - thank you so much @Phil
– dvoip
Nov 13 '18 at 5:42
add a comment |
2
You're basically wanting to add an input event listener to #token and set the values of the hidden inputs based on the value entered.
Something like this should suffice...
// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
That's amazing - thank you so much @Phil
– dvoip
Nov 13 '18 at 5:42
add a comment |
2
2
2
You're basically wanting to add an input event listener to #token and set the values of the hidden inputs based on the value entered.
Something like this should suffice...
// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
You're basically wanting to add an input event listener to #token and set the values of the hidden inputs based on the value entered.
Something like this should suffice...
// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>// make sure this script goes AFTER the HTML
// A map of token to values
const secrets = {
123: {
input1: 'input1 123',
input2: 'input2 123'
},
456: {
input1: 'input1 456',
input2: 'input2 456'
}
}
const input1 = document.getElementById('input1')
const input2 = document.getElementById('input2')
document.getElementById('token').addEventListener('input', e => {
const token = e.target.value
// get the values or if the token doesn't exist, sensible defaults
const secret = secrets[token] || {
input1: '',
input2: ''
}
input1.value = secret.input1
input2.value = secret.input2
}, false)<form>
<input id="token" type="text" placeholder="Enter token">
<input class="hidden" id="input1" type="text">
<input class="hidden" id="input2" type="password">
<input type="submit">
</form>answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
edited Nov 13 '18 at 5:35
answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
answered Nov 13 '18 at 5:29
PhilPhil
96.6k11137157
96.6k11137157
That's amazing - thank you so much @Phil
– dvoip
Nov 13 '18 at 5:42
add a comment |
That's amazing - thank you so much @Phil
– dvoip
Nov 13 '18 at 5:42
That's amazing - thank you so much @Phil
– dvoip
Nov 13 '18 at 5:42
That's amazing - thank you so much @Phil
– dvoip
Nov 13 '18 at 5:42
add a comment |
3
Its pretty simple, You can get the desired result by using the conditional statement like if else.
here is the solution for your problem.
var token=$('#token').val();
if(token==123)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else if(token==456)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else {
$('#input1').val('');
$('#input1').val('');
}
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
add a comment |
3
Its pretty simple, You can get the desired result by using the conditional statement like if else.
here is the solution for your problem.
var token=$('#token').val();
if(token==123)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else if(token==456)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else {
$('#input1').val('');
$('#input1').val('');
}
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
add a comment |
3
3
3
Its pretty simple, You can get the desired result by using the conditional statement like if else.
here is the solution for your problem.
var token=$('#token').val();
if(token==123)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else if(token==456)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else {
$('#input1').val('');
$('#input1').val('');
}
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
Its pretty simple, You can get the desired result by using the conditional statement like if else.
here is the solution for your problem.
var token=$('#token').val();
if(token==123)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else if(token==456)
{
$('#input1').val('value1'); //set the value which you want to place here
$('#input2').val('value2'); //set the value which you want to place here
}
else {
$('#input1').val('');
$('#input1').val('');
}
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
answered Nov 13 '18 at 5:39
Muddasir23Muddasir23
1149
1149
add a comment |
add a comment |
1
Try the jquery code given below:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$('#token').keyup(function() {
if($(this).val() == 123) {
$('#input1').val('1'); //assign the value you want
$('#input2').val('1'); //assign the value you want
} else if($(this).val() == 456) {
$('#input1').val('2'); //assign the value you want
$('#input2').val('2'); //assign the value you want
} else {
$('#input1').val('');
$('#input2').val('');
}
});
</script>
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
add a comment |
1
Try the jquery code given below:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$('#token').keyup(function() {
if($(this).val() == 123) {
$('#input1').val('1'); //assign the value you want
$('#input2').val('1'); //assign the value you want
} else if($(this).val() == 456) {
$('#input1').val('2'); //assign the value you want
$('#input2').val('2'); //assign the value you want
} else {
$('#input1').val('');
$('#input2').val('');
}
});
</script>
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
add a comment |
1
1
1
Try the jquery code given below:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$('#token').keyup(function() {
if($(this).val() == 123) {
$('#input1').val('1'); //assign the value you want
$('#input2').val('1'); //assign the value you want
} else if($(this).val() == 456) {
$('#input1').val('2'); //assign the value you want
$('#input2').val('2'); //assign the value you want
} else {
$('#input1').val('');
$('#input2').val('');
}
});
</script>
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
Try the jquery code given below:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$('#token').keyup(function() {
if($(this).val() == 123) {
$('#input1').val('1'); //assign the value you want
$('#input2').val('1'); //assign the value you want
} else if($(this).val() == 456) {
$('#input1').val('2'); //assign the value you want
$('#input2').val('2'); //assign the value you want
} else {
$('#input1').val('');
$('#input2').val('');
}
});
</script>
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
edited Nov 13 '18 at 5:40
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
answered Nov 13 '18 at 5:28
VinoCoderVinoCoder
556619
556619
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274241%2fjavascript-or-jquery-fill-data-based-on-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you tried anything that isn't working as expected? You're basically wanting to add an
inputevent listener to#tokenand set the values of the hidden inputs based on the value entered. Is that close to what you have or are you going down a different track?– Phil
Nov 13 '18 at 5:17
Please provide the script you have tried, only then we can help you
– Dark_thunder
Nov 13 '18 at 5:19
1
FYI, you can use
<input type="hidden">instead of hiding them with CSS– Phil
Nov 13 '18 at 5:20