Edit placeholder html after entering username - javascript

To save space (and keep things more compact) I added a input box with a placeholder stating
<input id="username-search" placeholder="view another users work">
after adding the username, I'd like to change the text of the placeholder to something like
<input id="username-search" placeholder="viewing -theuser-'s work">
as well as remove the text added to the input box by the user, as when text is entered, the placeholder disappears.
Any ideas?

You can change the placeholder attribute dinamically as you need in an onchange event handler for the <input type="text"> :
<input id="username-search" placeholder="view another users work"
onchange="changePlaceholder(this)">
<script>
function changePlaceholder(input){
if (input.value == '') {
input.placeholder = "view another users work";
}
else {
input.placeholder="viewing " + input.value + "'s work";
input.value="";
}
}
</script>
JSFiddle.
Take into account that the <input>'s value will be cleared after onchange(), so you might want to keep an <input type='hidden'> with the last inputted value if there's something you wish to do with it outside onchange.

Pretty simple really. Try this:
var input = document.getElementById('username-search');
input.onclick = function() {
input.setAttribute('placeholder', "viewing " + input.value + "'s work");
input.value = '';
}
Type something in the box, and then click on the box. The value will be removed, but the placeholder will update with "viewing Adam's work".

Related

How to set the name attribute of a toggled input field on change event

I am trying to change the attribute name="" value of an input field that is toggled once a check box is set and a toggled input is shown and filled out.
User checks a check box, once the check box is checked an input field shows where the title once was. I got this part covered.
Once the input field shows, I want to change the name attribute in that input field with the value the user inputs all before submission of form.
Here is the code I have tried...
document.getElementById('custom-check-box').addEventListener('click', function() {
if (this.checked) {
document.getElementById('custom-span').innerHTML = '<input type="text" id="customInputName" name="customInputName" placeholder="Name the custom attribute">';
} else {
document.getElementById('custom-span').innerHTML = 'Custom: ';
}
});
// this bit of code is not working as intended. I want to get the input
// value after the user changes or focus out of the input and then have that
// value input into the name attribute for the same input.
document.getElementById('customInputName').addEventListener('change', function() {
if (this.onChange) {
let value = document.getElementById('customInputName').value;
this.setAttribute("name", value);
}
});
<div title="'.$title.'" class="input-info">
<span id="custom-span">Custom:</span> Yes: <input id="custom-check-box" type="checkbox" class="input-check" name="custom" value="yes">
</div>
Error: Cannot read property 'addEventListener' of null
I think it is because the input is not set yet in the DOM. Should I set the input in HTML, hide it and then change the name attribute and then show it?
Any help would be greatly appreciated as I am a bit of a beginner with JavaScript.
Thank you in advance!
SEE ACCEPTED ANSWER FOR UPDATE ON WORKING CODE. -> Second snippit was added an edit to #CertainPerformance code that works better for my use.
I'd create the <input> outside of any of the handlers, and give it the listener which assigns its value to its name. When the checkbox is checked, append the input to the container, otherwise clear the container:
const input = document.createElement('input');
input.name = 'customInputName';
input.placeholder = 'Name the custom attribute';
const customSpan = document.getElementById('custom-span');
document.getElementById('custom-check-box').addEventListener('click', function() {
if (this.checked) {
customSpan.textContent = '';
customSpan.appendChild(input);
} else {
customSpan.textContent = 'Custom: ';
}
});
input.addEventListener('change', function() {
input.name = input.value;
});
<div title="'.$title.'" class="input-info">
<span id="custom-span">Custom:</span> Yes: <input id="custom-check-box" type="checkbox" class="input-check" name="custom" value="yes">
</div>

How to set text box to appear blank after .click function

So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"
After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
//console.log('here');
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
}
});
}); });
username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.
thanks guys hope someone can help :)
is there any way to get user name 2 to display in stars ****** when
the user enters the password
You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.
<input type="password" id="txtPassword" />
text box to appear blank after .click function
You can set the .val() property of the jQuery objects of two those two textboxes.
$('#userName, #username2').val('');
Use <input type="password"> to show typing as stars.
Clear inputs by setting their value to be empty: $('#userName').val('');
And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
Another Method:
You can also add the script directly inside the button without using/creating a function.
<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>

how to set This in element input without tagging ID's

