Given this html...
<input id="txtbox-page" maxlength="4" />
how can I create a button or a link that executes a javascript function, where its parameter is the input box value?
I have to call a function, that is already in production, that has this format:
javascript:pageClient('?p=2');
where the number 2, has to be the value of the input box.
HTML
<button id="pageClientSubmitter">Click me</button>
JS
var pageClientSubmitter = document.getElementById('pageClientSubmitter');
pageClientSubmitter.onclick = function () {
var val = document.getElementById('txtbox-page').value;
pageClient('?p=' + val);
}
Demo
HTML:
<a id="mylink" href="foo.bar">Link</a>
JS:
var box = document.getElementById('txtbox-page');
document.getElementById('mylink').addEventListener('click', function(){
// Use `box` here
pageClient('?p=' + +box.value);
}, false);
The second + is optional. I used it to convert to number in order to avoid injection attacks.
You could do something along these lines:
function GetTxtBoxValue() {
var txtBoxPage = document.getElementByID("txtbox-page");
pageClient('?p='+txtBoxPage.value);
}
Then bind that function to your form submission.
Related
I would like to show what I write in the input, but everytime I try the alert window shows "undefined".
This is the code.
Thanks.
<body>
<input id="input"></input>
<button id="search">search</button>
<script>
document.getElementById('search').addEventListener("click", show);
var input = getElementById('input');
var search = input.value;
function show() {
alert(search);
}
</script>
</body>
First you need to use document.getElementById instead of just getElementById.
Then you need to put var search = input.value inside the show function so that it gets the current value each time you want to show it, and not just the initial one.
document.getElementById('search').addEventListener("click", show);
var input = document.getElementById('input');
function show() {
var search = input.value;
alert(search);
}
<input id="input"></input>
<button id="search">search</button>
you must bring var search into show function declaration in order to get new value of search box every time the event occurs.
function show(){
var search = input.value;
alert(search);
}
I THINK i have managed to write a script. I just can not make a textfield in HMTL to enter the missing data. It it supposed to receive the keyword from a text field on submit click and navigate to the URL.
I have tried multiple ways of forms and everything. Should have installed VB.net and this would have been done in 5 min.
function urlMaker(keyword) {
var base = "https://www.example.com/list.php?q=";
var ending = "&dhd=1&hdd=low&dtt=list";
var url;
url = base + keyword + ending;
window.location.assign(url);
}
In short words:
I need to know how to create a HTML page with a textfield and a submit button. When I submit it takes the text from the field and run the function and feeds it with the keyword from the textfield. When function has ran it redirects browser.
I'm guessing you have a form like this.
Just attach a submit event-listener to it:
document.querySelector("#search").addEventListener("submit", urlMaker)
function urlMaker(event) {
let keyword = document.querySelector("#keyword").value;
let base = "https://www.example.com/list.php?q=";
let ending = "&dhd=1&hdd=low&dtt=list";
let url;
event.preventDefault();
url = base + keyword + ending;
window.location.href = url;
}
<form id="search">
<input type="text" id="keyword" />
<button type="submit">Search</button>
</form>
I want to get the value of a text input. I would like to do this by using id and getElementById :
here HTML code :
<form>
<fieldset>
<legend>Input ordinate :</legend>
<input type="text" id="ordinateId" name="input"/>
<input type="button" id="startbuttonId" value="Start particle"/>
</fieldset>
</form>
and Javascript :
<script type="text/javascript">
var button = document.getElementById("startbuttonId");
var value = document.getElementById("ordinateId").value;
console.log(value);
button.onclick = function() {
console.log(value);
}
</script>
but into the console, nothing appears for value. Where is the problem ?
Thanks
The problem is that you are checking for the input's value before it is set(on document load). Just move the variable declaration within the click function like so:
var button = document.getElementById("startbuttonId");
button.onclick = function() {
var value = document.getElementById("ordinateId").value;
console.log(value);
}
JSFiddle
You need to get the value again when the event fires. Just move your var value
button.onclick = function() {
var value = document.getElementById("ordinateId").value;
console.log(value);
}
With your current script you are assigning value only once, which I am assuming is an empty string. You need to put the assignment inside the function so it gets the current value of the input when it is clicked.
<script type="text/javascript">
var button = document.getElementById("startbuttonId");
button.onclick = function() {
var value = document.getElementById("ordinateId").value;
console.log(value);
}
</script>
I have a form with many buttons all of which print a value in the relevant textbox. the problem is the value is a fairly long text string and I would like to create a shorter variable eg. 'text' and make that variable equal to eg. 'some long sentence that I only want to type once'. any idea how I can edit this code to make this possible
function setInput(button, setValue) {
var buttonVal = button.value,
textbox = document.getElementById('input_' + buttonVal);
textbox.value = setValue;
<html>
<input type='submit' name='submit_a' value="a"
onclick="setInput(this,'make_me_a_variable'); return false;">
</html>
var textLookup = {
btnName1: "Long text",
btnName2: "Longer text"
};
// inside your function
var buttonText = ...,
inputText = textLookup[buttonText];
// do stuff with inputText;
Instead of defining the event handler in the HTML code, you could also create the event handler with javascript. You need to do that in another event handler for document.onload. When you do it earlier, the input HTML element might not have been parsed and created yet, so no event handler for it can be added.
<script>
// store your text in a variable
var inputText = 'make_me_a_variable';
// define some code which is executed when the page is loaded:
document.addEventListener("load",function(event){
// get the input by the id property I added to the HTML below.
var input = document.getElementById('submit_a');
// add an event handler for the click event (replaces the onclick HTML property)
input.addEventListener("click",function(event) {
setInput(this, inputText);
return false;
});
});
</script>
[...]
<input id="submit_a" type='submit' name='submit_a' value="a" >
You can create a variable and assign your long text to the variable and use it where ever you want.
Modified code
var longText = 'long text here'.
function setInput(button) {
var buttonVal = button.value,
textbox = document.getElementById('input_' + buttonVal);
textbox.value = longText ;
}
Html:
<input type='submit' name='submit_a' value="a"
onclick="setInput(this); return false;">
I will be accepting a value dynamically from the user using a prompt on click of a button in one function. I need to return the input accepted from the user in the prompt and use that input in another function.
How can I return the value of one function in an onclick and pass that returned value to other function?
Please help me.
From your description, it sounds like you need to configure your functions to allow you to pass arguments. For example:
http://jsfiddle.net/guRQq/
<input id="button" type="button" value="The value from the button"/>
<input id="text" type="text" />
$(document).ready(function(){
$('#button').click(function(){
myOtherFunction($(this).val());
});
});
function myOtherFunction(passedValue) {
$('#text').val(passedValue);
}
This is using jQuery, a javascript library. It works well with events.
This could be done in a number of ways.
Example 1 { // passing around values using arguments/params
<script>
function showme(answer) {
alert("You said your name is " + answer + "!");
doSomething(answer);
}
function doSomething(name) {
alert("Second function called with the name \"" + name + "\".");
}
</script>
<button onclick="showme(prompt('What\'s your name?'));">Click here</button>
}
Example 2 { // Using global variables
<script>
var name = "";
function setName(answer) {
// Set the global variable "name" to the answer given in the prompt
name = answer;
// Call the second function, without having to pass any params
showName();
}
function showName() {
alert("You said your name was " + name ".");
}
</script>
<button onclick="setName(prompt('What\'s your name?'));">Click here</button>
}
Example 3 { // Simple method
<script>
var name = "";
function setName(answer) {
// Set the global variable "name" to the answer given in the prompt
name = prompt('What\'s your name?');
// Call the second function, without having to pass any params
showName();
}
function showName() {
alert("You said your name was " + name ".");
}
</script>
<button onclick="setName();">Click here</button>
}