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?
Related
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>
I know a bit of PHP and so also HTML/CSS, and I have made a simple quiz program allowing users to create and do quizzes that are stored in a MySQL database. Now what I am trying to do is improve the usability and efficiency of the program.
On the createQuestions form, there are eight textboxes, users can fill in between 2 or 8 of these boxes with answers. Although I think this looks messy with all eight, and what I would like is to have 2 textboxes, and when there is text in the second one, the third one appears and so on.. up to eight
I spent a few hours learning a bit of basic JS, and managed to get it, so that there was a button that changed the visibility propities of the input box, label and radio button of each row. Although I wrote it really inefficiently lots of lines of code to do not much :p - giving each object a separate ID, and it still didn't work that well.
Below is an example of how my HTML is laid out, I have eight of these, though I could replace this with one, and a PHP for loop with a limit of 8.
<div id="c">
<p class="subFont" id="cT" style="display:none;">Answer 3</p>
<input type="text" name="optionC" class="textbox" style="display:none;" id="cI">
<input type="radio" name="correctAns" value="c" id="cR" style="display:none;">
<input type ="button" name="add" value="d" style="background-color:green;" onclick="addBox('d', 'inline')" id="cB" style="display:none;">
</div>
Any suggestions on how to write the script descried above? Please could you comment or briefly explain your workings, so I can learn from it :)
Thank you loads in advance, I'm so grateful to all you guys on stackoverflow ;)
ps, any suggestions for learning js resources?
Pure Javascript
to hide/show object id="cR"
// hide
document.getElementById('cR').style.display = 'none';
// show
document.getElementById('cR').style.display = 'block';
to append textarea to
document.getElementById('c').innerHTML += '<textarea name=".." id=".."></textarea>';
events:
<input type="text" id="xxx" onchange="your action here" />
jQuery
to hide/show object id="cR"
// hide
$('#cR').hide();
$('#cR').fadeIn(); // with fade in effect
// show
$('#cR').show();
$('#cR').fadeOut(); // width fade out effect
to append textarea to
$('#c').append('<textarea name=".." id=".."></textarea>');
events:
$('#xxx').change(function() {
your action here
});
another way to add element dynamically in page..
<html>
<head>
<script>
function addElement(obj) {
text_limit = 5; // limit text then add text after that.
var text_lenght = obj.value.length;
if(text_lenght >= text_limit){
var mainElement = document.getElementById('myDiv');
var counter= mainElement.getElementsByTagName('textarea').length;
var newTextArea = document.createElement('textarea');
var textareaname = 'txt_area'+counter;
newTextArea.setAttribute('id',textareaname );
newTextArea.onkeydown= function() {
addElement(this);
}
mainElement.appendChild(newTextArea);
}
}
</script>
</head>
<body>
<div id="myDiv">
<textarea id="txt_area2" onkeyup="addElement(this);"></textarea></div>
</body>
</html>
I'm attempting to make it so that when you click a button, it'll add new fields to the page. I know that onclick can only take JS functions so I decided to try my luck making a JS script. At first I had tried to do
<html>
<head><title>multiple line test</title><head>
<body>
<script type="text/javascript">
var texters='';
var num=0;
function newInput(nomnom)
{
texters='';
num=nomnom+1;
for (var i=0; i<nomnom; i++)
{
texters+='<p>\
Please specify a file, or a set of files:<br>\
<input type="file" size="40">\
</p>\
<p>\
Caption : <br> \
<input type="text" size="30">\
</p>';\
}
document.write(texters+'<div>\
<input type="submit" value="Send">\
</div>\
</form>\
<br>' + '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>');
}
newInput(num);
</script>
</body>
</html>
but that didn't work. So I tried instead to add a little bit of php being that I know it better. I tried this :
<html>
<head><title>multiple line test</title><head>
<body>
<script type="text/javascript">
var texters='';
var num=0;
function newInput(nomnom)
{
document.write(<?php
tex='';
for (var i=0; i<=(nomnom); i++)
{
tex.='<p>
Please specify a file, or a set of files:<br>
<input type="file" size="40">
</p>
<p>
Caption : <br>
<input type="text" size="30">
</p>';
}
echo tex . '<div>
<input type="submit" value="Send">
</div>
</form>
<br>' . '<input type="button" value="new entry" onclick="newInput(num)">' . '</body></html>';
?>);
}
newInput(num);
</script>
</body>
</html>
But I know that won't work because I can't get the variable I'm using for the number of fields to use out of the JS and into the PHP. Is there any way I could force JS to put that number in $_POST so I can retrieve it without having to make another form? Or is there a better way to do what I'm trying to do?
You can set a hidden input field on the form, and have the Javascript populate that.
You should try using jquery http://jquery.com/ or a simialr scripting library as it will make manipulating the DOM much easier. Using jquery you can create an onClick function that will do what you want in a few lines of code:
var onClickAddInput = function()
{
$('div#your_div_id').append('<input type="text" size="30" />');
}
If you need to add more input boxes you could loop the append statement and give the individual input boxes ids that equal the loop number.
As commented PHP is for serverside, javascript for clientside. html is the ui elements which either can create. If you need something done on the server, do it in PHP, if it needs to be done on the client, do it in javascript. Here is a sample of javascript for you.
function newInput(nomnom)
{
var tex='';
for (var i=0; i<=(nomnom); i++)
{
tex+='<p>Please specify a file, or a set of files:';
tex+='<br/><input type="file" size="40"></p>';
tex+='<p>Caption :';
tex+='<br/><input type="text" size="30"></p>';
}
document.getElementById('form_id').innerHTML += tex;
}
when this function is called, it will create a number of new inputs and add them to the form with the id "form_id".
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.
As the title suggests, I have a span that is automatically generated by SimpleCart (Javascript Cart) - I want to use that span with a different checkout gateway then they support. Therefore, I need to take some of their tags and "echo" them into PHP variables.
For example:
<input type="hidden" name="fltAmount" value="###">
<span class="simpleCart_finalTotal">
The SPAN needs to be able to be passed into the INPUT so I can send it off to Paypoint.net
Your code should look something like this:
<input type="hidden" name="fltAmount" value="" id="fltAmount">
<span class="simpleCart_finalTotal" id="finalTotal">
And in the form, you will call a function (onsubmit) that looks like:
<form onSubmit="calledOnSubmit(event)" ... > ... </form>
An the function:
function calledOnSubmit(event) {
var inputAmount = document.getElementById('fltAmount');
var spanTag = document.getElementById('finalTotal');
inputAmount.value = spanTag.innerHTML
}