5 input type, without tagging ID's; if I click the input prompt command will appear and say enter your name?; after entering the name how can I codes the jquery of "This.value = person"...
<div class="lines">
<input type="text"><span>7-5</span></input>
<input type="text"><span>7-6</span></input>
<input type="text"><span>7-7</span></input>
<input type="text"><span>7-8</span></input>
<input type="text"><span>7-9</span></input>
</div>
then my Jquery are
$(document).ready(function(e){
var elementThis = $("input").click(function(){
var person = prompt("Please enter your name:");
if (person != null) {
this['input'] = person;
}
$(this).css("background-color","green");
});
});
please help. They didn't input the person = prompt on the clickable inputs.
Well a slight modification here
DEMO
$(document).ready(function(e){
$("input").click(function(){
var that=$(this);//create a reference
var person = prompt("Please enter your name:");
if (person) { //as per #Roko C.Buljan's suggestion
that.val(person); //assign its val
//or even $(this) is fine
that.css("background-color","green");//as per #Roko C.Buljan's suggestion
//You can move it here in case cancel is clicked
}
});
});
Cancel validation demo
and yea no </input> as #Roko C.Buljan said. <input> cannot have closing tag.
just use the .val() function to set the current element value property
$(this).val(person);
and remove </input> its not needed

Getting text from input to replace label text in another form

reposting for simplicity. i want to have the text users enter into an input to replace the label text of another form's input. Additionally, the form is a plugin which doesn't let me attach an id to the specific label tag of the text i want to change. how can i do this, in vanilla javascript please.
the input users put text into:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
the form label i want to change the text in (p.s: cant use the class(not unique to this label), cant add id):
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>
Maybe it is not the best solution, but it is a solution that works in Firefox and Chrome (not tested under IE)
findLabelToChange = function() {
var div = document.getElementById("frm_field_53_container");
return div.querySelector("label");
};
customizeText = function(text) {
return text + ' <span class="frm_required"></span>';
};
change1 = function() {
var label = findLabelToChange();
var text = document.getElementById("name1").value;
label.innerHTML = customizeText(text);
};
you can see a example in this feedle
http://jsfiddle.net/HAK5X/1/
Here is a fiddle.
It is one line of code.
http://jsfiddle.net/te3jv/6/
function change1(myInput){
document.getElementById('frm_field_53_container').querySelector("label").innerHTML =myInput.value;
}
Alternatively add <span class="frm_required"></span> to the end of HTML reassignment to keep your empty (but required?) span.

How not to grab default value of inputbox

I am grabbing the value of input box and passing to the URL as querystring. I dont want to grab the default value "Enter Keywords(address....) which is controlled to show or hide by the following:
//**onClick and OnLostFocus (focus and blur) events on textareas and input textboxes**
$('input[type="text"], textarea').focus(function () {
defaultText = $(this).val();
$(this).val('');
});
$('input[type="text"], textarea').blur(function () {
if ($(this).val() == "") {
$(this).val(defaultText);
}
});
<input name="KeywordBox" class="BasicSearchInputBox" type="text" size="300" value="Enter Keywords (address,city and state OR zipcode)"/>
How not to grab the default text but just user input?? in jquery?
I usually add some default class name to the input field, then clear it when the user types. That way I can tell if the default "watermark" text is there, or user data.
The proper way to do this would be to use placeholder and fallback for older browsers.
For your current problem you can just check for that default text when you grab the value. Something like:
$('form').submit(function(){
if (~$('input').val().indexOf(defaultText)) {
// Not found, do your ajax stuff
}
});
The code you have above doesn't really do default values (placeholder). If someone first types 'anything' into the field, then clears the value from the field, your code will reset it to 'anything' instead of 'Enter Keywords...'
You need a plugin like http://archive.plugins.jquery.com/project/defaultvalue
<input placeholder="Enter a username…" type="text">
<input placeholder="…and a password" type="password">
<script>
$(' [placeholder] ').defaultValue();
</script>
If you really want to write it on your own, the simplest steps are
Add a placeholder property in the input field
onfocus: clear input.value if input.value equals input.placeholder
onblur: set input.value to input.placeholder if input.value is empty
You can do it with something like:
function togglePrompt() {
if (this.value == this.defaultValue) {
this.value = '';
} else if (this.value == '') {
this.value = this.defaultValue;
}
}
window.onload = function() {
var el = document.getElementById('inp0');
el.onfocus = togglePrompt;
el.onblur = togglePrompt;
}
<input value="Enter text..." id="inp0">

Categories