<input type="text" name="BoqTextBox" />
<input type="AddValueButton" value="+" onclick="Add(BoqTextBox)" />
<input type="MinusValueButton" value="-" onclick="Minus(BoqTextBox)"/>
</div>
<script>
function Add(data) {
var i = 1;
}
</script>
User enters data into 'BoqTextBox' and clicks + button.
All Data in the text box is passed to the 'data' paramter in function Add(data)
How do I do this?
Thanks
First you should add an ID attibute to input[name=BoqTextBox] element because search an alement by name is more dificult. (see http://www.mkyong.com/javascript/how-to-get-element-by-name-in-html-getelementsbyname/)
<input type="text" name="BoqTextBox" id="BoqTextBox" />
Then change the onclick ovent to looks like this:
<input type="AddValueButton" value="+" onclick="Add(document.getElementById('BoqTextBox').value)" />
<input type="MinusValueButton" value="-" onclick="Minus(document.getElementById('BoqTextBox').value)"/>
I hope this works.
Related
So, here's the form
<form action="/missions/basic/3/index.php" method="post">
<input type="hidden" name="file" value="password.php" />
<input type="password" name="password" /><br /><br />
<input type="submit" value="submit" />
<input type=button value="Get Value" onclick="printIt()" /></form>
I have these methods here to try to get the value to appear.
function printIt(){
for (i = 0; i < document.getElementsByName('password').length; i++) {
var x = window.alert(document.getElementsByName('password')[i].value());
window.alert(x);
}
}
I want to know what I can change in those last two methods to get the value to appear.
The function document.getElementsByTagName() returns an array, not one element, so changing your code to window.alert(document.getElementsByName('password')[0].value); should get the first item's value. The first item will most likely be the element in your form you're looking for.
The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});
how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks
The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});
If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/
I have a form with an input textbox and a button. When I click on a button I want to go to a different page depending on the value of the input textbox. For example:
<form name="frm1" id="frm1" action="page.php">
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="button" Onclick="redirect_to('page2.php/?id=8&input=this.txt_name.value')" value="Save" />
</form>
How can I get this value? Can this be done without using a function?
Well I would recommend a function for following reasons:
Cleaner code.
Better way if you have multiple buttons.
Less code.
Better manageability.
Add this to your buttons
onclick="redirect('mytextbox.value');";
Add this to your markup inside <head>(just few lines of code):
<script type="text/javascript">
function redirect(value){
window.location="page.php/?id=8&input="+value.ToString();
}
</script>
Why wouldn't you just do this?
<form name="frm1" id="frm1" action="page2.php">
<input type="hidden" value="8" name="id" />
<input type="text" name="txt_name" id="txt_name" value="simple text" />
<input type="submit" value="Save" />
</form>
if you have something like :
<form>
<input type="text" name="formelem" />
<input type="button" />
</form>
you can put to the button :
onclick="redirect_to('page.php/?id=8&input='+this.form.formelem.value)"
you are on the button, so "this" will be the button and you need to get the form from which you can get the input
another way ( if you don't need a form for another purpose ) would be to just put :
<input type="text" id="formelem" />
<input type="button" onclick="redirect_to('page.php/?id=8&input='+document.getElementById('formelem').value)" />
onclick="window.location.href = 'page.php/?id=8&input=' +this.value.toString()"