add/remove datepicker dynamically

add/remove datepicker dynamically - javascript

am just a beginner of php.
When i click a button i need to add more date-picker dynamically.I put the code but when i click the button am getting new textbox not date-picker.plz check my code and tell me where is the mistake and what i have to do.Here is my code,
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/datepicker.css">
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newdatepicker = $(document.createElement('div'))
.attr("id", 'datepicker' + counter);
newdatepicker.after().html('<label> #'+ counter + ' : </label>' +
'<input class= name="date' + counter +
'" id="dateid' + counter + '" value="" >');
newdatepicker.appendTo("#date");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#datepicker" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n date #" + i + " : " + $('#date' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
</script>
<div id='date'>
<div class="hero-unit">
<div class="input-daterange" id="datepicker1" >
<span class="add-on" style="vertical-align: top;height:20px">Select Leave Date:</span>
<input type="text" class="input-small" name="date" id="dateid"/>
</div>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>

When the page loads, you initialize the date picker plugin on the elements found at that time:
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
But then you never initialize it on new elements added later. So when you add a new element:
newdatepicker.appendTo("#date");
It's just the uninitialized element that was created. The plugin was never told about it. You need to run the plugin on it.
Since the code creates the id value, you can simply use that to target the element right after it's been added. Maybe something like this:
newdatepicker.appendTo("#date");
$('#dateid' + counter).datepicker({
todayBtn: "linked"
});

Related

generate dynamically a select type with options specified on add button click

