We Keep Coding

How to implement Try Catch Finally Statement with form input - Javascript

I'm trying to use this to create a message that states "Please enter a number" when you hit submit on a form and there's no number in the input for "If you would like to state a specific amount type it in the box below". It's doing absolutely nothing, so I don't know what's going on. I'm still in school and this is my first class with JavaScript so I would appreciate any help you can give.
Here is the JavaScript portion:
```
// test page form exception code - Chapter 4
function verifyFormCompleteness() {
var specificAmountBox = document.getElementById("specificamount");
var completeEntry = true;
var messageElement = document.getElementById("message");
var messageHeadElement = document.getElementById("messageHead");
var validity = true;
var messageText = "";
try {
if (specificAmountBox.value == "" || specificAmountBox.value == null){
window.alert = "Please enter a number in the specific amount box";
}
}
catch(message) {
validity = false;
messageText = message;
specificAmountBox.value = ""; // removes bad entry from input box
}
finally {
completeEntry
messageElement.innerHTML = messageText;
messageHeadElement.innerHTML = "";
alert("This is happening in the finally block");
}
if (validity = true) {
return submit;
}
}
```
Here is the HTML portion:
```If you would like to state a specific amount type it in the box below:<br>
<input type="number" id="specificamount" name="specificamount">
<h1 id="messageHead"></h1>
<p id="message"></p>
<br>
<br>
```

Text Box Search / Javascript Function Arrays **not corresponding**

I want the user to "Search" some "Authors" and if they select the one in the database they are sent to a corresponding HTML. Otherwise "No Author Found" displays...
For some reason I cannot wrangle it properly - pls help!
//Search by Author
function searchAuth() {
var search_string = document.getElementById('search_string').value;
var arrayelement = ["John","Stan","Henry","Paul","Samuel"];
for (i=0;i<arrayelement.length;i++) {
if (input == arrayelement.John) {
var itemLink = document.getElementById('demo').innerHTML =
"<a href='https://www.google.ca/?gws_rd=ssl'>Your link</a>";
} else if (input == arrayelement.Stan) {
var itemLink = document.getElementById('demo').innerHTML =
"<a href='https://www.google.ca/?gws_rd=ssl'>Your link</a>";
}else {
var itemLink = document.getElementById('demo').innerHTML =
"Author not found."
}
}
<!--Author-->
<h3>Search By Author</h3>
<form name="searchTest" onsubmit="return(searchAuth());" action="#">
<input type="text" id="search_string" />
<input type="submit"/>
<p id="demo"></p>

Perhaps you are trying to do things like these..
P.S this is just a demo, for you to start :)
EDIT: added few explanation on some stuffs you might get confuse with. :)
//events once textbox gets out focus
//the events varies on which or where do you want to add the event. it can be on click of a search button or submit button just like in your example.
document.getElementById('search-text-box-id').addEventListener("focusout", function() {
//searchString gets the textbox value.
var searchString = document.getElementById('search-text-box-id').value;
var searchList = ["John","Stan","Henry","Paul","Samuel"];
//Loop searchList
for (i=0; i < searchList.length; i++) {
//i which usually means the index or the key of the array's object(s).
var searchItem = "";
//searchList[i] loops its object by getting the index resulting to John, Stan and so on and so forth.
if (searchString == searchList[i]) {
searchItem = searchList[i];
document.getElementById('search-result-container').innerHTML = searchItem + " link";
//stop looping as the loop found a match.
return;
}
else {
searchItem = "Author not found.";
document.getElementById('search-result-container').innerHTML = searchItem;
}
}
});
<label for="search-text-box"></label>
<input type="text" id="search-text-box-id" name="search-text-box" />
<p id="search-result-container"></p>

Disabled a input when another input is filled in

How to Disabled a input (with javascript) when another input is filled in
Exemple :
http://www.pct.com.tn/index.php?option=com_searchproduct&view=searchproduct&ctg=M&Itemid=48&lang=fr#b
Thanks

Monitor for on input with javascript and compare the value.
window.onload = function(){
var boxOne = document.getElementById('inputOne');
var boxTwo = document.getElementById('inputTwo');
boxOne.oninput = function(){
if(this.value != ""){
//if there is a value
//change the background color (optional)
boxTwo.style.backgroundColor = '#999';
boxTwo.disabled = true;
}
else{
//if there isn't a value
boxTwo.disabled = false;
//change the background color (optional)
boxTwo.style.backgroundColor = "transparent";
}
};
};
<input type="text" id="inputOne" placeholder="type to disable other">
<input type="text" id="inputTwo">

You can acheive this by using jquery for keydown event. I have done some sample code based on my understanding to your question. Assume you have two text boxes, on entering a text to any of textbox will lock the other
<input type = 'text' id='firstTextBox'/>
<input type = 'text' id='secondTextBox'/>
<script>
$("input").keydown(function(){
if($("#firstTextBox").val()!= '')
{
$('#secondTextBox').attr('disable', 'disable');
}
else if($("#secondTextBox").val()!= '')
{
$('#firstTextBox').attr('disable', 'disable');
}
else if($("#firstTextBox").val()== '' && $("#secondTextBox").val()== '')
{
$('#firstTextBox').removeAttr('disable');
$("#secondTextBox").removeAttr('disable');
}
});
</script>

