Develop Reference

JavaScript function only fires when there are 2 input boxes

I have an aspx page in Visual Studio. I have a function which fires on the onkeyup.
When I have just the single control on the page, the JavaScript function is not called. When I add a second control, the JavaScript is called.
With this code, the JavaScript does not fire...
<form id="form1" runat="server">
<div>
<div class="form-group">
<label for="barcode">Barcode</label>
<input type="text" onkeyup="searchBarcode()" class="form-control" id="txtBarcode" name="barcode" />
</div>
</div>
</form>
<script>
function searchBarcode() {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>
With this code the JavaScript fires
<form id="form1" runat="server">
<div>
<div class="form-group">
<label for="registration">Registration</label>
<input type="text" class="form-control" id="txtRegistration" name="registration" />
</div>
<div class="form-group">
<label for="barcode">Barcode</label>
<input type="text" onkeyup="searchBarcode()" class="form-control" id="txtBarcode" name="barcode" />
</div>
</div>
</form>
<script>
function searchBarcode() {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>

You are missing passing event to the function
<form id="form1" runat="server">
<div>
<div class="form-group">
<label for="barcode">Barcode</label>
<input type="text" onkeyup="searchBarcode(e)" class="form-control" id="txtBarcode" name="barcode" />
</div>
</div>
</form>
<script>
function searchBarcode(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>

Try this:
<script>
window.onload = function () {
document.getElementById('txtBarcode').addEventListener('keyup', keyEvent)
}
function keyEvent(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
alert('Hello');
}
}
</script>

how to show hide based on this coding

HTML:
<input type="text" name="name" id="name_1" value="" class="showimage" />
<div class="icon_1" id="icon" style="display:none;"></div>
<input type="text" name="name" id="name_2" value="" class="showimage" />
<div class="icon_2" id="icon" style="display:none;"></div>
JQuery:
<script type="text/javascript">
$(document).ready(function() {
// Add onclick handler to checkbox w/id checkme
$('.showimage').click(function() {
var id = $(this).attr('id');
var ret = id.split("_");
var str1 = ret[1];
//alert(str1);
var id = $(this).attr('id');
var ret = id.split("_");
var str2 = ret[1];
//alert(str2);
//$(".icon_"+id).show();
// $("#icon").show();
if (str1 == str2) {
alert(str1);
$(".icon_" + str1).show();
//exit;
//alert("hi")
} else {
alert("sec");
$(".icon_" + str1).hide();
}
});
});
</script>
why not hide the else part

Your question: why not hide the else part?
That is because of $(this) it refers to the current element which have got the selector's context the event has raised on. So,
var id = $(this).attr('id');
The above variable has been used two times and both refers to the same object. So in the if condition:
if (str1 == str2) {
both values are always same and thus else never gets executed.
Better to use .focus()/.blur() events with .toggle(condition):
$(function(){
$('.showimage').on('focus blur', function(e){
$(this).next('div').toggle(e.type === "focus")
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" id="name_1" value="" class="showimage" />
<div class="icon_1" id="icon" style="display:none;">one</div><br>
<input type="text" name="name" id="name_2" value="" class="showimage" />
<div class="icon_2" id="icon" style="display:none;">two</div>

input[type="text"] {} input[type="text"] + div {
display: none;
}
hr {} input[type="text"]:focus + div {
display: inline-block;
/* added for style you can also use display:block */
}
<input type="text" name="name" id="name_1" value="" class="showimage" />
<div class="icon_1" id="icon">test1</div>
<hr>
<input type="text" name="name" id="name_2" value="" class="showimage" />
<div class="icon_2" id="icon">test2</div>

How to make a required field be invisible if valid?

I have this kind of html:
<form method="post" action="register">
<input type="text" name="name" required />
<button>Next</button>
</form>
When I click the Next button, I want to hide the Name field, but only if it is valid(not empty) and I don't want to submit the form. How can I do this with plain JavaScript?
If you know a way with jQuery, please write that too. Thanks.

Try this:
$('button').click(function() {
var check = $('#name').val();
if (check == '') {
$('#name').hide();
}
})
If the input has no content, it will be hidden.

document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();
var input = e.target.firstElementChild;
if(!input.validity.valueMissing) {
input.style.display = 'none';
}
}, false);
<form method="post" action="register">
<input type="text" name="name" required />
<button>Next</button>
</form>

Assuming that you will change "form button" for the ID of the button, and "form input" for the ID of the input. The jQuery code would be something like this:
$("form button").click(function() {
if ($("form input").val() != "")
$("form input").hide();
});

Try this:
<form method="post" action="register">
<div id="steps1">
<input id="txtname" type="text" placeholder="enter name here" name="name" />
<input id="btnNext" type="button" value="next" />
</div>
<div id="complete" style="display:none;">
<input type="text" name="age" placeholder="enter age here" />
<input type="submit" value="submit" />
</div>
</form>
$(document).ready(function () {
$("#btnNext").click(function () {
if ($("#txtname").val() != "") {
$("#steps1").hide();
$("#complete").show();
}
});
});

In jQuery:
$("button").click(function() {
if ($('input[name=name]').val() != '') {
$('input[name=name]').fadeOut(); // Or hide, or css('display', 'none')
}
});

Make class e.g. "validate", which you can attach to your form after clicking Next.
Then in CSS:
.validate input:valid {
display: none;
}

Try onsubmit event:
var validate = function(form) {
var toSubmit = true;
if (form.name.value) { //has some text
form.name.style.display = "none"; //hide the input field
} else {
toSubmit = false;
}
return toSubmit;
};
<form method="post" action="register" onsubmit='return validate(this);'>
<input type="text" name="name" required />
<button>Next</button>
</form>
EDIT
Try blur event:
var validate = function(box) {
if (!box.value) {
alert('This field is required');
box.focus();
}
};
<form method="post" action="register">
<input type="text" name="name" onblur='validate(this);' />
<button>Next</button>
</form>

Read these to understand the code and why.
document.querySelector
EventTarget.addEventListener
onsubmit
event.preventDefault
Constraint validation HTML5
document.querySelector('form').addEventListener('submit', function (e) {
e.preventDefault();
var input = e.target.firstElementChild;
if(!input.validity.valueMissing) {
input.style.display = 'none';
}
}, false);
<form method="post" action="register">
<input type="text" name="name" required />
<button>Next</button>
</form>

How can convert jquery code to prototype code?

I have a jquery code but is not working and seems that I need prototype code.
Here is the code: http://jsfiddle.net/qKG5F/1627/
<script type="text/javascript">
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#search').attr('disabled', 'disabled');
} else {
$('#search').removeAttr('disabled');
}
});
})()
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>
Please somebody can help me to convert this jquery to prototype code?
All kind of help will be accepted.