i have seen a j query function that generates dynamically on button click an input type = text but how to generate dynamically select with options and get the value everytime.
the j query function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("#TextBoxContainer");
div.append('<div>' + GetDynamicTextBox("") + '</div>');
});
$('form').on('submit', function (e) {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
$("#<%= hdnfldVariable.ClientID %>").val(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<select name="Sexe" id="Sexe" class="field-select"></select>';
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />';
}
the html:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<button id="btnGet" runat="server" onserverclick="Submit_Click">Submit</button>
<asp:HiddenField ID="hdnfldVariable" runat="server" />

Try the below snippet. To grab the values of select on submit you can use:
$('#mySelect').val();
$("#getSelect").click(function(e) {
e.preventDefault();
var select = '<select name = "test" id="mySelect">Select</select>';
if ($('#selectholder').empty()) {
$('#selectholder').append(select);
}
for (i = 0; i < 10; i++) {
$('#mySelect').append('<option value="' + i + '">' + 'Option ' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="getSelect">Display select</div>
<div id="selectholder"></div>

Edit dynamically created li into input for a to do list jquery

I have a to do list and I can swap,delete and edit my li.
Right now I use the contenteditable prop for my edit function.
I would like to replace that with an input when I press the editButton and save the input in list if I press editButton again, but I don't know how to do it.
This is my html code:
var aux = 0;
$(document).ready(
function() {
$('#button').click(
function() {
var toAdd = $('input[name=listItem]').val();
var editTxt = $('<input type="text"/>');
if (toAdd == '')
alert("U must input something!");
else {
$("#list").append('<li><span>' + toAdd + " </span> <button class='edit'>" + "Edit</button>" +
" <button class='delete'>" + "Delete</button></li>");
$('input').val("");
}
});
$(document).on('click', '.delete', function() {
$(this).closest("li").fadeOut('slow', function() {
$(this).remove();
});
});
$(document).on('click', '.edit', function() {
if ($(this).closest("li").find("span").prop("contenteditable") == "true")
$(this).closest("li").find("span").prop("contenteditable", false).focus();
else
$(this).closest("li").find("span").prop("contenteditable", true).focus();
});
$('ol').sortable();
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h>My list:</h>
<form name="toDoList">
<input type="text" name="listItem" />
</form>
<button id="button">Add</button>
<br/>
<ol id="list"></ol>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="v4.js" type="text/javascript"></script>
</body>

Just add hidden input along with span. and on Edit click check if span is visible then show input with span html and if hidden then replace input value to span and hide input field.
var aux = 0;
$(document).ready(
function() {
$('#button').click(
function() {
var toAdd = $('input[name=listItem]').val();
var editTxt = $('<input type="text"/>');
if (toAdd == '')
alert("U must input something!");
else {
$("#list").append('<li><span>' + toAdd + "</span> <input hidden></input><button class='edit'>" + "Edit</button>" +
" <button class='delete'>" + "Delete</button></li>");
$('input').val("");
}
});
$(document).on('click', '.delete', function() {
$(this).closest("li").fadeOut('slow', function() {
$(this).remove();
});
});
$(document).on('click', '.edit', function() {
/* if ($(this).closest("li").find("span").prop("contenteditable") == "true")
$(this).closest("li").find("span").prop("contenteditable", false).focus();
else
$(this).closest("li").find("span").prop("contenteditable", true).focus(); */
if ($(this).closest("li").find("span").is(':visible')) {
var val = $(this).closest("li").find("span").html();
$(this).closest("li").find("span").hide();
$(this).closest("li").find("input").show();
$(this).closest("li").find("input").val(val);
$(this).html("Save");
} else {
var val = $(this).closest("li").find("input").val();
$(this).closest("li").find("input").hide();
$(this).closest("li").find("span").show();
$(this).closest("li").find("span").html(val);
$(this).html("Edit");
}
});
$('ol').sortable();
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h>My list:</h>
<form name="toDoList">
<input type="text" name="listItem" />
</form>
<button id="button">Add</button>
<br/>
<ol id="list"></ol>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="v4.js" type="text/javascript"></script>
</body>

Try this,
$(document).on('click', '.edit', function() {
var span = $(this).parent().children(':first-child'); // gets the first input (edit input)
if (span.children().length > 0) { // checks if it is edit mode or not
var spanText = span.children(':first-child').val(); // gets the inputs value
span.html(spanText); // set it to input
} else {
var spanText = span.text(); // get span input
var input = "<input value=" + spanText + ">"; // set it to input for edit
span.html(input); // paste inside span
}
});
Hope helps,

Jquery add row dele buttons?

I want to add the insertion button in the following code directory
How can I add a button to the insert section.
$(document).ready(function() {
$('#row_add_btn').click(AddRows)
var number = 1;
function AddRows() {
number++;
if (number < 21) {
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>

If you want the button click to remove the row, this jQuery should do the trick:
$(document).on("click", ".ibtnDel", function () {
$(this).parent().remove();
});
jQuery on() documentation

If you planning to insert deletion of the the rows then you need to use the code what Will P. suggested above but in addition you will need to handle the maximum number of rows differently.
Increment the number in if condition and decrement on remove row.
Example Snippet:
$(document).ready(function() {
$('#row_add_btn').click(AddRows);
$(document).on('click', '.ibtnDel', removeRow);
var number = 1;
function AddRows() {
if (number <= 21) {
number++;
var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>'
$('#list_add_rows').append(AddToRows)
}
}
function removeRow() {
number--;
$(this).parent().remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list_add_rows">
<p>
<input type="text" name="icerik1" />
<input type="text" name="icerik1" />
</p>
</div>
<a id="row_add_btn">Add</a>

.val() JQuery. Passing text fields to jQuery

Basically my code is perfectly fine it is I just cant seem to be able to get the extra added tags when I create them to have any functionality with the api search. I want to pass them into the tags field aswell as $("#textbox1").val(). Any tips/help is appreciated. Thanks
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#images").empty();
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags:$("#textbox1").val(),
tagmode: "any",
format: "json"
}, function(data){
console.log(data);
$.each(data.items, function(i,item){
$('<img/>').attr("src", item.media.m).appendTo('#images');
if(i==2) return false;
});
});
});
$('#images').on('click', 'img', function(){
});
});
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' id='textbox1' >
<input type='button' value='Add tag' id='addButton'/>
</div>
</div>
<div id="images" /> </div>
</body>
</html>

please format your code
Please have only one ready
use a class
$(document).ready(function() {
$("#button").click(function() {
$("#images").empty();
var tags = [];
$(".textbox").each(function() {
tags.push(this.value);
});
console.log(tags)
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: tags.join(" "),
tagmode: "any",
format: "json"
}, function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$('<img/>').attr("src", item.media.m).appendTo('#images');
if (i == 2) return false;
});
});
});
$('#images').on('click', 'img', function() {
});
var counter = 2;
$("#addButton").click(function() {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" class="textbox" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' class="textbox" id='textbox1'>
<input type='button' value='Add tag' id='addButton' />
</div>
</div>
<div id="images" /></div>

How to post variable from field in page 1 to page 2

My code is trying to allow user to add new text field by clicking the add button. I want to post all the text fields the user had added (be it 2, 3, 4 or more) to the next page so I can retrieve the data that the user had entered.
P/S: Added new requirement: Retrieve data and print the data that the user had entered.
Here is my code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var counter = 2;
$("#addMenuTab").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Menu Tab #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeMenuTab").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
<form name="basicInfo" action="contents.php" method="post">
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Menu Tab #1 : </label>
<input type='text' id='textbox1' >
</div>
</div>
<br/>
<input type='button' value=' Add Menu Tab ' id='addMenuTab' />
<input type='button' value=' Remove Menu Tab ' id='removeMenuTab' />
</form>
</body>
</html>

You can get all these fields and their values on contents.php under $_POST global array.
For example:
<?php
echo "<pre>";
print_R($_POST);
echo "</pre>";
?>

I have a simple solution for your problem.
Use one counter to count the number of textfields.
We can later pass this variable to html.
Modify your javascript:-
<script>
$(document).ready(function(){
var counter = 2;
$("#count").val(counter-1);
$("#addMenuTab").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Menu Tab #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
$("#count").val(counter);
counter++;
});
$("#removeMenuTab").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
$("#count").val(counter-1);
});
});
</script>
Now add one hidden field in your html form. The value of this hidden field will be the total number of texfields.
<input type='hidden' id='count' name='counter' value=''/>
In your contents.php add the below given code.
$count=$_POST['counter'];
for($i=1;$i<=$count;$i++)
{
echo "value from textbox$i is".$_POST["textbox$i"]."<br/>";
}
Here you will get the total number of textfields in the variable $count
Since the name of your texfields are like textbox1,textbox2..etc You can use a loop for getting all the data from your previous page using the POST method.
Also add name attribute to your initial textbox to get this work.
<input type='text' id='textbox1' name="textbox1" >

I don' understand what is your question. If you add some inputs like textbox10, you will be able to read textbox10 without problems on your server.

Develop Reference

JavaScript is the programming language of the Web.

add/remove datepicker dynamically - javascript

Related

generate dynamically a select type with options specified on add button click

Edit dynamically created li into input for a to do list jquery

Jquery add row dele buttons?

.val() JQuery. Passing text fields to jQuery

How to post variable from field in page 1 to page 2

Categories

Resources