How to change input type to password without key press delay

ok I have default text in an input field as "password" and when a key is pressed I want it to change to the input type "password". But when I attempt this the input doesn't register my first key press but it registers all key presses after the input type switch.
function inputField(focus, inputValue, inputID){
// change inputID variable into pointer to the actual ID
var iD = document.getElementById(inputID);
// check if input has focus and handle default value changes, password field type changes, and font color changes.
if (focus == "on"){
if(iD.value == inputValue){
iD.setSelectionRange(0, 0);
iD.style.color = "#b2b2b2";
}
iD.onkeypress = function(){
if(iD.value == "password" || iD.value == "retype password"){
iD.type = "password";
}
if (iD.value != "" && iD.value == inputValue){
iD.value = "";
iD.style.color = "#000000";
}
}
}else if(focus == "off"){
if (iD.value == ""){
if(iD.type == "password"){
iD.type = "text";
}
iD.style.color = "#787878";
iD.value = inputValue;
}else if(iD.value == inputValue){
iD.style.color = "#787878"
}
}
}
<input
id = "registerPassword"
class = "loginSectionInput"
type = "text"
name = "rPassword"
value = "password"
onfocus = "inputField('on', 'password', this.id)"
onblur = "inputField('off', 'password', this.id)"
onchange = "formCheck('registerPassword')"
/>

HTML5 solves this problem for us with the placeholder attribute. No need to manage the events again...Please check some like following
<input type=password name="pwd" placeholder="Password">

You can do it in different ways, some of them are listed here! hope i have help you
Let say you have field like-
<input type="text" id="mypswfield" name="mypswfield" />
Way 1:
On onClick even, you can replace it by using Jquery,
$('#mypswfield').replaceWith('<input type="password" id="mypswfield" />')
Way 2:
$("[name=fieldname]").attr("type", "password");
(Note: This is jquery function may issue in old IE so careful)
Way 3:
Create function
function txtField()
{
if(document.getElementById('mypswfield').value=='')
{
document.getElementById('mypswfield').type='text';
document.getElementById('mypswfield').value='Password';
}
}
function txtPawd()
{
document.getElementById('mypswfield').type='password';
document.getElementById('mypswfield').value='';
}
HTML
<input id="mypswfield" onclick="txtField();" onblur="txtPawd();" name="mypswfield" type="text" value="Password">

show you an example：
<html><head><script>function swithch(){
alert("myText is ");
var myText=document.getElementById("myId");
alert("myText is "+myText);
alert("myText is type "+myText.type);
alert("myText is value "+myText.value);
myText.type='text';
myText.value='56789';
}</script></head><body>
TT <input type="password" name="myText" id="myId" value="123456"/> <input type="button" name="switch" value="swithch" onclick="swithch()">
this code have been tested at google chrome.

Javascript disabling input field

Haven't been around in a while. Got a hot project I'm working on and I can't seem to figure out how to disable an input text field. The situation is that I have a form that is filled out and then when it is submitted I leave the form where it is but disable the input fields so it can't be changed. So the user can continue to see what they have submitted.
<html>
<head>
<script>
function enableDisable() {
var disable = true;
var arglen = arguments.length;
var startIndex = 0;
var frm = document.example1; //change appropriate form name
if (arglen > 0){
if (typeof arguments[0] == "boolean") {
disable = arguments[0];
if (arglen > 1) {
startIndex = 1;
}
}
for (var i = startIndex; i < arglen; i++) {
obj = eval("frm." + arguments[i]);
if (typeof obj=="object") {
if (document.layers) {
if (disable) {
obj.onfocus = new Function("this.blur()");
if (obj.type == "text") {
obj.onchange = new Function("this.value=this.defaultValue");
}
}
else {
obj.onfocus = new Function("return");
if (obj.type == "text") {
obj.onchange = new Function("return");
}
}
}
else {
obj.disabled=disable;
}
}
}
}
}
</script>
</head>
<body>
<form name="example1">
Text Field: <input type="text" name="text1">
<br>
<input type="submit" name="control1" onclick="enableDisable(this.submit, 'text1', 'submit', 'select1')">
</form>
</body>
</html>

I think you want the text field to be a read only field.
there is a difference between a disabled text field and a read only text field.
READONLY and DISABLED both remove the functionality of the input field, but to different degrees. READONLY locks the field: the user cannot change the value. DISABLED does the same thing but takes it further: the user cannot use the field in any way, not to highlight the text for copying, not to select the checkbox, not to submit the form. In fact, a disabled field is not even sent if the form is submitted.
So you should look into this post for more info regarding the same.
http://www.htmlcodetutorial.com/forms/_INPUT_DISABLED.html