I have more than 5 card types and each card as different validation, when user change the card type, the reqpattern will change and i need to pass changed reqpattern in callonkeyup function.
Please tell me how to pass changed reqpattern in callonkeyup function.
callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'))
<input type="tel" reqpattern="^[0-9]+\$"
onblur="callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'));"
value="" id="AccountNumber"/>
Why not just pass the req pattern within the function call:
<input type="tel" onblur="callonkeyup(this,'AccountNumber', '^[0-9]+\$');" value="" id="AccountNumber"/>
I am not able to reproduce your issue with your code.
I have tried with the below code snippet, Can you please check it at your hand?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="tel" reqpattern="^[0-9]+\$"
onblur="callonkeyup(this,'AccountNumber',this.getAttribute('reqpattern'));"
value="" id="AccountNumber"/>
<input type="tel" reqpattern="^[a-z]+\$"
onblur="callonkeyup(this,'AccountName',this.getAttribute('reqpattern'));"
value="" id="AccountName"/>
<script>
function callonkeyup(obj,txtType,rpattern)
{
alert(obj);
alert(txtType);
alert(rpattern);
}
</script>
</body>
</html>
Let me know if any concern.
Related
Don't know how this is supposed to work, but here goes. So the issue that I am seeing at the moment is I am unable to get a value from a getElementById when the element exists before the script to run. I have been unable to find anything via google or stack overflow. If I am barking in the wrong area, truly I apologize. Below is the offending code. I think?!? Again please forgive.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type='text/javascript' src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<title>Testing Masking</title>
</head>
<body>
<input name='EmailAddress' type='text' maxlength='255' />
<input name='maskTest' />
<button id='maskButton'>Test
</button>
<script>
document.getElementById('maskButton').onclick = function() {
var test = document.getElementById('maskTest').value;
console.log(test);
}
</script>
</body>
</html>
As I said I am unable to get any value other than null back to the console. Thanks if you guys can help.
You don't have an element with an id of maskTest. Presumably you're just missing the attribute from the name="maskTest" element.
Also note that using onclick is considered outdated now. It's much better practice to use addEventListener instead. Try this:
document.getElementById('maskButton').addEventListener('click', function() {
var test = document.getElementById('maskTest').value;
console.log(test);
});
<input name="EmailAddress" type="text" maxlength="255" />
<input id="maskTest" name="maskTest" />
<button id="maskButton">Test</button>
Or alternatively you could use jQuery as you've added it to your page anyway:
$('#maskButton').on('click', function() {
var test = $('#maskTest').val();
console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="EmailAddress" type="text" maxlength="255" />
<input id="maskTest" name="maskTest" />
<button id="maskButton">Test</button>
so I have a project now, as an addition to my company's website, we want to show our clients how much they can save on gas by buying one of our electric cars, I'm responsible for making it happen, I don't know how to approach this using javascript, can you guys give me a hand? our marketing guy got the idea from this website, that is basically what we want, but I was hoping i could make it a little better on some aspects:
1st-the client wouldn't have to press submit to see the results, as they fill the last field, the calculated part is populated automatically, for this i've been fiddling with the onChange event, unsuccessfully though xD
here's what I have so far, it is not working, at least on dreamweaver's live mode, haven't tested it online yet as I was hoping to develop the whole thing offline:
<script type="text/javascript">
function calc(){
var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
return fossil_day;
}
</script>
<form name="calc" id="calc" >
<p>
Km/dia
<input type="text" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="text" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
</p>
<input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />
<script type="text/javascript">
var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>
</form>
Please note that although I have this already, I wouldnt mind not doing this at all and using another solution, even if it doesnt use forms, I'm just showing what i have already so you can tell me how I'm wrong and how I can have a better approach at it
there are many errors inside your code
document.getElementById() needs the element id in brackets ''
you can't create a element with the same name,id as a function calc else it will throw an error as it's an object and not a function.
your executing the function onload... but you want it to be executed when the button is clicked & onchange.
you don't need to add value if empty and name if you use getElementById
return false in the function on buttons inside form else it could send the form and so refresh the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>
Useing jQuery (and html5 type="number" form fields):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<p>
Km/dia
<input type="number" name="km" id="km" value="" />
</p>
<p>
€/Litro
<input type="number" name="euro" id="euro" value="" />
</p>
<p>
Litros/100km
<input type="number" name="consumo" id="consumo" value="" />
</p>
<div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
function calculate(){
var km = $('#km').val();
var euro = $('#euro').val();
var consumo = $('#consumo').val();
var cem_km = consumo*euro;
var fossil_day = (cem_km*km)/100;
$('#fossil-day').html(fossil_day);
}
$(function() {
/*when #consumo input loses focus, as per original question*/
$('#consumo').blur(function(){
calculate();
});
});
</script>
</body>
</html>
This question already has answers here:
Passing html values into javascript functions
(4 answers)
Closed 9 years ago.
I am learning HTML/JavaScript and am writing a simple site to test what I've learned so far.
I am trying to get the firstname and lastname entered by the user from an input form and then pass these names to a JavaScript function but for some reason, all I see in my popup window is:
Hello [object HTMLInputElement]
This is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Daynesh's Test Site</title>
<script>
function addUser(first, last)
{
alert("Hello " + first);
}
</script>
</head>
<body>
<h1>Registered Users</h1>
<p>Enter user name:</p>
<form>First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="addUser(firstname,'right')">
</form>
<hr>
<h3>Output</h3>
</body>
</html>
Can someone please explain what I'm doing wrong? I'm sure its something very simple that I'm not understanding here.
Thanks in advance!
in your code
onclick="addUser(firstname,'right')"
firstname is nothing you don't define it before so you should define it in javascript or
get value from input directly
this your code after fix
<!DOCTYPE html>
<html>
<head>
<title>Daynesh's Test Site</title>
<script>
function addUser(first, last)
{
alert("Hello " + first);
}
</script>
</head>
<body>
<h1>Registered Users</h1>
<p>Enter user name:</p>
<form>First name: <input type="text" name="firstname" id="firstname">
Last name: <input type="text" name="lastname">
<input type="submit" value="Submit" onclick="addUser(document.getElementById('firstname').value,'right')">
</form>
<hr>
<h3>Output</h3>
</body>
</html>
i hope my answer help you
document.getElementByName('firstname').value
See a more detailed answer at: JavaScript: how to get value of text input field?
Is it possible to copy an input from a previously entered field into another uneditable field javascript? Say for example you have two name fields, the first field you must enter your name, once entered the name will automatically be copied in the second text field which is uneditable. I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite knew to javascript so any sort of help or a nudge in the right direction would be great.
Just use the keyup listener of your input:
<input type="text" id="input1" />
<input type="text" id="input2" readonly='readonly' />
var $input2 = document.getElementById('input2');
var $input1 = document.getElementById('input1');
$input1.addEventListener('keyup', function()
{
$input2.value = $input1.value;
});
here's example: fiddle
Yes you could, just do the follow:
document.getElementById('non_editable_name').value = document.getElementById('editable_name').value;
if you use jquery, you can do:
$('#non_editable_name').val($('#editable_name').val());
Here is a fiddle. You can do this by using jQuery and code:
$(function () {
$('#nameInput').change(function () {
$('#secondInput').val($(this).val());
});
});
with:
<input id="nameInput" type="text"/><br />
<input id="secondInput" type="text" readonly/>
HTML
<input type="text" id="entry" />
<input type="hidden" id="storage" />
JS
(function() {
$('#entry').on('change', function() { $('#storage').val(this.value); });
})();
Like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script>
function copianome(nome){
document.getElementById('ds_name_result').value = nome;
}
</script>
</head>
<body>
<input type="text" id="ds_name" onkeyup="copianome(this.value)" /><br />
<input type="text" id="ds_name_result" readonly="readonly" />
</body>
</html>
I'm sorry if the title is not too clear but I didn't know how to do it more precise.
I have this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Test</title>
<script type="text/javascript">
function p1() {
document.getElementById('f1').value = 'Isaac';
}
function p2() {
x=document.getElementById('f1');
x.value += ' Newton';
}
</script>
</head>
<body>
<form action="" method="get">
<input type="text" id="f1" name="f1" onChange="p2()">
<input type="text" id="f2" name="f2" onChange="p1()">
<input type="submit" value=">">
</form>
</body>
</html>
I need to show "Isaac Newton" in the f1 field when write something in f2. I only can modify the p1 function. I don't know the name of the p1 functions, even it is changed every time the page is loaded.
Thanks.
Thanks for the answer. The real input fields are like this:
<input type="text" id="tceforms-textfield-4e20ac55d3700" class="formField tceforms-textfield" name="data[tx_oriconvocatorias_publicadas][NEW4e20ac55cdc8f][cnom]_hr" value="" style="width: 460px; " maxlength="255" onchange="typo3form.fieldGet('data[tx_oriconvocatorias_publicadas][NEW4e20ac55cdc8f][cnom]','required,trim,tx_oriconvocatorias_autoLlenar','',1,'');TBE_EDITOR.fieldChanged('tx_oriconvocatorias_publicadas','NEW4e20ac55cdc8f','cnom','data[tx_oriconvocatorias_publicadas][NEW4e20ac55cdc8f][cnom]');">
And I have 10 fields of different types: select, text and textarea.
Is there a way to load this dynamic code, from my onchange function?
I can access the name of the fields so I want to do something like:
function p1() {
code + name.Onchange;
}
It is possible? I don't know the correct syntax.
I also tried with the focus(),click(),select() and blur() methods, but they don't communicate Javascript that a change was made.
The problem is the onChange event does not fire when you do document.getElementById('f1').value = 'Isaac';. So make these following changes and you should be good:
<input type="text" id="f1" name="f1">
<input type="text" id="f2" name="f2" onChange="p1();p2()">
No matters.
I used regEx to load the parameters and call the function p2 from inside the p1 function.
The call looks like this.
function p1(){
//...
typo3form.fieldGet('data['+tconv+']['+idconv+']['+camconv[c]+']','','',1,'');
TBE_EDITOR.fieldChanged(tconv,idconv,camconv[c]);
//...
}
Where tconv, idconv, and camconv are the results of the regEx queries.