I am trying to pass the input i have from an input to an span field. I use an api dropdown list with results. So if people click on an search result it get autofilled in (much like google). I want to pass this result to an span field I have in my page.
However I dont want an onclick event if people click on an result. Rather when people click out of the input field..
This is what I tried:
<div>
<input id="exercise-search" class="form-control" type="text" name="data">
</div>
<span id="namespan">Name</span>
And the simple script:
<script>
var name = document.getElementById("exercise-search").value;
document.getElementById("namespan").textContent=name;
function reload(){
var container = document.getElementById("namespan");
var content = container.innerHTML;
container.innerHTML= content;
}
</script>
However I still have to manually refresh the page to see the result. How can i automate this?
Add a listener for the change event to the input field. This will be executed when the user edits the field and clicks out of it.
document.getElementById("exercise-search").addEventListener("change", function() {
var name = this.value;
document.getElementById("namespan").textContent=name;
});
Related
I have a text box on a website that displays a phone number. I'd like to have a link next to the text box (or underneath, doesn't matter) that says "Click to call". I want that link to call whatever phone number is displayed in the text box, but I can't figure out how to actually get that number into the tel: element. Can I just take the name of the text box and put that as the "tel:"?
Here's the text box:
<input name="txtPhone" type="text" id="txtPhone" onkeydown="javascript:ShowSave();" onchange="javascript:ShowSave();" style="width:120px;">
Can I just do something like this:
<a href="tel:[txtPhone]" >Click to call</a>
Or is that not possible or would I have to change the input type to "tel:"?
I apologize ahead of time as my knowledge of html is extremely limited.
In the solution below, the value of the phoneValue variable is updated as long as there is a data input to the <input> element. When the <a> element's click event fires, the <a> element's href attribute is assigned the phone number entered in the <input> element. Fill in the isValid() method to verify the phone number.
let inputElement = document.getElementById('txtPhone');
let phoneLinkElement = document.getElementById('tel');
let phoneValue;
/* User input can be validated within this method. */
function isValid(){
return true;
}
/* This method fires when data is input to the <input> element. */
inputElement.addEventListener('input', function() {
phoneValue = this.value;
console.log(`Current User Input: ${phoneValue}`);
});
/* This event fires when the <a> element is clicked. */
phoneLinkElement.addEventListener('click', function() {
if(isValid()){
phoneLinkElement.href = `tel: ${phoneValue}`;
}
});
#txtPhone {
width: 120px;
}
<input name="txtPhone" type="text" id="txtPhone">
<a id="tel" href="">Tel</a>
You can have a JS function that runs when the user clicks the Click to call link which will get the number input and set it as href. The bellow can be expanded to include validation and so forth.
<input type="text" placeholder="Telephone" id="telInput">
Click to call
<script>
function changeHref(){
// Selecting the input element and get its value
let inputVal = document.getElementById("telInput").value;
// Set it for the href
document.getElementById("tel").setAttribute("href", `tel:${inputVal}`);
// Test
console.log(inputVal);
}
</script>
I have an HTML input box and want to use jQuery to get the value of user input as it is entered, however the DOM seems to be activated upon page load and it never takes the value of the input box as the user types it in. I'm new to this and can't figure out what I'm doing incorrectly, any ideas would be appreciated!
<input id="textFilter" type="text">
function addEventHandlerForSearch() { //Javascript Handler
$('#textFilter').val();
$('#searchText').text($('#textFilter').val());
let searchVal = $('#searchText').text();
$(document).ready(function() { // DOM
$('#textFilter').keypress(addEventHandlerForSearch());
loadSavedRunkeeperTweets().then(parseTweets);
});
Simple vanilla implementation to get the value of the text box as it is typed would be:
const input = document.getElementById('textFilter');
input.onkeyup = () => {
console.log(input.value)
}
Then you could do whatever you need to with that data. If jquery is a requirement, I apologize for not including that in my answer. Not my area of expertise lol.
How can I automatically fill a textarea field with the text from the database and automatically display the associated text when selecting an item from the dropdown menu.
Textarea field were I want to post the data in:
<textarea
class="dropDown" Name="dropdownItem" Type="Text" id="dropdownItem" placeholder="New Option"
></textarea>
Thats only a quick try that prints out the same input as the dropdownItem from my database.
<script>
var select = document.getElementById('select');
var input = document.getElementById('TextAreaTemplate');
select.onchange = function(){
input.value = select.value;
}
</script>
I already connect to the database, but I just don't know how to do this.
Do I need more JavaScript?
What you are doing here is only putting the value from your input to your textarea.
You need to make a query to your database with the value you get from your input.
I guess your connection is made via PHP (since you put the PHP tag), so I would recommend you to use AJAX request to create your query with the value from your input.
Then, your response should contain the associated text to display in the textarea.
I found this resource which show the basis of AJAX and PHP if you need, but you probably can find better.
A table column displays student id numbers as follows:- (PHP code)
echo "<td><b><a href = '#'><h1>".$res['studid']."</h1></a></b></td>";
Below the table there is an input box to enter student id
I want to add the value of $res variable into the input box when the user clicks the above link.
That value will be later used to search the result of that particular student
How to achieve this with Javascript?
var studentLinks=document.querySelectorAll('td>b>a>h1');
for(var i=0;i<studentLinks.length;i++){
studentLinks[i].parentNode.addEventListener('click',function(){
document.getElementById('yourInputField').value=this.children[0].innerHTML;
});
}
Non-jQuery way of applying this functionality to all elements.
By the way, the a element is then non-essential, so it could as well be removed and td>b>h1 be written as the selector instead.
Anyways, the above JavaScript is applied to all links. You can also put an e inside the brackets after function and at the top of the function block add e.preventDefault(); to make absolutely sure that the page doesn’t redirect anywhere.
var link = document.getElementById('studentId');
var input = document.getElementById('search');
link.addEventListener('click', function() {
input.value = this.innerText;
});
<td><b><h1>Some text</h1></b>
</td>
<input type="text" id="search">
Well a Jquery way...
$("#table a").click(function(){
$("#input").val($(this).find('h1').text());
});
In HTML & JS, how do you make a textfield that has grayed out text telling the user what the field is for that goes away when the user clicks on the field?
For example, in firefox the search field in the top right hand side says which search engine it uses when there's nothing entered, then once you click it's an empty textfield, but if you leave it blank and remove focus from the textfield then the grayed out text is back again.
Is there a name for this behavior? Also, is it possible to do in pure css without the use of js to do the on focus / on blur events?
The effect that you are referring to is often called the placeholder effect. Within HTML5 this effect is possible within certain browsers by simply placing the new attribute 'placeholder' within your input tag. Such as...
<input type='text' placeholder='Place Holder Text'/>
<input type='text'/> <!-- Example with no title-->
<input type='text' title='Your title'/>
This can also be done in JavaScript using CSS by setting a style for an active class and toggling the active style along with the item's title tag. Such as ...
$(document).ready(function(){
// Select all input fields. (You will probably want to filter this down even further).
var inputs = $('input[type=text]');
// Set all the inputs to the title value.
inputs.each(function(){
$(this).val($(this).attr('title')).addClass('unfocused'); // Styling Class for inputs.
});
// When the user focuses on an input
inputs.focus(function(){
var input = $(this);
if(input.val() == input.attr('title')){
$(this).removeClass('unfocused').val('');
}
});
// When the user loses focus on an input
inputs.blur(function(){
var input = $(this);
if(input.val() == ''){ // User has not placed text
input.val(input.attr('title')).addClass('unfocused');
}
});
});
The tested function can be seen here: http://www.jsfiddle.net/F8ZCW/5/
This behavior is on my URL shortener site: http://relk.in
The basic idea is when the onfocus event fires, you modify the CSS of the textfield to a normal class, and then onblur, you re-apply the previous class.
And no, you cannot do this in pure CSS.
Example:
var textfield = document.getElementById('someTextField');
textfield.onfocus = function() {
this.className = this.className.replace('oldClassName', 'newClassName');
};
textfield.onblur = function() {
this.className = this.className.replace('newClassName', 'oldClassName');
}