I have a forms which allows multiple steps to be submitted. When a user clicks "add step" another textarea appears. I am using CKeditor. It works great of the first iteration, but on all subsequent ones, it shows a standard text area. Here is my code:
<form method="post" action="process_project.php">
<b>Steps for your project:</b>
<div> </div>
Step 1
<div id="divWho">
<textarea name="projSteps[]" class="steps" id="1" rows="10" cols="60"></textarea>
</div>
<div> </div>
<input type="button" value="Add project step" onClick="addTextArea();">
<input type="submit" name="submit" value="submit" />
</form>
<script type="text/javascript">
var counter = 1;
var limit = 11;
function addTextArea() {
if (counter == limit-1) {
alert("You have reached the limit of adding " + counter + " project steps");
return false;
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Step " + (counter + 1) + " <br><textarea name='projSteps[]' id=counter rows='10' cols='60'>";
document.getElementById('divWho').appendChild(newdiv);
counter++
return true;
}
}
</script>
<script> CKEDITOR.replace('1');</script>
How can I make each new dynamically created text areas also use CKeditor? I have been working on this for hours and I am stumped.
I think you need to move CKEDITOR.replace('1'); inside the addTextArea() method enclosed in the else block before the return statement.
And also if you hard code the replace parameter to '1', it will only convert the first instance of textarea with id 1 to CKEditor and ignore others. Generate an Id dynamically and pass it to repalce method. Something like below,
var step = 'step'+counter;
div = <textarea name='projSteps[]' id=step rows='10' cols='60'>;
CKEDITOR.replace(step);
I haven't written the second step completely, I guess you can modify it as you need.
I'm working on a similar functionality and this approach works for me.
use like this.
<textarea class="ckeditor" name="abc1"</textarea>
and in JS add this
CKEDITOR.replaceAll( 'ckeditor' );
I hope it will work for all the textareas.
Related
i created a form builder, however, i need to find a way to have the person add their own tracking codes when they publish the forms, these tracking codes go in the code.
<section class="tracking-codes">
<h2> Please enter all tracking codes in here: </h2>
<form>
<input type="text" id="code" placeholder="Facebook Pixel"> </input>
<button type="button" onclick="codes()"> Add Code </button
</form>
</section>
here is my js
function codes ()
{
var trackingCode = document.getElementById('code');
document.head.appendChild(trackingCode);
console.log(trackingCode);
}
at this point, it does append the id of code but only the part of
<input type="text" id="code" placeholder="Facebook Pixel">
and not the user input, how would i go about doing this?
I have also tried the .value at the end of making the var of trackingcodes but it doesnt work.
Instead of adding html to the head section, you should use a hidden field input. Add it like this:
function codes ()
{
var trackingCode = document.getElementById('code').value;
var element = document.createElement('input');
element.type = 'hidden';
element.id = 'tracking';
document.head.appendChild(element);
console.log(trackingCode);
}
Here is the script which i used
<script>
var counter = 1;
var limit = 3;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Experiment Date" + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
Here is the HTML code
<body>
<form name="form1" runat="server">
<div id="dynamicInput">
Experiment Date 1 <br/> <input id="demo2" type="text" readonly="true" name="myInputs[]" runat="server"/>
</div>
<asp:Button ID="Button8" runat="server" Text="Add more Experiments" onclientclick="addInput('dynamicInput')"/>
</form>
i also use date picker for the calendar entries, my question is that when i run the page the page is showing one entry but after click on the add more experiments the division is generated but somehow it is disappear in a second i think it is some problem of page load so what is be the solution of this and as my original form have multiple entries so can i use it there and is there is any good solution rather using this method.
Thanks for reading.
<input type="text" class="form-control" id="datepicker1" value="гггг-MM-дд" name="datepicker1"/>
<script type="text/javascript">
$('#datepicker1.form-control').datepicker(
{
dateFormat: "yy-mm-dd"});
</script>
This is with bootstrap, inside code you can use
string datepicker = Request.Form["datepicker1"];
Sorry if I don't help you.
your code is working I changed only:
<input ID="Button1" type="button" value="Dodaj" onclick="addInput('dynamicInput')"/>
And maybe in js when u add new input set id for it, to easily get data.
I hope i helped.
So I am relatively new to JavaScript but I have experience with programming. I have this code which allows the user to define how many addresses they would like to enter so then I can query google maps and find the geographic center. The problem with this is that it looks very unprofessional in the sense that they have to enter the number of fields on one page and then they are prompted with that many boxes on the next page. Is there any way to make only one form(with all the parameters I require for one entry) and then after they click submit, I append it to an array and then when they decide they have enough addresses they hit the final submit so then I can process the data using a PHP call? Any help would be great, but I am new to this so I might need more spelt out explanations, sorry. Thanks again!
TL;DR: I want to create a single entry field which when submit is clicked, the page does not refresh or redirect to a new page and appends the data entry to an array. From there the user can enter a new input and this input would also be appended to the array until the user has decided no more inputs are necessary at which point they would click the final submit allowing me to process the data.
Here is the code I have so far:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var c = 0;
$("#button1").click(function(){
c = $("#inputs").val();
$("#mydiv").html("");
for(i=0;i<c;i++){
$("#mydiv").append('<input type="text" id="data'+i+'" name="data'+i+'" /><br/>');
}
});
$("#button2").click(function(){
$.post("getdata.php",$("#form1").serialize(),function(data){
});
});
});
</script>
</head>
<body>
<form id="form1">
Type the number of inputs:
<input type="text" id="inputs" name="inputs" />
<input type="button" id="button1" value="Create" />
<div id="mydiv"></div>
<input type="button" id ="button2" value="Send" />
</form>
</body>
</html>
getdata.php
<?php
for( $i=0; $i<$_POST["inputs"] ; $i++){
echo $_POST["data".$i]."\n";
}
?>
Here is code:
EDIT: I rewrite the code, so you can also delete each address
$(document).ready(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']">Address ' + (numberOfAddresses + 1) + '</label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" />';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
$(this).html("Address " + ($(this).parents('.address').index() + 1));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post">
<div class="address">
<label for="data[address][0]">Address 1</label>
<input type="text" name="data[address][0]" id="data[address][0]" />
</div>
<button id="add-address">Add address</button>
<br />
<input type="submit" value="Submit" />
</form>
After form submit you can loop through addresses like this:
foreach ($_POST['data']['address'] as $address){
...your code
}
Hope this help! :)
Normally how I do this kind of stuff is to provide a user ability to add many input fields at client level and send them all in one array when submitting the form. That is more professional I believe. Try this JSFiddle to see what I mean.
<input type="text" name="address[]" />
if you want to POST dynamic value in a form you can do it like this:
<input type="text" name="adress[]" />
so in your case you could add new fields with javascript or jquery with the same name name="adress[]".
and in your PHP you get an array:
$adresses= $_POST['adress'];
foreach ($adresses as $adress) {
echo $adress;
}
FIDDLE DEMO
To process an array of inputs you can use the following convention:
HTML: simply add square brackets to the name attribute
<input type="text" id="data'+i+'" name="data[]" />
PHP: Post returns an array
for( $i=0; $i<$_POST["data"] ; $i++){
echo $_POST["data"][$i]."\n";
}
JAVASCRIPT: $("#form1").serialize() will retrieve all the inputs data as name=value pairs even the inputs that are added dynamically. There's no need to keep an array you can just process all of them at the end.
You don't need to create an array, $_POST is actually doing it all for you already.
So I suggest you do the following: using javascript (or jQuery), keep the button clicks, but make sure the form submission is prevented (using preventDefault on the form) [EDIT: You actually won't need this, as if the buttons are just buttons, no submit inputs, the form will not submit anyway], and just make sure you append another element every time they click a plus button or something; make sure you increment the name attributes of each input element that gets created.
When the user then creates submit, use submit the form via js, then on your getdata.php you can simply loop through all the values and use them that way you want. You will even be able to know the exact number by calculating the number of times a new input element has been added to the form.
I'll try to write up something for you in a minute, but if I was clear enough, you should be able to do that too.
EDITED: So here is what I've come up with; give it a try and see if this is something for you.
This is how the form would look like:
<form id="form1" name="myform" method="post" action="getdata.php">
Enter address 1: <input type="text" name="address-1" /> <input type="button" value="More" onclick="createNew()" />
<div id="mydiv"></div>
<input type="submit" value="Send" />
</form>
And this would be the js code:
var i = 2;
function createNew() {
$("#mydiv").append('Enter address ' + i +': <input type="text" name="address-' + i +'" /> <input type="button" value="More" onclick="createNew()" /><br />');
i++;
}
...and then getdata.php:
foreach ($_POST as $key => $value) {
echo 'The value for '.$key.' is: '.$value.'<br />';
}
here is a fiddle demo
Ok so basically what i'm trying to do is create an html document that allows the user to input any thing they want with any number of choices and click a button and get one of the things they typed in to be chosen at random. My girlfriend is really indecisive and sometimes takes hours to make a choice when i'm not around so i thought i'd write her a code to help. I'm not exactly sure how to go about this. I have searched around for a few hours and have found nothing about this. Sorry if it's something extremely simple but any help would be greatly appreciated. So far i have this as a code to get a text box and make a new one appear by clicking the button
`
<html>
<head>
<script type="text/javascript">
var instance = 1;
function newTextBox(element)
{
instance++;
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
//document.body.write("<br>");
document.body.insertBefore(newInput, element);
document.body.insertBefore(document.createElement("br"), element);
}
</script>
</head>
<body>
<input id="text2" type="text" name="text1"/> <br>
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
</html>`
I think this should work:
HTML:
<input type="button" value="Get Random" onclick="selectRandomInput();"/> <!-- select a random element among [1,instance] elements. -->
JS:
function selectRandomInput(){
var selectedId=Math.floor(Math.random()*instance+1);
for(var i=0;i<document.getElementsByTagName("input").length;i++){
element=document.getElementsByTagName("input")[i];
if(element.id!=selectedId && element.type!="button")
element.style.display="none";
}
}
PS: A better solution is to add a class to input text elements, and iterate over those having this class instead of all input tags.
I am a beginner, so keep that in mind.
so what I currently have working is my form successfully adds another input to the form, however it appears out of the form div. Basically I want it to appear within the div and above the submit button.
how do I do this?
here is main appendTo in my javascript:
var i = $('input').size() + 1;
$('a#add').click(function() {
$('<input type="text" value="user' + i + '" />').appendTo('form');
i++;
});
here is the form html as on request.
<div id="stylized" class="myform">
<form name="addstudents" method="post" action="add_students.php">
<div id="formHeader">
<h1>Add student(s)</h1>
<p>Please enter student's HEMIS number</p>
</div>
<label>Student: <span class="small">Enter HEMIS number</span> </label>
<input type='text' name="user_1">
<input type="submit" class="Mybutton" id="mybutton" name="submit" value='Submit Student(s)'>
<div class="spacer"></div>
</form>
AddRemove</div>
Any help would be greatly appreciated.
thanks
NEW PROBLEM: REMOVING!
here is my current remove JS, it simply removes the submit button first :(
$('a#remove').click(function() {
if(i > 3) {
$('input:last').remove();
i--;
}
});
$('a.reset').click(function() {
while(i > 2) {
$('input:last').remove();
i--;
}
});
Thanks again
You can use this snippet to insert the input before the button:
$('form #idofsubmitbutton').before($('<input type="text" value="user' + i + '" />'))
EDIT:
I played around with jsfiddle.com after your last edit and came upp with this:
var i = $('input').size() + 1;
$('a#add').click(function() {
$('div#stylized form input:submit').before($('<input type="text" value="user' + i + '" />'))
i++;
});
With the example html you posted this works. When I press the add link new inputs appear before the submit button.
If you still got problems you might have elements with duplicate ids.
var i = $('input').size() + 1;
$('a#add').click(function() {
$('<input type="text" value="user' + i + '" />').appendTo('div#divId');
i++;
});
This is not a "PHP form", once it's on the client, it's just HTML/CSS/Javascript. PHP is on the server.
.appendTo('form'); appends to the form TAG, not a "form div". If you have a DIV named "form" you need to use .appendTo('#form');