I need a javascript variable to be whatever is entered into a textbox when a button is pressed.
Basically, if somebody enters "bubbles" into the textbox and then clicks the button that says submit, I need "var Item" to be bubbles. How to I make that function?
I want an if statement if possible, so something like
var Item = getElementById(whatever the id of the textbox content it)
function Thing() {
if {
getElementById(whatever the id of the textbox content it) = bubbles;
document.open(P2.html);
}
you can get the value like this:
<script>
function getValue(){
var value = document.getElementBydId("textbox").value;
}
</script>
<textarea id="texbox"></textarea>
<button onclick="getValue()">
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 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;
});
I have a text field that should be filled before custom saving through HTML custom button.
When a user fills this field and tries to save through custom button, the text inside this field is null even if the user fills it.
Any suggestions Please?
Many Thanks for replying to my query. Actually, I am calling the below function from custom HTML button and I saw the result from alert message as NULL value until I leave the text box. Once I click some other Field then I am getting right value and saving the record successfully. I have posted my code below please have a look and suggest me how I can achieve it. So how to get the text value if a user doesn't leave the text box and click on the Save button?
function createRecord() {
var oDescription = Xrm.Page.getAttribute("new_description").getValue();
if (oDescription != null) {
var callentity = {};
var activityId;
var currentUserId = Xrm.Page.context.getUserId();
var oLeadId = Xrm.Page.getAttribute("new_lead").getValue()[0].id;
callentity.Subject = "Call Activity";
callentity.Description = oDescription ;
XrmSvcToolkit.createRecord({....Some more functions here...
})
}
HTML Button code for calling above function
<input id="SaveCall" onclick="parent.createRecord()" type="button" value="Save Phonecall"></p>
Xrm.Page.getAttribute(arg).getValue(val) won't return a value until focus is lost from the arg attribute (as you've found out).
Some options you could try:
document.getElementById('new_description_i')[0].value
Removing focus from "new_description" on click of your button.
I need some clarification, as I have managed to confuse myself. Let's say we have the following code:
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
var words = textarea.value;
console.log(words);
}
This code runs by first gathering the DOM elements (the button and textarea) into their respective variables. Later in the code, when the button is pressed, textarea.value is placed into the variable words. Fair enough right?
My question is why isn't nothing logged into the console? The textarea variable is created and stored from the DOM after the page loads, which pressumably would be before the user had time to write anything into the textarea. This would mean that textarea.value should equal '' (nothing), as opposed to the string in the textarea at the time that the button was pressed by the user.
If anyone could clear this up for me that would be greatly appreciated.
Thanks :)
This would mean that textarea.value should equal '' (nothing), as opposed to the string in the textarea at the time that the button was pressed by the user.
Nope!
The value property of an input element updates dynamically based on user input or other code that changes it. It matters when you access the value property. Because you access it when the button is clicked, the value set on the element is read when the button is clicked.
If however you did something like this:
var textarea = document.getElementById("myTextarea");
var words = document.getElementById("myButton").value;
button.addEventListener("click", function() {
console.log(words);
}
Then the value would be read earlier (likely being blank, but could be a default value, and auto-save variable, or something else it was set to earlier), and changes by the user would be ignored.
Look at the 2 jsfiddles.
<input id = "myTextarea"/>
<button id= "myButton" type="submit"> test </button>
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
var words = textarea.value;
console.log(words);
});
In the first one, you are capturing the value of the text area inside the on click event. Thus, you get the value that has already been entered.
<input id = "myTextarea"/>
<button id= "myButton" type="submit"> test </button>
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log(words);
});
In the second fiddle, you are capturing the value as soon as the DOM is loaded without waiting for the click event to happen. Thus, the value that prints in console is blank.
Thus, whether you will see the value entered or nothing at all depends on when you capture the value, after the event happens or right after the DOM is loaded. Hope this helps.
I want to write javascript code which will recognize which button has been clicked and change its label. There are multiple buttons on the web page so there is no possibility of referring to it by its id. It is identified only by the fact that it has been clicked.
I saw one discussion on stack overflow that suggested writing
<input type = "button" value = " " id ="3" onclick="click(event)">
on the web page, and then defining click as a function with one argument, let's call it
ev. Then I referred to it (inside the function) by
var button = ev.target;
and then tried to change the value of button. It didn't work. I just want a button's label to change when I click it without referring to it by id (I can't tell what it's id is since it's just the button that was clicked amongst many).
Can anyone explain how to do this?
onclick="clickMe(this)">
This will pass a reference to the element clicked on, then you can get/set anything that you normally can from the element e.g:
function clickMe(el) {
el.value = "Hi"; // set
alert(el.value); // get
}
Demo
Note: calling a function click() is not allowed as it is a reserved keyword (just like you wouldn't have a function called function(), which is why I made it clickMe()
Pass the this keyword as a parameter, and use a data attribute to hold the new value :
html :
<input type="button" value=" " id="a3" data-value="test" onclick="func(this)">
js
function func(elem) {
elem.value = elem.getAttribute('data-value');
}
FIDDLE
this is set to the button that is clicked by the browser:
<input type=button onclick=clickhandler>
<script>
function clickhandler() {
this.value = "foo"; // button’s label is now foo
console.log(this.id); // will print the button’s id
}
</script>