This is my first time using Javascript, so please forgive me. I'm still not solid on the terminology or best practices, but I'm losing my mind with how complex this script is getting for such a simple thing.
Also if there's a better way, in general, to do what I'm trying to do, let me know because boy I have lost sleep on this one.
Context:
I have a form to build standardized email signatures. The user puts their info into the inputs and then copies the output from a copyable area with standardized styling specific for email markup. In each signature, someone may include the information for another person in their company.
I have a set of radio buttons that enable 0, 1, 2, or 3 additional fieldsets of input for these team members. In addition to adding fieldsets of inputs, they also enable outputs in the copyable area. The outputs have to be "display: none" so that someone who does not include this information in their signature doesn't end up with blank table cells in their copied signature.
https://jsfiddle.net/slingtruchoice/jrem21yb/
Here's the whole, ugly thing. I'm proud but also so not proud of it. Like I said, literally the first time I've ever used javascript. Specifically, I'm looking at this:
var radios = document.getElementsByName('addTeam');
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
//--------------------------------- || RADIO BUTTONS || -------------------------------------------
let fieldset = document.getElementsByClassName('sigform-fieldset'), //CLASS fieldset for all radio buttons
inputs = document.getElementsByClassName('sigform-team'), //CLASS all radio buttons
izero = document.getElementById('add-team__0'), //ID radio button, input 0
ione = document.getElementById('add-team__1'), //ID radio button, input 1
itwo = document.getElementById('add-team__2'), //ID radio button, input 2
ithree = document.getElementById('add-team__3'); //ID radio button, input 3
//--------------------------------- || INPUT SECTIONS || -------------------------------------------
let divs = document.getElementsByClassName('sigform__team-inputs'), //CLASS all input wrapper divs
done = document.getElementById('team-inputs__1'), //ID div of input section, team 1
dtwo = document.getElementById('team-inputs__2'), //ID div of input section, team 2
dthree = document.getElementById('team-inputs__3'); //ID div of input section, team 3
//--------------------------------- || SIGNATURE OUTPUT || -------------------------------------------
let // ------------------------ Table Rows -------------------------------------------
teamsrows = document.getElementsByClassName('extraTeamWrap'), //CLASS of tr wrap each output table
teamwrap1 = document.getElementById('extraTeamWrap1'), //ID tr wrap of output table team 1
teamwrap2 = document.getElementById('extraTeamWrap2'), //ID tr wrap of output table team 2
teamwrap3 = document.getElementById('extraTeamWrap3'), //ID tr wrap of output table team 3
// ------------------------ Tables -------------------------------------------
teamtables = document.getElementsByClassName('extraTeamTable'), //CLASS of table for each output
teamtable1 = document.getElementById('extraTeamTable-one'), // ID table wrap of output table team 1
teamtable2 = document.getElementById('extraTeamTable-two'), // ID table wrap of output table team 2
teamtable3 = document.getElementById('extraTeamTable-three'); // ID table wrap of output table team 3
if (ione.checked == false && itwo.checked == false && ithree.checked == false || izero.checked == true){
done.style.display = 'none';
dtwo.style.display = 'none';
dthree.style.display = 'none';
teamsrows.style.display = 'none';
} else if (ione.checked == true && itwo.checked == false && ithree.checked == false) {
done.style.display = 'block';
teamsrows.style.display = "block";
dtwo.style.display = 'none';
dthree.style.display = 'none';
} else if (ione.checked == false && itwo.checked == true && ithree.checked == false) {
done.style.display = 'block';
dtwo.style.display = 'block';
dthree.style.display = 'none';
} else if (ione.checked == false && itwo.checked == false && ithree.checked == true) {
done.style.display = 'block';
dtwo.style.display = 'block';
dthree.style.display = 'block';
} else {
return false;
}
});
}
And it's not even done. (Oh yeah, by the way, please don't expect this fiddle to work. It's far from there.)
How do I go about this better? I'm having difficulty googling answers for my questions since I don't really know how to say "how to make an argument equal to multiple IDs that are paired specifically with other IDs to do something to that ID when the other ID is activated... +javascript" in a way that yields useful results.
My only request is that any explanation come in very simple language. I really can't iterate enough how much of an absolute beginner I am. Most responses on StackExchange I've found for other questions have just blown right over my head.
And really, thank you for any help you're able to give!
Well, that took more than a minute. Here is the updated code. Are there more efficient ways of doing this? Probably. Here, I want you take away how data structures can simplify your code.
let radios = document.getElementsByName('addTeam');
for (let i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', function() {
//Based on whether it is a class or an id
const elementClasses = [
'sigform-fieldset',
'sigform-team',
'sigform__team-inputs',
'extraTeamWrap',
'extraTeamTable',
];
const elementIds = [
'add-team__0',
'add-team__1',
'add-team__2',
'add-team__3',
'team-inputs__1',
'team-inputs__2',
'team-inputs__3',
'extraTeamWrap1',
'extraTeamWrap2',
'extraTeamWrap3',
'extraTeamTable-one',
'extraTeamTable-two',
'extraTeamTable-three'
];
//Adding elements to the loop
elementsTotal = [];
//For each loop to iterate the array
elementClasses.forEach(element => {
push(document.getElementsByClassName(element));
});
elementIds.forEach(element => {
push(document.getElementsByClassName(element));
});
//The commented code is for classes.
//document.getElementsByClassName returns a collection, so you must iterate that collection to style.
if (elementsTotal[6].checked == false && elementsTotal[7].checked == false && elementsTotal[8].checked == false || elementsTotal[5].checked == true){
elementsTotal[9].style.display = 'none';
elementsTotal[10].style.display = 'none';
elementsTotal[11].style.display = 'none';
//teamsrows.style.display = 'none';
} else if (elementsTotal[6].checked == true) {
elementsTotal[9].style.display = 'block';
//teamsrows.style.display = "block";
elementsTotal[10].style.display = 'none';
elementsTotal[11].style.display = 'none';
} else if (elementsTotal[7].checked == true) {
elementsTotal[9].style.display = 'block';
elementsTotal[10].style.display = 'block';
elementsTotal[11].style.display = 'none';
} else if (elementsTotal[8].checked == true) {
elementsTotal[9].style.display = 'block';
elementsTotal[10].style.display = 'block';
elementsTotal[11].style.display = 'block';
} else {
return false;
}
});
}
So I talked about objects, but I can't really see how it might be implemented here. Thus, I would like to show an example of how it might be used.
Example from: https://betterprogramming.pub/stop-putting-so-many-if-statements-in-your-javascript-3b65aaa4b86b
Here, is a pretty simple if statement approach, not the most clean code.
function getStatusColor (status) {
if (status === 'success') {
return 'green'
}
if (status === 'warning') {
return 'yellow'
}
if (status === 'info') {
return 'blue'
}
if (status === 'error') {
return 'red'
}
}
Better code:
function getStatusColor (status) {
return {
success: 'green',
warning: 'yellow',
info: 'blue',
error: 'red'
}[status]
}
With an object, it is easier to tell what is happening. I couldn't fit an object anywhere in your code as the if statements had booleans instead of strings. (I merely thought about strings, I wish I knew how to do it with booleans, though!)
Again, use data structures! I hope you learned some things, I did too.
Pretty impressive starter project and results! I am also learning Javascript and the most important thing for me are speaking and short variable/function names. If you can still understand it after 3 or 6 months, it's good code :)
Maybe an unexpected answer, but at least from my perspective some repetition is OK. Especially, for this "smaller" project and because you just started coding in Javascript. You can still tweak your code and remove repetitions later.
The "refactored" code still cannot write to the extra fields to the right but now it:
adds the extra fields (at the bottom and to the right) depending on your team checkboxes.
uses shorter and more speaking variable names, incl. all HTML elements (repeating the word "sigform" may be unnecessary).
For a loop to add an eventlistener to all checkboxes, check out:
Attach listener to multiple children
Regarding the code repetition, check out:
JavaScript: Dynamically Creating Variables for Loops
Let me know if you have any questions or issues to understand my changes. I hope this helps.
const phonePrinter = function() {
// using more speaking names here, can still be improved
let phoneNumberDir = document.querySelector('#input__phone__dir').value.replace(/\D/g, "");
let directPhone = document.querySelector('#phone-output__dir');
let officePhone = document.querySelector('#input__phone__off').value.replace(/\D/g, "");
let extension = document.querySelector('#input__ext__off').value;
let officePhoneWithExtension = officePhone + ',' + extension;
let phoneLinkOff = document.querySelector('#phone-output__off');
// the input is a phone number
function validatePhoneNumber(phoneNumber) {
var re = /^\(?(\d{3})\)?[- ]?[. ]?(\d{3})[- ]?[. ]?(\d{4})$/;
return re.test(phoneNumber);
return phoneNumber
}
// let's use only if statemetns for clarity, you return directly anyway
const noPhoneNumber = officePhone == '' && phoneNumberDir == ''
if (noPhoneNumber) {
alert("Enter at least one phone number.")
return
}
if (!validatePhoneNumber(officePhone)) {
alert("Enter a valid office phone number.")
return
}
if (!validatePhoneNumber(phoneNumberDir)) {
alert("Enter a valid direct phone number.")
return
}
//populating the phone in the href
directPhone.setAttribute("href", "tel:" + phoneNumberDir);
directPhone.innerHTML = addDots(phoneNumberDir);
//populating the phone + ext in the href
phoneLinkOff.setAttribute("href", "tel:" + officePhoneWithExtension);
phoneLinkOff.innerHTML = addDots(phoneNumberDir, extension);
event.preventDefault();
};
// function to handle the dots in the phone number, externalNumber is a default parameter, not set by default
function addDots(phoneNumber, externalNumber='') {
var number = phoneNumber.slice(0, 3) + "." + phoneNumber.slice(3, 6) + "." + phoneNumber.slice(6, 10);
// if external number is set, add it to the number output
if (externalNumber != '') { return number + " ext " + externalNumber }
return number
}
// this should be much clearer now. New order and shorter names
function printName() {
var name = document.querySelector('#input__name').value;
var title = document.querySelector('#input__title').value;
if (name == '') alert("Please enter your name.");
if (title == '') alert('Please enter your title.');
if (name != '' && title != '') {
const nameOutput = document.querySelector('#nameOutput');
const titleOutput = document.querySelector('#titleOutput');
nameOutput.innerHTML = name;
titleOutput.innerHTML = title;
}
}
// removed the uncommented code here, just for testing
// checkLimiter = document.getElementsByTagName('banner-checks'); ...
var checkbox = document.querySelectorAll(".check");
for (var i = 0; i < checkbox.length; i++)
checkbox[i].onclick = selectiveCheck;
function selectiveCheck(event) {
var checked = document.querySelectorAll(".check:checked");
// only used here, updated the name and use > maxBanners below instead of = and +1
const maxBanners = 2
if (checked.length > maxBanners) {
alert("You may only have up to two additional banners in your signature.");
return false;
}
}
// not required to set default hidden in your html
// the classList.add("hidden") will hide the elements
// below, we will remove the hidden class using remove to make it visible again
var teamFields1 = document.getElementById('team-inputs__1');
var teamFields2 = document.getElementById('team-inputs__2');
var teamFields3 = document.getElementById('team-inputs__3');
teamFields1.classList.add("hidden");
teamFields2.classList.add("hidden");
teamFields3.classList.add("hidden");
// name maybe still not optimal
var table1 = document.getElementById('teamTable1');
var table2 = document.getElementById('teamTable2');
var table3 = document.getElementById('teamTable3');
table1.classList.add("hidden");
table2.classList.add("hidden");
table3.classList.add("hidden");
// unsure how to handle/improve this right now, see link in answer
var radios = document.getElementsByName('addTeam');
for (let i = 0; i < radios.length; i++) {
radios[i].addEventListener('click', function() {
// removed some variables, we still have repetition
const input0 = document.getElementById('add-team__0');
const input1 = document.getElementById('add-team__1');
const input2 = document.getElementById('add-team__2');
const input3 = document.getElementById('add-team__3');
if (input0.checked == true){
table1.classList.add('hidden');
table2.classList.add('hidden');
table3.classList.add('hidden');
teamFields1.classList.add("hidden");
teamFields2.classList.add("hidden");
teamFields3.classList.add("hidden");
} else if (input1.checked == true) {
table1.classList.remove('hidden');
table2.classList.add('hidden');
table3.classList.add('hidden');
teamFields1.classList.remove("hidden");
teamFields2.classList.add("hidden");
teamFields3.classList.add("hidden");
} else if (input2.checked == true) {
table1.classList.remove('hidden');
table2.classList.remove('hidden');
table3.classList.add('hidden');
teamFields1.classList.remove("hidden");
teamFields2.classList.remove("hidden");
teamFields3.classList.add("hidden");
} else if (input3.checked == true) {
table1.classList.remove('hidden');
table2.classList.remove('hidden');
table3.classList.remove('hidden');
teamFields1.classList.remove("hidden");
teamFields2.classList.remove("hidden");
teamFields3.classList.remove("hidden");
}
});
}
function populate() {
phonePrinter();
printName();
}
#import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600&display=swap');
body {
font-size: 16;
font-family: "Source Sans Pro", Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #095285;
}
.columns {
display: flex;
flex-direction: row;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);
}
form {
padding: 5vw;
width: 40vw;
margin: 30px auto;
display: flex;
flex-direction: column;
}
.input {
display: block;
padding: 10px 10px 5px 0;
width: 100%;
box-sizing: border-box;
margin: 10px;
background-color: transparent;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #095285;
font-size: 24px;
font-weight: 600;
font-family: "Source Sans Pro", Arial, sans-serif;
color: #095285;
}
.input::placeholder {
font-weight: 400;
font-size: 24px;
color: #095285;
font-family: "Source Sans Pro", Arial, sans-serif;
opacity: 1;
text-transform: uppercase;
}
.output {
width: 40vw;
padding: 5vw;
margin: 30px auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.output > .table-wrapper {
font-family: "Source Sans Pro", sans-serif;
color: #095285;
font-size: 16px;
background-color: white;
border: 2px solid #095285;
padding: 2vw;
min-width: 375px;
}
.instructions {
font-size: 24px;
font-weight: bolder;
text-align: center;
color: #095285;
}
.no-select::selection {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: no-drop;
}
.selectable::selection,
table.selectable>*::selection {
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
cursor: copy !important;
}
/* banners, checkboxes */
/* checkboxes */
.dropdown-hidden {
display: none;
}
.dropdown-visible {
display: block;
}
/* banners */
.banner-hidden {
display: none;
}
.banner-visible {
display: block;
}
.visible {
display: block;
}
.hidden {
display: none;
}
<div class="columns">
<!-- the only place where I kept sigform in the name. Other refs have been removed for shorter names -->
<form class="sigform" id="sigform" name="sigform">
<input class="input" id="input__name" type="text" placeholder="Name:">
<input class="input" id="input__title" type="text" placeholder="Title:">
<input class="input" id="input__phone__dir" type="tel" placeholder="Direct phone number:">
<input class="input" id="input__phone__off" type="tel" placeholder="Office phone number:">
<input class="input" id="input__ext__off" type="number" placeholder="Office Extension:">
<input class="input" id="input__website" type="url" placeholder="Team Website:">
<label class="label" id="label__banner-inst" for="field__banner-fs">Add banners to your signature. You may choose up to 2.
<fieldset class="fieldset" id="field__banner-fs" labeledby="label__banner-inst">
<label class="label" id="label__banner-one">
<input class="check" type="checkbox" name="banner-checks">
</label>
<label class="label" id="label__banner-two">
<input class="check" type="checkbox" name="banner-checks">
</label>
<label class="label" id="label__banner-three">
<input class="check" type="checkbox" name="banner-checks">
</label>
<label class="label" id="label__banner-four">
<input class="check" type="checkbox" name="banner-checks">
</label>
<label class="label" id="label__banner-five">
<input class="check" type="checkbox" name="banner-checks">
</label>
<label class="label" id="label__banner-six">
<input class="check" type="checkbox" name="banner-checks">
</label>
</fieldset>
</label>
<label class="label" id="label__add-team">How many additional team members would you like represented in your signature?</label>
<fieldset class="fieldset" id="field__add-team" labeledby="label__add-team">
<label class="label" id="label__add-team__0" for="add-team__0">0
<input class="team" id="add-team__0" type="radio" name="addTeam" value="0" labeledby="label__add-team__0" checked>
</label>
<label class="label" id="label__add-team__1" for="add-team__1">1
<input class="team" id="add-team__1" type="radio" name="addTeam" value="1" labeledby="label__add-team__1">
</label>
<label class="label" id="label__add-team__2" for="add-team__2">2
<input class="team" id="add-team__2" type="radio" name="addTeam" value="2" labeledby="label__add-team__2">
</label>
<label class="label" id="label__add-team__3" for="add-team__3">3
<input class="team" id="add-team__3" type="radio" name="addTeam" value="3" labeledby="label__add-team__3">
</label>
</fieldset>
<fieldset class="fieldset" id="field__team-sigs">
<div class="team-inputs" id="team-inputs__1">
<input type="text" id="team-1__name" class="input" placeholder="Team Member Name:">
<input type="text" id="team-1__title" class="input" placeholder="Title:">
<input type="text" id="team-1__email" class="input" placeholder="Email:">
<input type="text" id="team-1__phone" class="input" placeholder="Direct Phone Number:">
</div>
<div class="team-inputs hidden" id="team-inputs__2">
<input type="text" id="team-2__name" class="input" placeholder="Team Member Name:">
<input type="text" id="team-2__title" class="input" placeholder="Title:">
<input type="text" id="team-2__email" class="input" placeholder="Email:">
<input type="text" id="team-2__phone" class="input" placeholder="Direct Phone Number:">
</div>
<div class="team-inputs start-hidden" id="team-inputs__3">
<input type="text" id="team-3__name" class="input" placeholder="Team Member Name:">
<input type="text" id="team-3__title" class="input" placeholder="Title:">
<input type="text" id="team-3__email" class="input" placeholder="Email:">
<input type="text" id="team-3__phone" class="input" placeholder="Direct Phone Number:">
</div>
</fieldset>
<button id="submit" type="button" onClick="populate()">Submit</button>
<img src="">
</form>
<div class="output">
<p class="instructions no-select">
HIGHLIGHT EVERYTHING BELOW TO COPY AND PASTE IN YOUR SIGNATURE
</p>
<div class="table-wrapper">
<table class="signature selectable">
<tr>
<td colspan="1" id="nameOutput">Bobby Joe</td>
</tr>
<tr>
<td colspan="1" id="titleOutput">Web Developer | Graphic Designer</td>
</tr>
<tr>
<td colspan="1"><span id="phoneWrapper">Direct: 111.222.3333 | Office: 111.222.3333 ext. 123</span></td>
</tr>
<tr>
<td colspan="1"><img src="https://via.placeholder.com/350x65">
</td>
</tr>
<tr class="extraTeamWrap" id="extraTeamWrap1">
<table class="extraTeamTable" id="teamTable1">
<tr>
<td class="extraTeam teamName" id="team-name__one">Extra Team member</td>
</tr>
<tr>
<td class="extraTeam teamTitle" id="team-title__one">Extra Team title</td>
</tr>
<tr>
<td class="extraTeam teamEmail" id="team-email__one">Extra Team email</td>
</tr>
<tr>
<td class="extraTeam teamPhone" id="team-phone__one">111.222.6666</td>
</tr>
</table>
</tr>
<tr class="extraTeamWrap" id="extraTeamWrap2">
<table class="extraTeamTable" id="teamTable2">
<tr>
<td class="extraTeam teamName" id="team-name__two">Extra Team member</td>
</tr>
<tr>
<td class="extraTeam teamTitle" id="team-title__two">Extra Team title</td>
</tr>
<tr>
<td class="extraTeam teamEmail" id="team-email__two">Extra Team email</td>
</tr>
<tr>
<td class="extraTeam teamPhone" id="team-phone__two">111.222.6666</td>
</tr>
</table>
</tr>
<tr class="extraTeamWrap" id="extraTeamWrap3">
<table class="extraTeamTable" id="teamTable3">
<tr>
<td class="extraTeam teamName" id="team-name__three">Extra Team member</td>
</tr>
<tr>
<td class="extraTeam teamTitle" id="team-title__three">Extra Team title</td>
</tr>
<tr>
<td class="extraTeam teamEmail" id="team-email__three">Extra Team email</td>
</tr>
<tr>
<td class="extraTeam teamPhone" id="team-phone__three">111.222.6666</td>
</tr>
</table>
</tr>
</table>
<table class="signature selectable" id="banner-table">
<tr class="tr__banner-opt banner-hidden" id="tr__banner-opt__one">
<td class="td__banner-opt" id="td__banner-opt__one">Banner One</td>
</tr>
<tr class="tr__banner-opt banner-hidden" id="tr__banner-opt__two">
<td class="td__banner-opt" id="td__banner-opt__two">Banner Two</td>
</tr>
<tr class="tr__banner-opt banner-hidden" id="tr__banner-opt__three">
<td class="td__banner-opt" id="td__banner-opt__three">Banner Three</td>
</tr>
<tr class="tr__banner-opt banner-hidden" id="tr__banner-opt__four">
<td class="td__banner-opt" id="td__banner-opt__four">Banner Four</td>
</tr>
<tr class="tr__banner-opt banner-hidden" id="tr__banner-opt__five">
<td class="td__banner-opt" id="td__banner-opt__five">Banner Five</td>
</tr>
<tr class="tr__banner-opt banner-hidden" id="tr__banner-opt__six">
<td class="td__banner-opt" id="td__banner-opt__six">Banner Six</td>
</tr>
</table>
</div>
</div>
</div>
The answer to this question has ended up being to reframe the way I build functions, which is what I expected.
Instead of just doing switchClass functions with a million variables, I ended up learning about loops and using variables set as strings containing HTML that I used .replace to dynamically populate these templates with user-input content each time they click the button.
I would put the code in this post, but it's too large unfortunately.
Here's a replit: https://replit.com/#slingtc/Email-Signature?v=1
This question already has answers here:
How to prevent a user from removing the first three characters in a text input?
(6 answers)
Closed 4 years ago.
So I have a text input
<input type="text" value="+98912314789" class="telinfo">
Is there a way to keep 4 letter from the begin ?
I want to keep +9891 read only and the user can delete all part of this textbox except this part.
You can capture the keyup and blur (in case user directly copy paste the value in textbox) event
function handleEv( event )
{
var thisObj = event.currentTarget;
var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
if ( thisObj.value.indexOf( fixedValue ) != 0 )
{
console.log(thisObj.value, fixedValue);
event.preventDefault();
thisObj.value = fixedValue;
}
}
Demo of sample implementation
var el = document.querySelector( ".telinfo" );
el.addEventListener( "keyup", handleEv);
el.addEventListener( "blur", handleEv);
function handleEv( event )
{
var thisObj = event.currentTarget;
var fixedValue = thisObj.getAttribute( "data-fixedvalue" );
if ( thisObj.value.indexOf( fixedValue ) != 0 )
{
console.log(thisObj.value, fixedValue);
event.preventDefault();
thisObj.value = fixedValue;
}
}
<input type="text" value="+98912314789" class="telinfo" data-fixedvalue = "+9891">
try this code may be it will help to resolve your issue
<input type="text" value="+98912314789" class="telinfo" id="telphone" onchange="staticData()" onkeyup="staticData()">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function staticData(){
var data=$("#telphone");
if(data.val().length<5)
{
data.val("+9891");
data.attr("readonly",true);
}
else
{
data.attr("readonly",false);
}
}
</script>
This question solved by #gurvinder372 but you could achieve this easier than it with Regex pattern:
function phoneNumber(selector, num) {
$(selector).on('input', function() {
var reg = /\+/gi;
if (!$(this).val().match(reg)) {
$(this).val($(this).val().replace(/([\d]+)/g, "+" + num + "$1"));
}
});
}
phoneNumber('.telinfo', '9891');
phoneNumber('.mobinfo', '78');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" placeholder="+9891" class="telinfo">
<input type="text" value="" placeholder="+78" class="mobinfo">
Update: Also I converted this to function to usable multiple times.
Try using two inputs one for readonly and second for editing -
<input type="text" value="+9891" readonly>
<input type="text" value="" class="telinfo">
Wrap it in a container to add both inputs on the same line.
The easiest way is separating the read-only text from input text
<input type="text" value="+9891" size="3" disabled>
<input type="text" value="">
make css and html like below change style as per your requirement
<div class="field">
<input type="text" value="" class="telinfo">
</div>
.field{
float: left;
width: 100%;
position: relative;
max-width: 240px;
}
.field:before{
content: "+9891";
position: absolute;
left: 15px;
top: 10px
}
.field input{
background: #fff;
border: 1px solid #ddd;
padding: 10px 15px 10px 58px;
font-size: 14px;
line-height: 18px;
color: #000;
}
Ok, so I have a filterable search form that returns certain images in a grid, which works great, it resets when I delete the text in the search input, but when I click the "Clear" button, which should do the same thing as deleting the text, it doesn't work. Here is the HTML and JQuery used:
<form id="live-search" action="" class="styled" method="post" style="margin: 2em 0;">
<div class="form-group">
<input type="text" class="form-control" id="filter" value="" style="width: 80%; float: left;" placeholder="Type to search"/>
<span id="filter-count"></span>
<input type="button" class="clear-btn" value="Clear" style="background: transparent; border: 2px solid #af2332; color: #af2332; padding: 5px 15px; border-radius: 3px; font-size: 18px; height: 34px;">
</div>
</form>
This is the JQuery for the clearing text:
jQuery(document).ready(function(){
jQuery("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = jQuery(this).val(), count = 0;
// Loop through the comment list
jQuery(".watcheroo").each(function(){
jQuery(this).removeClass('active');
// If the list item does not contain the text phrase fade it out
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
jQuery(this).show();
count++;
}
});
// Update the count
var numberItems = count;
});
//clear button remove text
jQuery(".clear-btn").click( function() {
jQuery("#filter").value = "";
});
});
Any help would greatly be appreciated.
value is a property on a DOMElement, not a jQuery object. Use val('') instead:
jQuery(document).ready(function($) {
$("#filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$(".watcheroo").each(function(){
var $watcheroo = $(this);
$watcheroo.removeClass('active');
if ($watcheroo.text().search(new RegExp(filter, "i")) < 0) {
$watcheroo.fadeOut();
} else {
$watcheroo.show();
count++;
}
});
var numberItems = count;
});
$(".clear-btn").click(function() {
$("#filter").val(''); // <-- note val() here
});
});
Note that I amended your code to alias the instance of jQuery passed in to the document.ready handler. This way you can still use the $ variable safely within the scope of that function.
As the accepted answer doesn't solve the problem.
Try input event instead of keyup
$("#filter").on("input", function() {.....
& then clear the filter input field on which event you want.
$(".clear-btn").on("click", function() {
$("#filter").val("").trigger("input");
});
Add this to your CSS:
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
<form>
<input type="search" name="search" placeholder="Search...">
</form>
I am using - and + buttons to change the number of the text box, I am having troubles dealing with different text fields, here is my code:
var unit = 0;
var total;
// if user changes value in field
$('.field').change(function() {
unit = this.value;
});
$('.add').click(function() {
unit++;
var $input = $(this).prevUntil('.sub');
$input.val(unit);
unit = unit;
});
$('.sub').click(function() {
if (unit > 0) {
unit--;
var $input = $(this).nextUntil('.add');
$input.val(unit);
}
});
button {
margin: 4px;
cursor: pointer;
}
input {
text-align: center;
width: 40px;
margin: 4px;
color: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
field 1
<button type="button" id="sub" class=sub>-</button>
<input type="text" id="1" value=0 class=field>
<button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
field 2
<button type="button" id="sub2" class=sub>-</button>
<input type="text" id="2" value=0 class=field>
<button type="button" id="add2" class=add>+</button>
</div>
And here's the DEMO
You can see in the demo that the values change correctly only if you click buttons on the same field, but if you alternate between fields the values don't change properly.
This should be all you need:
$('.add').click(function () {
$(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub').click(function () {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
By using the unit variable you were tying both inputs together. And the plus in +$(this) is a shorthand way to take the string value from the input and convert it to a number.
jsFiddle example
You're using the same variable to hold the values of your two inputs. One simple option would be to use two variables instead of one:
var unit_1 = 0;
$('#add1').click(function() {
unit_1++;
var $input = $(this).prev();
$input.val(unit_1);
});
/* Same idea for sub1 */
var unit_2 = 0;
$('#add2').click(function() {
unit_2++;
var $input = $(this).prev();
$input.val(unit_2);
});
/* Same idea for sub2 */
and unit = unit just assigns the value of unit to itself, so that's no very useful and you can certainly leave it out.
An alternative approach is to use data attributes and have each element store its own value. Edit: it already stores its own value. Just access it.
var total;
// if user changes value in field
$('.field').change(function() {
// maybe update the total here?
}).trigger('change');
$('.add').click(function() {
var target = $('.field', this.parentNode)[0];
target.value = +target.value + 1;
});
$('.sub').click(function() {
var target = $('.field', this.parentNode)[0];
if (target.value > 0) {
target.value = +target.value - 1;
}
});
button {
margin: 4px;
cursor: pointer;
}
input {
text-align: center;
width: 40px;
margin: 4px;
color: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
field 1
<button type="button" id="sub" class=sub>-</button>
<input type="text" id="1" value=0 class=field>
<button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
field 2
<button type="button" id="sub2" class=sub>-</button>
<input type="text" id="2" value=0 class=field>
<button type="button" id="add2" class=add>+</button>
</div>
I am having trouble trying to convert this into an array. I don't fully understand how to take input from a form and save it in an array.
My project states: Do NOT save the input in a set of variables and then put those in an array.
Use the array as your collection of data saving variables. (That is what a data
structure is for.)
I have looked for the last 2 hours trying to find something to help me. I have to do this project in JavaScript, but keep finding jquery and I'm not quite sure on how to convert it to Javascript
Any suggestions on how I can take the form input and save it in an array?
This is only a little bit of my project. I just took the first function and the HTML that is attached to the function.
Code in the snippet.
function getID() {
var studentID = new Array();
studentID = document.forms["getFormInfo"]["txtStudentID"].value;
var numberOnly = /^[0-9]+$/;
//Checks for a null/blank within Student ID: field.
if (studentID.length == 0) {
document.getElementById('divAllField').style.display = '';
document.forms["getFormInfo"]["txtStudentID"].focus();
return false;
} //End of if statement
else {
if (studentID.length == 8 && studentID.match(numberOnly)) {
//Run the next function
getFirstName();
} //End of else/if statement
else {
//Show Error Message
document.getElementById('divStudentID').style.display = "";
//Focus on input field with the error.
document.forms["getFormInfo"]["txtStudentID"].focus();
} //end of else/if/else statement
} //End of else statement
} //End of function getID()
h1 {
text-align: center;
color: teal;
}
table {
border-spacing: 8px;
border: 2px solid black;
text-align: justify;
}
th {
text-align: center;
padding: 8px;
color: blue;
font-size: 125%;
}
td {
padding: 5px;
}
input,
select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 2px;
}
label {
float: left;
min-width: 115px;
}
div {
padding: 3px;
color: red;
font-size: 80%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Begining of the header -->
</head>
<!-- End of the header -->
<body>
<!-- Everything in the <body> </body> displays on the webpage -->
<form id="getFormInfo">
<!-- Creates a form with an ID -->
<table id="tableInfo">
<!-- Creates a table within the form -->
<!-- Creates a table header within the form and table -->
<th>User Information</th>
<!-- Error Message for all fields if they are null/blank -->
<tr>
<td><strong><div id="divAllField" style="display: none;">
Please make sure all input boxes are filled out.
</div></strong>
</td>
</tr>
<!-- Student ID Input -->
<tr>
<td><strong><label>Student ID:</label></strong>
<input type="text" name="txtStudentID" maxlength="8" placeholder="8 Digit ID" value="00149371" required>
<!-- Error Message for Student ID -->
<strong><div id="divStudentID" style="display: none;">
Please enter your 8 Digit Student ID. (Whole Numbers Only)</br>
Example: 00123456
</div></strong>
</td>
</tr>
<tfoot>
<td>
<input type="button" onclick="getID();" value="Submit">
</tfoot>
</td>
</table>
<!-- End of tableInfo -->
</form>
<!-- End of getInfo -->
</body>
</html>
Anyone know how I can save the input from the form and save it into an array?
Please help, I've been working on this project for over 10 hours.
Use the push function to add items to the array.
function getID() {
var studentID = [];
var tstStudentIdVal = document.forms["getFormInfo"]["txtStudentID"].value
studentID.push(tstStudentIdVal);
var numberOnly = /^[0-9]+$/;
//Checks for a null/blank within Student ID: field.
if (tstStudentIdVal.length == 0) {
document.getElementById('divAllField').style.display = '';
document.forms["getFormInfo"]["txtStudentID"].focus();
return false;
} //End of if statement
else {
if (tstStudentIdVal.length == 8 && tstStudentIdVal.match(numberOnly)) {
//Run the next function
getFirstName();
} //End of else/if statement
else {
//Show Error Message
document.getElementById('divStudentID').style.display = "";
//Focus on input field with the error.
document.forms["getFormInfo"]["txtStudentID"].focus();
} //end of else/if/else statement
} //End of else statement
} //End of function getID()
If you can't use jQuery, I think the most elegant solution is to use querySelectorAll() to get a nodeList of all your inputs, then use a combination of Function.prototype.call() and Array.prototype.map() to translate the array of inputs into an array of your own design.
In the snippet below, the resulting array has objects each which have a name and value, which come directly from the text inputs in your form (your question isn't quite clear on how the resulting array should look).
function getID() {
var nodes = document.forms["getFormInfo"].querySelectorAll("input[type='text']");
var array = [].map.call(nodes, function(item) {
return {name : item.name, value : item.value};
});
console.log(array);
}
<form id="getFormInfo">
<input type="text" name="txtStudentID"/>
<input type="text" name="firstName"/>
<input type="text" name="lastName"/>
<input type="button" onclick="getID();" value="Submit"/>
</form>