Is it possible to have a text input field which displays somewhere else (e.g. in a div) what its content is on change?
Example: I type 1, so 1 is outputted somewhere on my screen immediatly, then I type 2 and the previous value is now updated to 12.
html
<input type="text" id="inputField" />
<div id="screen"></div>
script
document.getElementById('inputField').onkeyup = function(){
document.getElementById('screen').innerHTML = this.value;
};
The code is good but I want the screen's inner html value to be format in php. Example: the screen value is stored into $screen and then I'd echo the output where i want into the screen
[I want (echo "$screen";) like in php I will type the number in text box means it echo the value immediately used with php format]
how to store a screen value into variable $screen
You can do this by little javascript code, (assuming that you need to display text entered in a input field on a html div),
So try this in html,
<input type="text" id="inputField" />
<div id="screen"></div>
and bind a onkeyup event to the input field by which you can get the text when someone enters into it. So your javascript will be,
document.getElementById('inputField').onkeyup = function(){
document.getElementById('screen').innerHTML = this.value;
};
Working demo here and you can post the input field value to any php script by including a form element in your html code.
Try this,
HTML
<input type="text" id="addInput" />
<div id="showdata"></div>
SCRIPT
$('input#addInput').on('keyup',function(){
$('div#showdata').html($(this).val());
});
<html >
<head>
<script type="text/javascript">
function KeyHandler() {
var result = document.getElementById('result');
result.innerHTML=document.getElementById('txtInput').value;
}
</script>
</head>
<body >
<div>Type something.........</div><br />
<input type='text' id='txtInput'onkeyup="KeyHandler()" />
<br/>
Result:
<div id="result"></div>
</body>
</html>
Related
I have an autocalc running on a form and the total is shown through a div ID. I need to be able to somehow render the div ID answer into a php form mailer.
I’ve tried adding a hidden input field with the div ID.
<div id="totalPriceTM">
<input name="Score" id="totalPriceTM" value="" type="hidden" />
</div>
No error messages but result not showing in email.
You should create different div name on your form.
for example :
<script>
function autocalc(x,y)
{
a = x*y;
document.getElementById(totalPriceTM).innerHTML = a;
document.getElementById(totalPriceTM2).value = a;
}
</script>
<div id="totalPriceTM">
<input name="Score" id="totalPriceTM2" value="" type="hidden" />
</div>
result will be show on div totalPriceTM and will be set the value of div totalPriceTM2
I am having some problem to retrieve input values from dynamically added jquery table row ...
these are my code .. expecting a good solution .. thanks in advance :)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//This line clones the row inside the '.row' class and transforms it to plain html.
var clonedRow = $('.row').clone().html();
//This line wraps the clonedRow and wraps it <tr> tags since cloning ignores those tags
var appendRow = '<tr class = "row">' + clonedRow + '</tr>';
$('#btnAddMore').click(function(){
//this line get's the last row and appends the appendRow when it finds the correct row.
$('.employmentHistoryForm tr:last').after(appendRow);
});
//when you click on the button called "delete", the function inside will be triggered.
$('.deleteThisRow').live('click',function(){
var rowLength = $('.row').length;
//this line makes sure that we don't ever run out of rows.
if(rowLength > 1){
deleteRow(this);
}else{
$('.employmentHistoryForm tr:last').after(appendRow);
deleteRow(this);
}
});
function deleteRow(currentNode){
$(currentNode).parent().parent().remove();
}
});
</script>
</head>
// finaly i need pass the values from text feild ...
<body>
<form name="add_row" method="post" action="process.php">
<div class="employmentHistory">
<table class="employmentHistoryForm">
<tr class = "row">
<td> <label for="company">Name</label></br>
<input type="text" name="name" />
<g:textField name="company" class="company">
</g:textField></td>
<td><label for="position"> Position </label></br>
<input type="text" name="name" />
<g:textField name="position" ></g:textField></td>
<td></br><input type="button" class="deleteThisRow" value="Delete"/></td>
</tr>
</table>
</div>
<input type="button" id="btnAddMore" value="add more"/>
</body>
change the text field names to name1,name2,name3....namen
on the php side get the length of array like.
$numoftxtfield = count($_POST);
this gives the length of text field then using for loop or foreach loop get the all values of the text fields.
IF you do not want to change name of text field then you can use name as an array like..
name = "name[]"
after submit form you can retrive it by implode/explode.
Script
<script type="text/javascript">
function KeyHandler() {
var result = document.getElementById('result');
result.innerHTML=document.getElementById('txtInput').value;
}
</script>
HTML
<input type="text" id="inputField" />
<div id="screen"></div>
This code work good in html but i want
<a href="#?call=limit.lim&height=400&width=400&id={$ID}&team=
{$Name}&val={'**********'}&name={$Name2}&catname={$Cat}"
class="inlinePopup" title="{'Namer'}">{$Single}</a>
val={'****'} What ever i type in the text box that's i want here in the star position how
val={'<div id="screen"></div>'} this not work
Example : type a value 123 in the text box means that's instant like
val = 123
You could change the href attribute of the link in your KeyHandler function.
For example:
function keyHandler(){
var inputText = document.getElementById('inputField').value;
document.getElementById('myLink').href = '#?yourParam=something&val='+encodeURIComponent(inputText);
}
Would work with the HTML:
<input type="text" id="inputField" onkeydown="keyHandler()" />
Link Text
Could you adapt this technique to suit your needs? Alternatively, could you provide more details about your problem? Example code, motivation, context etc?
Is it possible?
I want a user to post an array full of 1-5 pieces of data.
At first there would be only one text field on show, but on clicking a 'plus' icon next to it, it would create another text field below it for more user input.
I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.
My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.
<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">
jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)
<ul>
<li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
$('#addTextbox').click(function(){
var li = $('ul li:first').clone().appendTo($('ul'));
// empty the value if something is already filled in the cloned copy
li.children('input').val('');
li.append($('<button />').click(function(){
li.remove();
// don't need to check how many there are, since it will be less than 5.
$('#addTextbox').attr('disabled',false);
}).text('Remove'));
// disable button if its the 5th that was added
if ($('ul').children().length==5){
$(this).attr('disabled',true);
}
});
});
</script>
For the server-side part, you could then do a foreach() loop through the $_POST['textbox']
As long as you give each text box a name like "my_input[]", then when the form is submitted, PHP can get the answer(s) as an array.
$_REQUEST['my_input']; would be an array of the values stored in each text box.
Source: Add and Remove items with jQuery
Add
Remove
<p><input type="text" value="1" /></p>
<script type="text/javascript">
$(function() { // when document has loaded
var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
$('a#add').click(function() { // when you click the add link
$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
i++; //after the click i will be i = 3 if you click again i will be i = 4
});
$('a#remove').click(function() { // similar to the previous, when you click remove link
if(i > 1) { // if you have at least 1 input on the form
$('input:last').remove(); //remove the last input
i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
}
});
$('a.reset').click(function() {
while(i > 2) { // while you have more than 1 input on the page
$('input:last').remove(); // remove inputs
i--;
}
});
});
</script>
You will need to create DOM elements dynamically. See how it is done for example in this question. Notice that
document.createElement
is faster then using jquery's syntax like
$('<div></div>')
Using that technick, you could create inputs like
<input name="id1"/>
<input name="id2"/>
<input name="id3"/>
<input name="id4"/>
<input name="id5"/>
On submitting your form you'll get all them in your query string like
...id1=someval1&id2=someval2&...
Having that, you could process this query as you want on server side.
<form method="POST" id="myform">
<input />
Add textbox
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#add_textbox').click(function(){
var form=$(this).closest('form');
var count=form.find('input').length();
form.append('<div class="removable_textbox"><input />delete</div>');
$('.delete_input').click(function(){
$(this).find('.removable_textbox').remove();
return false;
});
return false;
});
$('#myform').submit(function(){
var i=1;
$(this).find('input').each(function(){
$(this).attr('name','input-'+i);
i++;
})
});
});
</script>
<?php
if(isset($_POST['input-1'])){
$input_array=$_POST;
}
?>
something like this?
I wrote a litte jQuery plugin called textbox. You can find it here: http://jsfiddle.net/mkuklis/pQyYy/2/
You can initialize it on the form element like this:
$('#form').textbox({
maxNum: 5,
values: ["test1"],
name: "textbox",
onSubmit: function(data) {
// do something with form data
}
});
the settings are optional and they indicate:
maxNum - the max number of elements rendered on the screen
values - an array of initial values (you can use this to pass initial values which for example could come from server)
name - the name of the input text field
onSubmit - onSubmit callback executed when save button is clicked. The passed data parameter holds serialized form data.
The plugin is not perfect but it could be a good start.
What is the best way to gray out text inputs on an HTML form? I need the inputs to be grayed out when a user checks a check box. Do I have to use JavaScript for this (not very familiar with JavaScript) or can I use PHP (which I am more familiar with)?
EDIT:
After some reading I have got a little bit of code, but it is giving me problems. For some reason I cannot get my script to work based on the state of the form input (enabled or disabled) or the state of my checkbox (checked or unchecked), but my script works fine when I base it on the values of the form inputs. I have written my code exactly like several examples online (mainly this one) but to no avail. None of the stuff that is commented out will work. What am I doing wrong here?
<label>Mailing address same as residental address</label>
<input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
<script type="text/javascript">
function disable_enable(){
if (document.form.mail_street_address.value==1)
document.form.mail_street_address.value=0;
//document.form.mail_street_address.disabled=true;
//document.form.mail_city.disabled=true;
//document.form.mail_state.disabled=true;
//document.form.mail_zip.disabled=true;
else
document.form.mail_street_address.value=1;
//document.form.mail_street.disabled=false;
//document.form.mail_city.disabled=false;
//document.form.mail_state.disabled=false;
//document.form.mail_zip.disabled=false;
}
</script>
EDIT:
Here is some updated code based upon what #Chief17 suggested. Best I can tell none of this is working. I am using value as a test because it works for some reason
<label>Mailing address same as residental address</label>
<input name="checkbox" onclick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
<script type="text/javascript">
function disable_enable(){
if (document.getElementById("mail_street_address").getAttribute("disabled")=="disabled")
document.form.mail_street_address.value=0;
//document.getElementById("mail_street_address").removeAttribute("disabled");
//document.getElementById("mail_city").removeAttribute("disabled");
//document.getElementById("mail_state").removeAttribute("disabled");
//document.getElementById("mail_zip").removeAttribute("disabled");
else
document.form.mail_street_address.value=1;
//document.getElementById("mail_street_address").setAttribute("disabled","disabled");
//document.getElementById("mail_city").setAttribute("disabled","disabled");
//document.getElementById("mail_state").setAttribute("disabled","disabled");
//document.getElementById("mail_zip").setAttribute("disabled","disabled");
}
</script>
Unfortunately, since you're doing it in response to user input without a form being sent back to the server, you have to do it through JavaScript.
input elements in JavaScript have both readonly and disabled attributes. If you want them completely disabled, you need to use JavaScript (or a library like jQuery) to change the disabled attribute's value to "disabled".
Note that the disabled inputs will not have their values sent to the server when the form is submitted.
Deleted my other post entirely and replaced with all the code you should need:
<script type="text/javascript">
function disable_enable()
{
if(document.getElementById("checkbox").checked != 1)
{
document.getElementById("input1").removeAttribute("disabled");
document.getElementById("input2").removeAttribute("disabled");
document.getElementById("input3").removeAttribute("disabled");
document.getElementById("input4").removeAttribute("disabled");
}
else
{
document.getElementById("input1").setAttribute("disabled","disabled");
document.getElementById("input2").setAttribute("disabled","disabled");
document.getElementById("input3").setAttribute("disabled","disabled");
document.getElementById("input4").setAttribute("disabled","disabled");
}
}
</script>
and
<label>Mailing address same as residental address</label>
<input id="checkbox" onClick="disable_enable()" type="checkbox" style="width:15px"/><br/><br/>
<input type="text" id="input1" />
<input type="text" id="input2" />
<input type="text" id="input3" />
<input type="text" id="input4" />
Basically, loop through inputs, check if they're checkboxes, add event handlers...
Working sample in plain old javascript:
http://www.theredhead.nl/~kris/stackoverflow/enable-or-disable-input-based-on-checkbox.html
the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Enable/disable input based on checkbox</title>
<script type="text/javascript">
// setup a bit of code to run after the document has loaded. (note that its set on window)
window.addEventListener('load', function(){
potential_checkboxes = document.getElementsByTagName('input');
for(i = 0; i < potential_checkboxes.length; i ++) {
element = potential_checkboxes[i];
// see if we have a checkbox
if (element.getAttribute('type') == 'checkbox') {
// initial setup
textbox = document.getElementById(element.getAttribute('rel'));
textbox.disabled = ! element.checked;
// add event handler to checkbox
element.addEventListener('change', function() {
// inside here, this refers to the checkbox that just got changed
textbox = document.getElementById(this.getAttribute('rel'));
// set disabled property of textbox to not checked property of this checkbox
textbox.disabled = ! this.checked;
}, false);
}
}
}, false);
</script>
</head>
<body>
<h1>Enable/disable input based on checkbox.</h1>
<form>
<label for="textbox_1">
Textbox 1:
<input id="textbox_1" type="text" value="some value" />
</label>
<br />
<input id=="checkbox_1" type="checkbox" rel="textbox_1" />
<label for="checkbox_1">Enable textbox 1?</label>
<hr />
<form>
</body>
</html>
The easiest way is to use JavaScript to enable or disable the form elements when the checkbox's checked status is changed.
That said, you will still need to filter for that checkbox when handling the post on the server, as some browsers will have JS turned off and thus the change will not happen