difficulty using enter key as tab - javascript

i'm creating forms and needed to use "enter key press as tab key" to focus next text fields and after completion of the form, button should be pressed.
my code works except for the button press part, it does nothing to the button.
thanks in advance...
$(window).load(function(){
document.getElementById("Editbox1").focus();
function tab(e) {
if (e.which == 13) {
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
var input = inputs[x];
input.onkeypress = tab;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
<form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
<input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
<img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
<img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
</form>
</div>

You need to differentiate the button click by its id, you have two approaches
1st you can bind the enter function by using the length of the inputs, get last id and differentiate it.
$(window).load(function() {
document.getElementById("Editbox1").focus();
function tab(e) {
if (e.which == 13) {
console.log('test');
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}
}
function submitForm(e) {
if (e.which == 13) {
document.getElementByName("Form1").submit();
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++) {
var input = inputs[x];
if (x === (inputs.length - 1)) {
input.onkeypress = submitForm;
} else {
input.onkeypress = tab;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
<form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
<input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="text" id="Editbox3" style="position:absolute;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
<img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
<img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
</form>
</div>
2nd one you can differentiate it using button id when enter is pressed.
if (e.which == 13 && e.target.id !== "Button1") {
$(window).load(function() {
document.getElementById("Editbox1").focus();
function tab(e) {
if (e.which == 13 && e.target.id !== "Button1") {
console.log('test');
e.target.nextSibling.nextSibling.focus();
e.preventDefault();
}else{
alert('submit')
}
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++) {
var input = inputs[x];
input.onkeypress = tab;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
<form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
<input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="text" id="Editbox3" style="position:absolute;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
<img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
<img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
</form>
</div>

Related

Form Container input value issues

Radio buttons provide access and revoke access are there in HTML page. On clicking provide access it will display some options to take the values from user and this is working without ant issues, Same as on clicking revoke access button it will display some options to take the value from user. But problem here is revoke access also taking the values from provide access radio button. Any idea what is wrong in the below code
<html>
<head>
<script type="text/javascript">
function empty() {
var x;
x = document.getElementById("qx").value;
y = document.getElementById("pwd").value;
if (x == "") {
alert("QX number should not be null");
return false;
};
if (y == "") {
alert("Password should not be null");
return false;
};
}
</script>
<style>
.top {
position: relative;
background-color: #ffffff;
height: 68px;
}
.top1 {
top: 110px;
left: 476px;
position: fixed;
background-color: #ffffff;
height: 70px;
}
</style>
</head>
<body>
<script type="text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("provideContainer").style.visibility = 'visible';
document.getElementById("revokeContainer").style.visibility = 'hidden';
} else if (c.value == "2") {
document.getElementById("provideContainer").style.visibility = 'hidden';
document.getElementById("revokeContainer").style.visibility = 'visible';
} else {}
}
</script>
<center>
<font color="green">
<h2>Please Select the below option</h2>
</font><br>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>
<font size="3" color="orange">Provide Access</font>
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>
<font size="3" color="orange">Revoke Access</font>
</form>
<div class="top" style="visibility:hidden" id="provideContainer">
<form action="C:/Users/QXJ3624/Downloads/provideaccess.sh" name="submit" METHOD="post" onsubmit="return empty()">
<center><label for="QX"><font color="#00FFFF">Enter Qx number:</font></label>
<input type="text" id="qx" name="qx" pattern="[A-Za-z0-9]+" maxlength="7" title="Max 7 letters and no special characters allowed"><br><br>
<label for="pwd"><font color="#00FFFF">Enter Password:</font></label>
<input type="password" id="pwd" name="pwd" minlength="8"><br><br>
<label for="number"><font color="#00FFFF">Enter QX Number you want to delete:</font>
</label>
<input type="text" id="number" name="number" pattern="[A-Za-z0-9]+" maxlength="7"><br><br>
<INPUT TYPE="submit" VALUE="Submit" onClick="return empty()">
</center>
</form>
</div>
<div class="top1" style="visibility:hidden" id="revokeContainer">
<form action="cgi-bin/revokeaccess.sh" name="submit" METHOD="post" checked>
<center><label for="QX"><font color="#00FFFF">Enter Qx number:</font></label>
<input type="text" id="qx" name="qx" maxlength="7" title="Max 7 letters and no special characters allowed"><br><br>
<label for="pwd"><font color="#00FFFF">Enter Password:</font></label>
<input type="password" id="pwd" name="pwd" minlength="8"><br><br>
<label for="number"><font color="#00FFFF">Enter QX Number you want to delete:</font>
</label>
<input type="text" id="number" name="number" maxlength="7"><br><br>
<INPUT TYPE="submit" VALUE="Submit" onClick="return empty()">
</a>
</center>
</form>
</div>
</body>
</html>
If you mean the the checking with Javascript if the qx number and password is not null, its because you are assigning the inputs in revoke and provide access the same id for checking.
(id="qx" and id="pwd")
Thats what a id does. It should be only existing once on this site.

When I click text box how to clear Successful message in javascript

When I submit data with the submit button I got "Successfully Inserted" message I need to clear this message when i click text box how can i clear this message.
Thank you
Try This
<input id="textbox1" type="text" onmouseenter="clearSuccessLabel()" >
<input id="textbox2" type="text" onmouseenter="clearSuccessLabel()" >
<input id="textbox3" type="text" onmouseenter="clearSuccessLabel()" >
<input id="textbox4" type="text" onmouseenter="clearSuccessLabel()" >
<input id="textbox5" type="text" onmouseenter="clearSuccessLabel()" >
<span id="alert">Success!</span>
function clearSuccessLabel()
{
document.getElementById('alert').innerHTML = "";
}
To properly help you, you should post some actual code you've written.
With what you have given, i can assume you could do the following:
window.onload = function() {
var elArr = document.querySelectorAll('input[type=text]');
for (var i = 0, len = elArr.length; i < len; i++) {
elArr[i].addEventListener('focus', clearText);
}
}
function clearText() {
document.getElementById('alert').style.display = 'none';
}
span {
color: red;
display: block;
}
<input id="textbox" type="text">
<input id="textbox2" type="text">
<input id="textbox3" type="text">
<input id="textbox4" type="text">
<input id="textbox5" type="text">
<span id="alert">Success!</span>

Checking duplicate array element with javascript

<form action="" method="post" name="frm" onsubmit="return check()">
<input type="text" name="val[]" class="bla">
<input type="text" name="val[]" class="bla">
<input type="text" name="val[]" class="bla">
<input type="text" name="val[]" class="bla">
<input type="submit" value="send">
</form>
i want to using javascript validation
check(){
// if array elements duplicate return false and show error ?
}
inputs maybe empty , not required , i found that this javascript function , but I could not adapt.
function checkIfArrayIsUnique(arr) {
var map = {}, i, size;
for (i = 0, size = arr.length; i < size; i++){
if (map[arr[i]]){
return false;
}
map[arr[i]] = true;
}
return true;
}

passing value to textbox

I'm working on project. I want to pass value of textbox1 to form 1 and form 3, but it passes value only to that form which comes first(here form1).
< script type = "text/javascript" >
submitForms = function() {
var answer = document.getElementById("textbox1").value;
var q = document.getElementById('q');
q.value = answer;
var q1 = document.getElementById('q1');
q1.value=answer;
document.forms["form1"].submit();
document.forms["form3"].submit();
}
< /script>
<body background="a.jpg">
<p>
</br>
<input type="text" name="textbox1" id="textbox1" style="width:600px;height:30px;border:3px solid white" placeholder="Search..." required/>
<input type="submit" name="button1" id="button1" value="go" style="width:50px;height:30px;color:black;background-color:white" onclick="submitForms()" />
</br>
</br>
<iframe width="100%" height="500px" name="myIframe" frameborder='0'></iframe>
<iframe width="100%" height="1700px" name="myIframe1" frameBorder="0"></iframe>
<form method="get" action="http://bing.com//search" target="myIframe1" name="form1">
<input type="text" name="q" id="q" size="25" maxlength="255" value="" style="display: none" />
</form>
<form method="get" action="http://duckduckgo.com/" target="myIframe" name="form3">
<input type="text" name="q1" id="q1" size="25" maxlength="255" value="" style="display: none" />
</form>
</p>
</body>
try this :
var q1 = document.getElementById('q1');
q1.value=answer;
you forgot to fill the 2 forms.
Forgot another id q1
`
<script type = "text/javascript">
submitForms = function() {
var answer = document.getElementById("textbox1").value;
var q = document.getElementById('q');
var qq = document.getElementById('q1');
q.value = answer;
qq.value = answer;
document.forms["form1"].submit();
document.forms["form3"].submit();
}
</script>

How to fill textbox using radio button

I have a code with button Click. When i click text appears in textbox. It woks. But i have a problem to write anoter type of code. I want to fill the textbox using radio buttons but without button Click. So when I click in a radio I want to show text in textbox. Here is my code.
<script type="text/javascript">
function testResults (form) {
var TestVar1 = form.input[0].checked;
var TestVar2 = form.input[1].checked;
var TestVar3 = form.input[2].checked;
var TestVar4 = form.input[3].checked;
if (TestVar1 == true) {
form.textbox.value = "Earth is...";
} else if (TestVar2 == true){
form.textbox.value = "Mars is...";
} else if (TestVar3 == true){
form.textbox.value = "Jupiter is...";
} else if (TestVar4 == true){
form.textbox.value = "Saturn is...";
}
}
</script>
</head>
<body>
<center>
<h1>Our Universe</h1>
</center>
<form>
Select Planet<br />
<input type="radio" name="input" onclick='check_value(0)'/>Earth<p>
<input type="radio" name="input" onclick='check_value(1)'/>Mars<p>
<input type="radio" name="input" onclick='check_value(2)'/>Jupiter<p>
<input type="radio" name="input" onclick='check_value(3)'/>Saturn<p>
<input type="button" name="button" value="Click" onClick="testResults(this.form)"><p>
<textarea name="comments" id="textbox" rows="5" cols="50"></textarea>
</form>
</body>
To do that on clicking radio butttons a way could be this:
<input type="radio" name="input" onclick="check_value(this.value)" value="Earth" />Earth<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Mars"/>Mars<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Jupiter"/>Jupiter<p>
<input type="radio" name="input" onclick="check_value(this.value)" value="Saturn"/>Saturn<p>
and js:
function check_value(txt){
document.form.textbox.value = txt + " is...";
}
See if is this you want.
<script type="text/javascript">
function check_value (value,form) {
if (value == 0) {
form.textbox.value = "Earth is...";
} else if (value == 1){
form.textbox.value = "Mars is...";
} else if (value == 2){
form.textbox.value = "Jupiter is...";
} else if (value == 3){
form.textbox.value = "Saturn is...";
}
}
</script>
</head>
<body>
<center>
<h1>Our Universe</h1>
</center>
<form>
Select Planet<br />
<input type="radio" name="input" onclick='check_value(0,this.form)'/>Earth<p>
<input type="radio" name="input" onclick='check_value(1,this.form)'/>Mars<p>
<input type="radio" name="input" onclick='check_value(2,this.form)'/>Jupiter<p>
<input type="radio" name="input" onclick='check_value(3,this.form)'/>Saturn<p>
<input type="button" name="button" value="Click" onClick="testResults(this.form)"><p>
<textarea name="comments" id="textbox" rows="5" cols="50"></textarea>
</form>
</body>

Categories

Resources