Get JS object data from user input - javascript

Acceptance Criteria: Enter a name and have the person's extension returned to the UI onClick or when pressing "return".
I am looking for suggestions on how to get this to work.
UI
<html>
<head>
<title>SearchFunction</title>
</head>
<body>
<script type="text/javascript">
var extensionList = {
Abby: '8845',
David: '8871',
Jim: '8890',
Lewis: '8804',
};
var returnLookUp = function(){
var getInfo = document.getElementById("thisSearch");
var SearchInfo = thisSearch.value;
/*......?*/
}
</script>
<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick = "returnLookUp();">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>
</body>
</html>

There is no explicit button type is defined. So by default it will be button type ="submit". in that case it will try to submit the form. button type="button" can be use or to prevent the default behaviour, preventDefault() can be used
extensionList[thisSearch.value] is use to get the value of the key from the object, extensionList is the object, thisSearch.value will be the input which is same as the key of the object
var extensionList = {
Abby: '8845',
David: '8871',
Jim: '8890',
Lewis: '8804',
};
var returnLookUp = function(e) {
e.preventDefault();
var getInfo = document.getElementById("thisSearch");
document.getElementById("output").value = extensionList[thisSearch.value];
}
<form>
<input id="thisSearch" type="text" placeholder="enter name">
<button onClick="returnLookUp(event);">Find</button>
<input id="output" name="output" type="text" size="30">
<br><br>
</form>

Related

Filling a form field with the current URL via javascript

I'm trying to populate a hidden field in a form that I have created with the current URL of the page including all the UTM tags.
I seem to be having trouble when trying to get the value of the URL into the field, for some reason it keeps reporting null
var urlnew = window.location.href;
document.querySelector("input[name='url_hidden']").value = "urlnew";
if I hard code a value it works correctly and submits but it's just anytime i try to use something else
You should remove the quote:
<html>
<body>
<input type=text name=url_hidden>
</body>
<script type="text/javascript">
var urlnew = window.location.href;
document.querySelector("input[name='url_hidden']").value = urlnew;
</script>
</html>
function submitForm(e) {
e.preventDefault();
const username_el = document.querySelector("input[name='username']");
const password_el = document.querySelector("input[name='user_password']");
const hidden_el = document.querySelector("input[name='hidden_url']");
const url = window.location.href;
hidden_el.value = url;
window.alert(`${username_el.value} - ${password_el.value} - ${hidden_el.value}`);
}
<form onsubmit="submitForm(event)">
Username: <input type="text" name="username" id="username" placeholder="Username">
<br>
Password: <input type="password" name="user_password" id="user_password" placeholder="Password">
<br>
Hidden URL: <input type="hidden" name="hidden_url" id="hidden_url">
<br>
<button type="submit">Submit</button>
</form>
You might as well want to populate the value attribute:
document.querySelector("input[name='url_hidden']").value = urlnew;

How to disable submit button when regEx did not match

Hi all I have written following code:
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/>
<button>Continue</button>
</form>
<script>
function validate(){
var company_Name = document.getElementById('FormField_6_input').value;
var companyRGEX = /[2-9]{1}\d{3}/;
var result = !companyRGEX.test(company_Name);
alert(result)
}
</script>
I want to disable the button if the input does not match the regular expression, and enable it if it matches. How can I achieve to that result?
If you want to use JavaScript to dynamically disable the button, use the following:
The input eventListener to listen for changes in the field value;
The .disabled property to toggle it.
How I implemented on your solution:
Created two variables to hold references to the field and to the button.
Added validate as the function for an input eventListener (attached to the field).
Compared the field.value to the companyRGEX using string.match(regEx).
You can run the snippet below.
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);
function validate(){
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]{1}\d{3}/;
if(!companyNameValue.match(companyRGEX)) {
button.disabled = true;
} else {
button.disabled = false;
}
}
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName"/>
<button id="ContinueButton_6">Continue</button>
</form>
Just use pattern with required. No JavaScript is needed
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" pattern="[2-9]{1}\d{3}" required>
<button>Continue</button>
</form>
If you want to use JavaScript than cancel the submission
function validateIt (evt) {
var company_Name = document.getElementById('FormField_6_input').value;
var companyRGEX = /[2-9]{1}\d{3}/;
var isValid = !!companyRGEX.test(company_Name);
if (!isValid) {
evt.preventDefault();
alert('error');
}
}
console.log(document.querySelector("form"))
document.querySelector("form").addEventListener("submit", validateIt);
<form action="">
<input type=" text " id="FormField_6_input" maxlength="20" name="CompanyName" />
<button>Continue</button>
</form>
add addEventListener to the input field the return a value from validate function
document.getElementById('FormField_6_input').addEventListener('input', function(evt) {
document.getElementById('submit').disabled = validate(this.value)
});
function validate(company_Name) {
var companyRGEX = /[2-9]{1}\d{3}/;
var result = !companyRGEX.test(company_Name);
return result;
}
<form action="" onsubmit="validate()">
<input type="text" id="FormField_6_input" maxlength="20" name="CompanyName" />
<button id="submit">Continue</button>
</form>

