My problem maybe is basic, i just lack the skills.
How can i turn the following code into javascript? :
<?php
for($i=1; $i<10; $i++){
echo "<input type='text' placeholder='Word' name='word$i' /><br />";
}
?>
I want to add an input everytime the user presses a button (already built) but i need every new input to have the following number than the one before. For instance:
input 1 (... name='word1')
press again the button
input 2 (... name='word2')
press again the button
input 3 (... name='word3')
Thanks! Happy 2013!
Ok you have one button created please write a onclick event on it whick fires a function
like this and also create one main div in which your elements can be added
<input type="button" onclick="getElement();"/>
<di id="main"></div>
In the function getElement please write this code:
var i=1;
function getElement(){
var str = "<input type='text' placeholder='Word' name='word"+i+"' />";
i++;
document.getElementById('main').innerHTML = str;
}
for (var i = 0; i < 10; i++) {
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'Word');
input.setAttribute('name', 'word' + i);
}
Something like this?
Tested in Chrome
<input type="button" value="Magical pony time!" onclick="clickhandler()" />
<div id="container"></div>
<script type="text/javascript">
// contains the counter for elements added
window.__buttonClickCounter = 0;
// Keep reference to container
var c = document.getElementById('container');
// Click handler that appends to the contents of the container
var clickhandler = function() {
c.innerHTML = c.innerHTML + "<input type='text' placeholder='Word' name='word"+window.__buttonClickCounter+"' value="+window.__buttonClickCounter+" /><br />";
window.__buttonClickCounter++;
}
</script>
Try
<?php
for($i=1; $i<10; $i++){
?>
<input type='text' placeholder='Word' name='word'<?php echo $i;?>/>
<?php
}
?>
Related
Description: On the form appears radio buttons with textboxes. Their count = count that you entered in textbox. In test.php file I need get all radio buttons and their textbox values, it does not matter - checked, unchecked radio buttons state.
Error is that I get only the most recent values of radiobutton and textbox. I do not see values of previous radiobuttons and textboxes.
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function getnewElementID()
{
var elementID = 0;
if($(".form-element").length > 0)
elementID = $(".form-element").length;
return elementID;
}
$(document).ready(function() {
$('#ok1').click(function () {
var n = $('#box1').val();
var index = 0;
var newElementID = getnewElementID();
if($(".RadioDiv").length > 0)
index = $(".RadioDiv").length;
var newElement = "<div class='RadioDiv form-element'><input type='hidden' name='RadioElements["+newElementID+"]' value='radiogroup'/>\n<input type='text' size='50' name='RadioElementsQueations["+newElementID+"]' placeholder='question...' >";
for (var i=1;i<=n;i++)
{
newElement+="<ol><input type='radio' name='RadioElementsValues["+newElementID+"]' value='radio_"+index+"' for='RadioElementsValuesText["+newElementID+"]'>\n\<input type='text' id='radtext' name='RadioElementsValuesText["+newElementID+"]' size='30' value='choice.."+index+"' ></ol>";
index++;
}
newElement+="</div>";
$("#myForm").append(newElement);
});});
$(document).ready(function() {
$('#submit').click(function () {
var data = $("#myForm").serialize();
if($('input[type="radio"]:checked').length == "0") {
alert("Select any value");
} else {
$.post (
"test.php",
data,
function (response) {
$('#message').html(response);
}
);
}
return false;
});
});
</script>
</head>
<body>
<form id ="myForm" action="test.php">
<label>Select your favourite Activities:</label><br/>
<input type="button" name="ok" value="ok" id="ok1">
<input type="text" value="" id="box1" name="count" size="1"><br/>
<input type="submit" id="submit"/> <br/>
</form>
<div id="message"></div>
</body>
</html>
test.php
<?php
var_dump($_POST);
$elements = $_POST['RadioElementsValuesText'];
if(is_array($elements));
for ($index = 0; $index<sizeof($elements);$index++)
{
$astring = implode("<br/>", $elements);
echo "Choices: ". $astring."<br/>";
}
?>
You should use checkboxes instead of radio button.
In a post request, only one radio button value will be send for the group name (here 'RadioElementsValuesText').
Use javascript to reproduce the radio button behavior on your checkboxes (only one checked at a time).
I have a little problem with my AJAX jQuery script and n number of forms...To be more precise, PHP script generate N number of forms (form include one textarea and one button), and in head tag I included jquery script. Problem is that jquery work only for first form and not with others (second, third...). I needed to work with all forms...This is the code:
<script>
$(document).ready(function() {
$("#submitForm").click(function() {
var text = $("#comment").val();
var id = $("#id").val();
$.ajax(
{
url: "addcomment.php",
type: "POST",
data: "t="+ text +"&id="+id,
success: function(data)
{
alert(data);
}
});
});
});
</script>
And this is PHP code
for($i=0; $i<$num; $i++)
{
echo "<div style='border: 1px solid black;'>
<textarea id='comment'></textarea>
<input type='hidden' id='id' value='".$id."'/>
<input type='button' id='submitForm' value='Add Comment'>
</div>";
}
What is problem???
On your PHP side you should change with something similar to this to ensure that all the html elements has a unique id.
for($i=0; $i<$num; $i++)
{
echo "<div style='border: 1px solid black;'>
<textarea id='comment".$i."'></textarea>
<input type='hidden' id='id".$i."' value='".$id."'/>
<input type='button' id='".$i."' class='submitForm' value='Add Comment'>
</div>";
}
and change the Javascript with something similar to this to reflect the changes made on the php side
<script>
$(document).ready(function() {
$(".submitForm").click(function() {
var formNumber = $(this).attr("id"); // Get the form number that was clicked, the id attribute of the clicked button
var text = $("#comment"+formNumber).val(); // Get the comment of that particular form
var id = $("#id"+formNumber).val(); // get the id of that particula form
$.ajax(
{
url: "addcomment.php",
type: "POST",
data: "t="+ text +"&id="+id,
success: function(data)
{
alert(data);
}
});
});
});
</script>
For every form you're creating you're using the same ID.
IDs must be unique and only appear once on the page.
You should use a class instead as suggested in the comments.
So more like this:
<?php for ($i = 0; $i < $num; $i++): ?>
<div>
<textarea class="comment"></textarea>
<input type="hidden" class="id" value="<?php echo $id; ?>">
<input type="button" class="submitForm" value="Add Comment">
</div>
<?php endfor; ?>
I'm not sure where your $id variable comes from.
Your JavaScript will need to be updated as well to work with this, I'd do something like this (elaborated so you can see what's going on):
$('.submitForm').click(function(e) {
e.preventDefault(); // stops the default form action (if there is one)
var $submitButton = $(this);
var $div = $submitButton.parent(); // gets the div container
var id = $div.find('.id').val();
var text = $div.find('.comment').val();
// now do your ajax
});
[+] //each time I click this button the textbox will generate and I want to have a link beside each textbox, link is "remove" when I click "REMOVE" the textbox will remove..
[hello1] Remove
[hello2] Remove
[hello3] Remove
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i=0,j=0;
var t1= new Array();
function createtext(){
i++;
t1[i]=document.createElement('input');
t1[i].type='text';
t1[i].name='text'+i;
t1[i].value = "hello"+i;
t1[i].size = 10;
document.forms[0].appendChild(t1[i]);
var mybr=document.createElement("br");
document.forms[0].appendChild(mybr);
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="f1">
<input name="b1" type="button" onClick="createtext()" value="+">
<input name="b1" type="Submit"><br>
</form>
</BODY>
</HTML>
Well this is simple.
Just add a id attribute with your text field array that will be assigned to each newly created textarea like this:
t1[i].id='some_unique_suffix'+i
t1[i].onClick='remove("some_unique_suffix"'+i+')'
Then you can go on creating a remove link after each textfield via your loop and pass the id of that particular textfield to a remove function that will be called upon clicking on the remove link like this:
function remove(id)
{
$('#some_unique_suffix'+id).remove();
}
Hope you get the idea.
You can add a remove button along with the input tag like this:
var i=0,j=0;
var t1= [];
function add(){
i++;
var parent = document.forms[0];
var div = document.createElement('div');
var input = document.createElement('input');
input.type='text';
input.name='text'+i;
input.value = "hello"+i;
input.size = 10;
t1.push(input);
div.appendChild(input);
var removeButton = document.createElement("button");
removeButton.innerHTML = "Remove";
removeButton.onclick = function(e) {
this.parentNode.parentNode.removeChild(this.parentNode);
return(false);
};
div.appendChild(removeButton);
parent.appendChild(div);
}
Working demo: http://jsfiddle.net/jfriend00/ky9nv/
This code makes it easier to remove an input element and it's associated button by enclosing them in a containing div. A clicked button can then just get it's parent container and remove that.
And, since your question is tagged with jQuery (thought it doesn't save you a lot here), here's a version that uses jQuery:
var i=0,j=0;
var t1= [];
function add(){
i++;
var div = $('<div>');
var input = $('<input>')
.attr({
size: '10',
type: 'text',
name: 'text' + i,
value: 'hello' + i
}).appendTo(div).get(0);
t1.push(input);
$('<button>Remove</button>')
.click(function() {
$(this).parent().remove();
}).appendTo(div);
$("#myForm").append(div);
}
add();
add();
$("#add").click(add);
Working example: http://jsfiddle.net/jfriend00/nbXak/
<script type="text/javascript">
var i=0;
function createtext() {
i++;
$('<div id="field'+i+'"><input type="text" name="text'+i+'" value="Hello'+i+'" size="10" /> Remove</div>').appendTo('#inputsPlaceholder');
}
function removeField (id) {
$('#'+id).remove();
}
</script>
HTML:
<form action="" method="get" name="f1" id="f1">
<input name="b1" type="button" onclick="createtext();" value="+" />
<div id="inputsPlaceholder"></div>
<input name="b1" type="submit" />
</form>
Try it: http://jsfiddle.net/Z3L5C/
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.0");
</script>
<script type="text/javascript">
$(function()
{
$('input[type=button]').click(function ()
{
var txtbox = $('#buttoncheck1').attr('name');
var var_name = $("input[name='radio1']:checked").val();
$('#btn_get').val(var_name);
});
});
</script>
<html>
<body>
<?php
for($i = 0; $i < 2; $i++)
{
echo "
<div id = 'div1' name = 'div1'>
<input type='radio' value='Blue' name='radio1'>Blue</input>
<input type='radio' value='White' name='radio1'>White</input>
<input type='radio' value='Red' name='radio1'>Red</input>
<input id='buttoncheck1' type='button' name='btn' value='Click'></input>
<br />
<input type='text' id='btn_get' name='get_btn_value'></input>
</div>
";
}
?>
</body>
</html>
I can clearly get all the values of the radio buttons in this code but the only problem I've been solving for almost 3 days is that I cant display the value on other textbox. all the values from all the radio button groups are only displayed on the first textbox produced by the loop. please help me . thanks!
id values should always be unique. You can change your duplicated ids to class values and do the following:
$('input[type=button]').click(function ()
{
var $parent = $(this).parent();
var var_name = $parent.find("input[name='radio1']:checked").val();
$parent.find('.btn_get').val(var_name);
});
I've created an HTML form that has checkboxes that are checked dynamically due to a variable from a previous page (there is only one checkbox checked each time).
What I'd like is to echo the value of this checkbox out (to make the main title of the page so javascript alert is not adapted).
Example :
<html>
<body>
<h1>Here I'd like to echo the value of the checkbox that is checked<h1>
<form id="myform" name="myform">
<p>
<input type="checkbox" name="car" id="porsche" /> <label for="porsche">porsche</label><br />
<input type="checkbox" name="car" id="ferrari" /> <label for="ferrari">ferrari</label><br />
</p>
<script type="text/javascript">
function loopForm(form,car) {
var cbResults = 'Checkboxes: ';
var radioResults = 'Radio buttons: ';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].id == car) {
form.elements[i].checked = true ;
}
}
}
}
...
// This function will check one of the two checkboxes
loopForm(document.myform,car);
</script>
</body>
</html>
The best I can do, I'm afraid, is the following:
var inputs = document.getElementsByTagName('input');
var checkboxes = [];
for (i=0; i<inputs.length; i++){
if (inputs[i].type == 'checkbox' && inputs[i].getAttribute('checked') == 'checked'){
checkboxes.push(inputs[i].value);
}
}
document.getElementsByTagName('h1')[0].innerHTML = checkboxes;
JS Fiddle demo.
This is slightly clunky, but does, at least, use plain JavaScript; albeit it does seem to require that the checked checkboxes be marked up as following: checked="checked".
You can use jQuery to achieve this. Listen for the change() event on the checkboxes and change the text() of the h1 when this happens.