How to display add button at last element after delete last row? - javascript

I want to add some more fields with add and remove buttons, when I delete the last record add button must be present at the last element after deleting.
<div id="cont">
<p>
<label>Contact No : </label>
<select>
<option value="Phone">Phone</option>
<option value="Phone">Land Line</option>
<option value="Phone">Fax</option>
</select>
<input type="text" name="website" value="" />
<input type="button" value="+" id="addcontact1" />
</p>
</div>
This is a fiddle link.
http://jsfiddle.net/8dq15j2y/

Add + button after P tag and Replace $('#addcontact1').show(); to $('#addcontact1').hide();

Note: ID of an element must be unique, so use class instead
$(function() {
var scntDiv = $('#cont');
var i = $('#cont p').size() + 1;
$('#cont').on('click', '.addcontact1', function() {
$('<p style="margin-left:150px;"><select><option value="Phone">Phone</option><option value="Land-Line">Land-Line</option><option value="Fax">Fax</option></select><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="" /> remove <input type="button" value="+" class="addcontact1"></p>').appendTo(scntDiv);
i++;
$(this).hide();
return false;
});
$('#cont').on('click', '.remScnt', function() {
if (i > 2) {
$(this).closest('p').remove();
i--;
}
$('#cont p').last().find('.addcontact1').show();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="cont">
<p>
<label>Contact No :</label>
<select>
<option value="Phone">Phone</option>
<option value="Phone">Land Line</option>
<option value="Phone">Fax</option>
</select>
<input type="text" name="website" value="" />
<input type="button" value="+" class="addcontact1" />
</p>
</div>
Using css: http://jsfiddle.net/arunpjohny/k7t86pkx/3/

you can insert after the line
$(this).parents('p').remove(); with code bellow:
$('#cont p:last').children('#addcontact1').show();

Related

View option picked from datalist

I would like to take the option of which the user selects from a datalist. This is what I have:
<input type="text" name="my-input" class="searchBar" list="my-list">
<input id="clickMe" type="button" value="clickme" onclick="handleSelect();" />
<datalist id="my-list">
<option value="COMP232"></option>
<option value="COMP248"></option>
<option value="ENGR201"></option>
</datalist>
My JS method:
function handleSelect()
{
var elm = document.getElementById("my-list").innerHTML.value;
console.log(elm);
//window.location = "./class/" + elm.toUpperCase() + ".php";
}
The console responds "undefined" when I submit. What is wrong here?
You can assign an id to input and take a value of id on button click.
<input id= "inp" type="text" name="my-input" class="searchBar" list="my-list">
<input type="button" value="clickme" onclick="handleSelect();" />
<datalist id="my-list">
<option value="COMP232"></option>
<option value="COMP248"></option>
<option value="ENGR201"></option>
</datalist>
and JS code snippet will look like,
var elm = document.getElementById("inp").value;
Your code should be like this.
<script>
function handleSelect(){
var elment = document.getElementById("selectedValue").value;
console.log(elment);
}
</script>
<input id="selectedValue" type="text" name="my-input" class="searchBar" list="my-list">
<input id="clickMe" type="button" value="clickme"
onclick="handleSelect();" />
<datalist id="my-list">
<option value="COMP232"></option>
<option value="COMP248"></option>
<option value="ENGR201"></option>
</datalist>

php javascript - add remove dynamic form (with datepicker input)

i use some code to clone form elements but i dont know how it works with with datepicker.
Can someone update the code that i can use datepicker by input what can be clone? With query ui?
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
this.id = newId;
}).end()
//inject new section
.appendTo('#sections');
return false;
});
//remove section
$('#sections').on('click', '.remove', function() {
//fade out section
$(this).parent().fadeOut(300, function(){
//remove parent element (main section)
$(this).parent().parent().empty();
return false;
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sections">
<div class="section">
<fieldset>
<legend>test form - <a href="#" class='button red remove'>delete</a></legend>
<p>
<label for="number1">number1:</label>
<input type="text" name="number1[]"/>
</p>
<p>
<label for="number2">number2:</label>
<input type="text" name="number2[]"/>
</p>
<p>
<label for="selcet1">selcet1:</label>
<select name="select1[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="selcet2">selcet2:</label>
<select name="selcet2[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="date">Date:</label>
<input type="text" name="date[]" required />
</p>
<p>
<label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
</p>
</fieldset>
</div>
</div>
<a href="#" class='addsection'>add form</a>
I dont know how to add a datepicker by the
// input type="text" name="date[]" required // that i can clone and use.
Please can someone help me that it works?
JqueryUI solution
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id - THIS CAUSES JqueryUI Datepicker to bug, also you shouldn't use numerical only IDs
//this.id = newId;
}).end()
//inject new section
.appendTo('#sections');
//initialize datePicker on last name=date[] element in HTML DOM
$("input[name='date[]']").last().datepicker();
return false;
});
//init original datePicker in HTML DOM
$("input[name='date[]']").last().datepicker();
//remove section
$('#sections').on('click', '.remove', function() {
//fade out section
$(this).parent().fadeOut(300, function(){
//remove parent element (main section)
$(this).parent().parent().empty();
return false;
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<div id="sections">
<div class="section">
<fieldset>
<legend>test form - <a href="#" class='button red remove'>delete</a></legend>
<p>
<label for="number1">number1:</label>
<input type="text" name="number1[]"/>
</p>
<p>
<label for="number2">number2:</label>
<input type="text" name="number2[]"/>
</p>
<p>
<label for="selcet1">selcet1:</label>
<select name="select1[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="selcet2">selcet2:</label>
<select name="selcet2[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="date">Date:</label>
<input type="text" name="date[]" required />
</p>
<p>
<label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
</p>
</fieldset>
</div>
</div>
<a href="#" class='addsection'>add form</a>
HTML5 DatePicker Solution
Native HTML5 datepicker is supported only in modern browsers and not even all of them.
Simply use type="date" instead of type="text"
If you want 100% working datepicker, you will have to look at JqueryUI.
If you want JqueryUI datepicker to work with cloned elements, you will have to initialize new date input fields as datepicker jquery input element after cloning them.
//define template
var template = $('#sections .section:first').clone();
//define counter
var sectionsCount = 1;
//add new section
$('body').on('click', '.addsection', function() {
//increment
sectionsCount++;
//loop through each input
var section = template.clone().find(':input').each(function(){
//set id to store the updated section number
var newId = this.id + sectionsCount;
//update for label
$(this).prev().attr('for', newId);
//update id
this.id = newId;
}).end()
//inject new section
.appendTo('#sections');
return false;
});
//remove section
$('#sections').on('click', '.remove', function() {
//fade out section
$(this).parent().fadeOut(300, function(){
//remove parent element (main section)
$(this).parent().parent().empty();
return false;
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sections">
<div class="section">
<fieldset>
<legend>test form - <a href="#" class='button red remove'>delete</a></legend>
<p>
<label for="number1">number1:</label>
<input type="text" name="number1[]"/>
</p>
<p>
<label for="number2">number2:</label>
<input type="text" name="number2[]"/>
</p>
<p>
<label for="selcet1">selcet1:</label>
<select name="select1[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="selcet2">selcet2:</label>
<select name="selcet2[]" required>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
</p>
<p>
<label for="date">Date:</label>
<input type="date" name="date[]" required />
</p>
<p>
<label for="text">text:</label>
<textarea rows=3 type="text" name="text[]" > </textarea>
</p>
</fieldset>
</div>
</div>
<a href="#" class='addsection'>add form</a>

Generate input box based on dropdown selection

I want to be able to make a selection from the dropdown list then have it generate a input box dynamically with an appropriate label above it. Example:
if i select school from dropdown:
<label>Enter School name:</label>
<input name="name">
if i select individual from dropdown:
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
$('#elementreg').change(function() {
$('#input-holder').empty();
if ($(this).val() == "individual") {
$('#input-holder').append('<input type="text" name="input" value="test" >');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"></div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>
Your code works, but why not show/hide? It is much faster than manipulating the DOM each time
$("#elementreg").on("change", function() {
var val = $(this).val();
$(".types").hide().find('input:text').val(''); // hide and empty
if (val) $("#" + val).show();
});
.types {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>
<div class="types" id="individual">
<label>Enter Individual name:</label>
<input name="firstName">
<input name="lastName">
</div>
<div class="types" id="school">
<input .... />
</div>
Your version:
$("#elementreg").on("change", function() {
var val = $(this).val(), $div = $("#input-holder"),fields=" ";
switch (val) {
case "individual":
fields='<label>Your name: </label><input type="text" /><input type="text"/>';
break;
case "school":
fields='<label>School: </label><input type="text" />';
break;
}
$div.html(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-holder"> </div>
<select class="medium" id="elementreg" name="youare">
<option value="" selected="selected"></option>
<option value="individual">For Yourself</option>
<option value="school">School</option>
<option value="group">Group</option>
<option value="studio">Studio</option>
</select>

Cloning Input Fields with Unique IDs

I have a form that I would like to have an user be able to add as many items to as they need. However, certain items require an AJAX call to retrieve information from a database, and that information be returned into fields. Currently, the replace destination is static, meaning that no matter what item calls the replace method, it will only change the first. I need it to change the one that called it. I've been stuck on this for three days, any help would be greatly appreciated!
Javascript:
ar uniqueId = 1;
function getAjax(seek, getId, destUrl, reset)
{
var xmlhttp;
if (seek=="")
{
document.getElementById(getId).innerHTML=reset;
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('m_width' + getId).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",destUrl+seek,true);
xmlhttp.send();
}
$(function() {
$('.addRow').click(function() {
var copy = $("#original").clone(true);
var formId = 'NewForm' + uniqueId;
copy.attr('id', formId );
copy.attr('name', formId );
$('#item').append(copy);
$('#' + formId).find('input,select,div').each(function(){
$(this).attr('id', $(this).attr('id') + uniqueId);
$(this).attr('name', $(this).attr('name') + uniqueId);
});
$('#NewForm').style.display = 'inline';
uniqueId++;
});
});
$(function() {
$('.removeRow').click(function() {
$(this).parent().remove();
});
});
HTML:
<div id="container">
<h3>item</h3>
<div id="item" class="item" >
<form action="" id="original">
<input type="text" class="" id="hidden" value="">
<select style="width: 160px" id="" name="" onchange="getAjax(this.value, 'm_width', 'm_width.php?media=','')">
<?php include 'includes/media.php'; ?>
</select>
<div id="m_width">
<label for="media_color_size">Width: </label>
<select id='media_color_size' style="width: 160px" disabled>
<option value="">None</option>
</select>
</div>
<select class="client" id="client" name="client" title="Client">
<option>Client1</option>
<option>Client2</option>
<option>Client3</option>
<option>Client4</option>
</select>
<input type="button" class="removeRow" value="Remove Row"/>
</div>
</form>
<input type="button" class="addRow" value="Add Row" />
</div>
and m_width.php:
<?php
require_once $_SERVER['DOCUMENT_ROOT']. '/dev/scripts/connect.php';
require_once $_SERVER['DOCUMENT_ROOT']. '/dev/scripts/authorize.php';
authorize_user();
$media = trim(strip_tags($_GET["media"]));
$query = "SELECT distinct material_id, width FROM media WHERE material_id = $media;";
$result = mysql_query($query);
echo "<label for='media_color_size'>Width: </label><br />";
echo "<select id='media_color_size' name='media_color_size' class='width' style='width: 160px'>";
echo "<option>Select Width</option>";
while ($row = mysql_fetch_assoc($result)) {
echo "<option value={$row['media_id']}>{$row['width']}</option>";
}
echo "</select>";
return;
?>
You can accomplish what you need to do without the use of unique IDs; there's too much unnecessary overhead. Class selectors would work fine. Here is my suggestion; if each form is inside a div.item element then use this to make the ajax call. Plus, you don't want to use inline JavaScript.
$('div.item form select').not('.client').on('change', function() {
//save a reference to the select element that triggered the change event
var that = $(this);
$.ajax({
url: '....',
....
success: function() {
//get the div.item ancestor of the select that triggered the change event
var divItem = that.closest('div.item');
//now change elements only within divItem
}
});
});
As you can see all this is accomplished without reference to any ID of any particular form. Therefore, you may not need to assign unique IDs to your forms.
PROOF OF CONCEPT DEMO:
$('div.item form select').not('.client').on('change', function() {
alert( $(this).closest( '.container' ).find( 'h3' ).text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<h3>item 1</h3>
<div id="item" class="item" >
<form action="" class="original">
<input type="text" class="hidden" value="">
<select style="width: 160px" id="" name="">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div class="m_width">
<label for="media_color_size">Width: </label>
<select id='media_color_size' style="width: 160px" disabled>
<option value="">None</option>
</select>
</div>
<select class="client" name="client" title="Client">
<option>Client1</option>
<option>Client2</option>
<option>Client3</option>
<option>Client4</option>
</select>
<input type="button" class="removeRow" value="Remove Row"/>
</div>
</form>
<input type="button" class="addRow" value="Add Row" />
</div>
<div class="container">
<h3>item 2</h3>
<div id="item" class="item" >
<form action="" class="original">
<input type="text" class="hidden" value="">
<select style="width: 160px" id="" name="">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div class="m_width">
<label for="media_color_size">Width: </label>
<select id='media_color_size' style="width: 160px" disabled>
<option value="">None</option>
</select>
</div>
<select class="client" name="client" title="Client">
<option>Client1</option>
<option>Client2</option>
<option>Client3</option>
<option>Client4</option>
</select>
<input type="button" class="removeRow" value="Remove Row"/>
</div>
</form>
<input type="button" class="addRow" value="Add Row" />
</div>
<div class="container">
<h3>item 3</h3>
<div id="item" class="item" >
<form action="" class="original">
<input type="text" class="hidden" value="">
<select style="width: 160px" id="" name="">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div class="m_width">
<label for="media_color_size">Width: </label>
<select id='media_color_size' style="width: 160px" disabled>
<option value="">None</option>
</select>
</div>
<select class="client" name="client" title="Client">
<option>Client1</option>
<option>Client2</option>
<option>Client3</option>
<option>Client4</option>
</select>
<input type="button" class="removeRow" value="Remove Row"/>
</div>
</form>
<input type="button" class="addRow" value="Add Row" />
</div>

Show different elements of a form depending on dropdown box selection

So I have a page that has a dropdown list and form. And what I want to do is depending on the option selected in the dropdown list I want to hide and show different parts of the form.
<select id="myselect>
<option id="option1">Option_1</option>
<option id="option2">Option_2</option>
<option id="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" />
<input id="input_2" name="input_2" type="text" />
<input id="input_3" name="input_3" type="text" />
</form>
So if Option_1 is selected then show input_1 and input_3, while hiding input_2
Plain JS
window.onload=function() {
document.getElementById("myselect").onchange=function() {
document.getElementById("input_2").style.display=(this.options[this.selectedIndex].value=="option1")?"none":"block";
}
document.getElementById("myselect").onchange(); //trigger
}
i managed to get your issue resolved by adding a 'value' attribute to your option tags:
<select id="myselect">
<option id="option1" value="option1">Option_1</option>
<option id="option2" value="option2">Option_2</option>
<option id="option3" value="option3">Option_3</option>
</select>
<form action="" method="post">
<input id="input_1" name="input_1" type="text" placeholder="input_1"/>
<input id="input_2" name="input_2" type="text" placeholder="input_2"/>
<input id="input_3" name="input_3" type="text" placeholder="input_3"/>
</form>​
and using the jquery .change() event:
$select = $('#myselect');
$('#input_2').hide();
$('#input_3').hide();
$select.change(function(){
if($(this).val() == "option1"){
if($('#input_1').is(":hidden")){
$('#input_1').show();
}
$('#input_2').hide();
$('#input_3').hide();
}
if($(this).val() == "option2"){
if($('#input_2').is(":hidden")){
$('#input_2').show();
}
$('#input_1').hide();
$('#input_3').hide();
}
if($(this).val() == "option3"){
if($('#input_3').is(":hidden")){
$('#input_3').show();
}
$('#input_1').hide();
$('#input_2').hide();
}
});​
jsfiddle

Categories