How to get a form submit button to save to localStorage

I am a beginner and am trying to figure out how to get this to work. I have a form and I want the submit button to be able to save to the localStorage. So far, this is what I have.
<script>
function storeRecipe() {
localStorage.setItem($("#recipe-name").val(), $("#recipe-
description").val());
console.log(Object.keys(localStorage));
}
</script>
<b>Recipe Name:</b>
<br>
<textarea id="recipe-name" rows="1" cols="35"></textarea>
<br><br>
<b>Recipe Description:</b>
<br>
<textarea id="recipe-description" rows="15" cols="35"></textarea>
<br><br>
<input type="submit" value="Send Recipe" onClick="storeRecipe()">
Upon submit, you can stop the submission of the form and save each input field into as a localStorage key. Working jsfiddle: https://jsfiddle.net/mr4ms4zp/. Open the console cmd+opt+i on macs to see the changed localStorage object.
<form method="POST">
<b>Recipe Name:</b>
<br>
<textarea id="recipe-name" rows="1" cols="35"></textarea>
<br><br>
<b>Recipe Description:</b>
<br>
<textarea id="recipe-description" rows="15" cols="35"></textarea>
<br><br>
<input type="submit" value="Send Recipe">
</form>
<script>
document.querySelector('form').onsubmit = function(e) {
e.preventDefault();
var name = document.querySelector('#recipe-name').value;
var description = document.querySelector('#recipe-description').value;
localStorage["name"] = name;
localStorage["description"] = description;
console.log(localStorage);
}
</script>
Solution with Vanilla Javascript
function storeRecipe() {
let name = document.getElementById("recipe-name").value;
let description = document.getElementById("recipe-description").value
localStorage.setItem(name, description);
}
Avoid the submit default behavior with event.preventDefault() or change the type of the button, i would recommend the second one:
<button type="button" value="Send Recipe" onClick"storeRecipe()">Submit</button>

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

Print Html output open in new window

I'm trying to print a output of my Mysql records. What I need to print is based on the value of search input. How I can open it in new window using onclick function? Any help will appreciate.
Index.php
<input type="text" name="search" id="search"/>
<input type="submit" name="print" value="print" onclick="openWin(); return false;"/>
<script>
function openWin()
{
window.open("../print.php","name","width=900, height=1200,toolbar=no,scrollbars=yes, resizable=yes");
}
</script>
Print.php
if (isset($_POST['print'])) {
$search = $_POST['search'];
}
You can put the input in a form and open the popup on submit of form.
http://jsfiddle.net/wvkjfee2/3/
<form id="formID" action="../print.php" method="post">
<input type="text" name="search" id="search"/>
<input type="submit" name="print" value="print"/>
</form>
<script>
var myForm = document.getElementById('formID');
myForm.onsubmit = function() {
var w = window.open('../print.php','Popup_Window','width=900, height=1200,toolbar=no,scrollbars=yes, resizable=yes');
this.target = 'Popup_Window';
return false;
};
</script>

Categories

Resources