For sake of completeness I went ahead and converted your code to PrototypeJS. I optimized the code a bit (sorry can't help it) to exit when the first empty field is found.
<script type="text/javascript">
document.observe('dom:loaded',function(){
$$('form > input').invoke('observe','keyup',function() {
var empty = false;
$$('form > input').each(function() {
if (this.value == '') {
empty = true;
throw $break;
}
});
$('search').writeAttribute('disabled',empty);
});
});
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>

The issue is that your JavaScript is executing before the DOM elements load.
A very simple fix would be to wrap your function invocation within the default jQuery function.
<script type="text/javascript">
$(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#search').attr('disabled', 'disabled');
} else {
$('#search').removeAttr('disabled');
}
});
});
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>
Passing a function to jQuery is the equivalent of calling $(document).ready(someFunctionHere). What this does is defer the execution of the function until the DOM has finished loading.
Alternatively, putting your script tag at the bottom of your HTML would also achieve the desired effect.

How do I trigger ESC button to clear text entered in text box?

<input type="text" id="search" size="25" autocomplete="off"/>
I know it is something with
onkeydown="if (event.keyCode == 27)

Declare a function which will be called when a key is pressed:
function onkeypressed(evt, input) {
var code = evt.charCode || evt.keyCode;
if (code == 27) {
input.value = '';
}
}
And the corresponding markup:
<input type="text" id="search" size="25" autocomplete="off"
onkeydown="onkeypressed(event, this);" />

<input type="text" value="" onkeyup="if ( event.keyCode == 27 ) this.value=''" />
This should work.

$('input[type=text]').each(function (e) {
$(this).keyup(function (evt) {
var code = evt.charCode || evt.keyCode;
if (code == 27) {
$(this).val('');
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" autofocus value="input data" placeholder="ESC button clear" style="padding:5px;">
<p>Hit esc button to see result</p>

function keyPressed(evt) {
if (evt.keyCode == 27) {
//clear your textbox content here...
document.getElementById("search").value = '';
}
}
Then in your input tag...
<input type="text" onkeypress="keyPressed(event)" id="search" ...>