Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 12 months ago.
Improve this question
I have an html page that requires getting the value of an input when a button is pressed so it can be used as a variable in a link. For example, my website would detect "word" being written in the input and would redirect to the link "google.com/word" when the button is clicked. Thanks for any help in advance!
HTML Code:
<td><input value="Input text Here..."></input></td>
<td>Click this Button</button></td>
There is not way to get input value only using HTML... give your button an onclick attribute:
<td>
<a href='https://example.com/test/VALUEFROMINPUTHERE'>
<button id="click" onclick="click()">Click this Button</button>
</a>
</td>
and your input an ID:
<td>
<input value="Input text Here..." id="input">
</td>
and add JS:
function click() {
let val = document.getElementById("input").value
window.location.href = "https://www.google.com/search?q=" + val
}
All I'm doing here is geting the input's value, and changing the window's href to the wanted word, also making sure the word is being searched in google by adding the "https://www.google.com/search?q=" before adding the value of the input.
In this code, when the a tag is clicked, it triggers a JS function that grabs the value of the input with the id "value" and opens thee link with by concatenating it's value to the end of the URL with the window.open() function.
<input type="text" placeholder="Enter Text" id="value" />
Click Me
<script>
function openLink() {
let value = document.getElementById("value").value
window.open(`https://www.example.com/${value}`)
}
</script>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
So, I have this html form which the user fills up with his/her info. There is the mobile number field.
I´d like to add the country code automatically, but hidden from the user (since it´s going to be just a local - geographic - marketing action, it´s a fixed code), so I can receive the mobile number with the country code added directly to the database.
All I need is that the form (or JS) adds the value "11" to the beginning of the mobile number without the user noticing it. The user writes "321-456789" and I will receive "11321456789".
How to code that?
Thanks!
You can use JS to prepend (kudos to Stephen P's amazing vocabulary) "11" to the value of the input field like so:
function append11(){
var mobilenumber = document.getElementById("phonenumber");
var front = document.getElementById("front").value;
mobilenumber.value=front+mobilenumber.value;
}
<input type="number" id="phonenumber"><input type="number" value="11" id="front" hidden><button onclick="append11()">
Append 11
</button>
In the example above, whatever you input, after clicking the 'Append 11' button, will add "11" to the front of the value. You can configure this to submit a form like so:
function append11(){
var mobilenumber = document.getElementById("phonenumber");
var front = document.getElementById("front").value;
mobilenumber.value=front+mobilenumber.value;
alert(mobilevalue.value);
}
<form action="something" method="GET">
<input name="phonenumber" type="number" id="phonenumber"><input type="number" value="11" id="front" hidden><button onclick="append11()">
Submit
</button>
</form>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
If a user of my website inputs a value into an html text box and clicks on a submit button..
how can I transfer/use their value to javascript so I make a calculation based on their input.
Also how can I display their value on the site?
Thanks!
((New to javascript and stackoverflow))
You should have something like this in your HTML
<input name="searchTxt" type="text" id="txt" class="searchField"/>
And something like this in your JavaScript
var the_value_i_am_looking_for = document.getElementById('txt').value;
Note that the txt is the id of the input tag, and we use that same id to identify the element in JavaScript.
The variable the_value_i_am_looking_for should hold the value that you will use to make your calculation.
Example:
<input id="cost" type="number" />
<input type="button" onclick="calculate()" value="Enter a value" />
<div id="valueEntered" > </div>
<div id="afterTax" > </div>
<script>
function calculate()
{
valueEntered.innerHTML = " You entered : " + cost.value;
afterTax.innerHTML = " After tax : " + cost.value * 1.3;
}
</script>
You meant something like the following? It's a input box and a button. Once the button is clicked, the user input in the input box will be displayed below the input box and the button.
<input id="foo"/>
<button onclick="document.getElementById('bar').innerHTML = document.getElementById('foo').value
" type="button">Click me</button>
<div id="bar"></div>
</code>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to pass my search term from my site into the string of another site's URL link. This will allow the search to find books on my site and if it can't be found there the user would click a button that would take the string from the search field and pass it to the URL of MnLink.org. I know my sites code is as follows.
Search For:
I can't figure out what I am missing because I am new to HTML and a novice in JavaScript. I thought I could put the value or id in as a var in a script but I could not get that to work. below is what I have started but got stuck on, any help would be great.
https://mnlink.on.worldcat.org/search?='"style="padding-left:10px;background:#ffffff; border: solid black;">Continue Search
You could simply use a form with method="get" and action="https://mnlink.on.worldcat.org/search".
EXAMPLE:
<form method="get" action="https://mnlink.on.worldcat.org/search">
<div>
<input type="text" name="queryString" value="" />
<button type="submit">
Submit
</button>
</div>
</form>
Working DEMO
EDIT
If you have to use an onClick event i suggest you to use Jquery: on click() you have to redirect your page with window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' but you must add the value at the end of that String with $("#INPUT_ID").val(). See the demo.
HTML:
<input title="Search For:" autofocus="false" accesskey="s" maxlength="256" tabindex="9" autocomplete="off" size="100" value="cats" id="q" name="q" type="text">
<button id="submit">
Search
</button>
JS:
$(document).ready(function(){
$("#submit").click(function() {
window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' + $("#q").val();
});
});
Working DEMO.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Stuck on a tough situation!
I have a form for inputting different cities where user want to go.
I have a form box and a submit button.
Now I want my user to enter as many cities he likes, in order to do so he must click on a link Add 1 more city and one more form box should appear.
How can I perform such task in HTML
This is a nice way to do it:
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
Hope it will help,
Zorken17
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
Use jquery clone function.
$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');
See this question
UPDATE
found good snippet for you. exactly what you need
put city box in a div and assign a id to that div and call a menthod of java script on the click of add 1 button then in method append other city box html in div through java script.
maybe thats a good starting point
<form id="myForm">
<div id="cities">
<input class="city" type="text" />
</div>
var $cityInputs;
function registerEvents() {
$cityInputs = $('input.city').not(':disabled');
$cityInputs.blur(function(event){
var $element = $(event.target);
if ($element.val().trim().length !== 0) {
appendNewInput.call($('#cities'));
$element.attr('disabled','disabled');
}
})
}
function appendNewInput() {
this.append('<input class="city" type="text">');
registerEvents();
}
registerEvents();
http://jsfiddle.net/9ckv5f23/3/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm just wondering if anyone can point me in the right direction on how to create a dynamic list on a webpage based on user entry without refreshing the page each time.
For instance, a user would:
type a word into a textbox
click a button
the word would show up somewhere else on the page
the word would be erased from the textbox
Any new word typed would automatically be written underneath any previously entered words.
<div id="target"><div>
<input type="text" id="newInput" />
<input type="button" id="saveInput" />
<script>
// when button is pressed:
$('#saveInput').on('click', function(){
// check if something is there
if( $('#newInput').val().length !==0){
$('#target').append('<div>'+ $('#newInput').val()+'</div>'); //append to a target
$('#newInput').val(''); // empty input
$('#newInput').focus() // for bonuspoint, place cursor back in input
}
});
</script>
If you want each new entry as first listitem, use prepend() instead of append()
Here's an working example:
Html:
<input type="text" id="txtWord"/>
<input type="button" id="btnAddWord" value="Add new word" />
<ul id="words">
</ul>
Script:
$(document).ready(function(){
$('#btnAddWord').bind('click', function(){
if( $('#txtWord').val() !== ""){
$('#words').append('<li>'+ $('#txtWord').val()+'</li>');
$('#txtWord').val('');
}
});
});
Example
http://jsfiddle.net/AfNgH/