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>
Related
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>
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
Thanks for those who helped! I have figured it out!
How can I create a input field like the one in the image? And I want to embed it inside $_POST. Thanks for your time :)
This is an HTML5 input of type number. You use it this way:
<form method="POST" action="yourPHPfile.php">
<input type="number" name="number_input">
<input type="submit">
</form>
When this form is submitted, it will send the selected number to yourPHPfile.php and you can retrieve the number from $_POST['number_input']
You can use input for the number selecotr and post using a form like so:
<form method="post">
<input type="number" name="intNumber"/>
<input type="submit" />
</form>
Then in PHP you can do this
<?PHP
if(isset($_POST['intNumber'])){
$myNumber = $_POST['intNumber']; // intNumber is the name of of your input
}
?>
When the submit button the PHP will be fired.
Hope this helps!
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 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 8 years ago.
Improve this question
My php page consist of a number of textfileds and textareas in which the user can input their details there. these textareas and textfileds are inside a <form></form>.so when clicking on submit button all those values are posted (form method=POST ).
there are 2 <textarea> named as Permanent Address and Communication address. and also a check box "Communi. address is same as permanent". the check box code is follows
<input type="checkbox" id="checkadd" onclick="if (this.checked) copyAddress (this.form)"/>
this function calls copyaddress function that copy the Permanent address to Communication address <textarea>. " copyAddress (this.form) " will copy the value of 1st <textarea>(permanent address). so i don't get the value of Permanent address in the page in which i have to POST this value too to the Next Page.
Can you try this..
<?php
if($_POST['permaddress'])
{
echo $_POST['permaddress'];
echo $_POST['commaddress'];
}
?>
<script>
function copyAddress()
{
if(document.getElementById('checkadd').checked == true)
{
document.getElementById('commaddress').value = document.getElementById('permaddress').value;
}
}
</script>
<form method="post" action="test.php" >
<textarea rows="30"cols="30" name="permaddress" id="permaddress"></textarea>
<textarea rows="30"cols="30" name="commaddress" id="commaddress"></textarea>
<input type="checkbox" id="checkadd" onclick="copyAddress()"/>
<input type="submit" value="submit">
</form>
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 8 years ago.
Improve this question
I want to pass textbox value directly through query string the first variable is passed but the second value will be textbox value on the same page. Please help. Thanks
<input type="text" name="txtswap" id="txtswap" size="5" />
Swap
This can't be done with PHP alone, you need some JavaScript for it:
<input type="text" name="txtswap" id="txtswap" size="5" />
Swap
JavaScript:
function doSwap(self, event)
{
var swapValue = document.getElementById('txtswap').value;
event.preventDefault();
location.href = self.href + '&value=' + encodeURIComponent(swapValue);
}
<input type="text" name="txtswap" id="txtswap" size="5" />
<a onclick="swap()" >Swap</a>
<script>
function swap() {
var swapvalue = $('#txtswap').val();
window.location.href = 'UserForm.php?operation=swap&id='+swapvalue ;
}
</script>
Try this
Not tested...
Try this .
Swap
Write JavaScript function
function redirect(){
txtswap = document.getElementById("txtswap").value;
window.location.href = "UserForm.php?operation=swap&id="+txtswap;
}
Since the text box in the same page, you can't use PHP for this. PHP won't see the data (because it won't exist at the time the PHP runs).
Stop using a link and use a form instead, converting user input into a URLs is what they are for.
<form action="UserForm.php">
<input type="hidden" name="operation" value="swap">
<input type="hidden" name="id" value="<?php echo htmlspecialchars($row['id']; ?>">
<input name="txtswap" id="txtswap" size="5">
<input type="submit" value="Swap">
</form>