I have markup like so:
$('label.duplicate').click(function(e) {
e.preventDefault();
var _for = $(this).attr('for');
$('input[name="' + _for + '"]').clone().insertBefore($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input_one[]">
<label class="duplicate" for="input_one[]">Add another car</label>
This doesn't duplicate, or provide an error so I don't know why this is not working?
It is working, but you need to wait for the dom-structur to load before you run you code. Put everything inside documet.ready like this:
$(document).ready(function() {
$('label.duplicate').click(function(e) {
e.preventDefault();
var _for = $(this).attr('for');
$('input[name="' + _for + '"]').clone().insertBefore($(this));
});
})
Or insert your code dead last on you page. Read more about this here: https://learn.jquery.com/using-jquery-core/document-ready/
<input type="text" name="input_one[]">
<label class="duplicate" for="input_one[]">Add another car</label>
just .duplicate is enough to duplicate:
$(function(){
$('.duplicate').click(function(e) {
e.preventDefault();
var _for = $(this).attr('for');
$('input[name="' + _for + '"]').clone().insertBefore($(this));
});
}
Related
I am trying to create multiple fields when I enter a number to tell it how many to create... I have utilised some code that I have written previously but now it's no longer working.
HTML:
<input type="text" name="rows">
jQuery:
$(document).ready(function() {
$('#rows').change(function() {
var rows = $(this).val();
for(i=0;i<=rows;i++) {
$('#form').append('<div><input type="text" name="N' + i + '"></div>');
$('#form').append('<div><select name="S'+ i +'"><option value="Text">Text</option><option value="editor">Editor</option></select></div>');
$('#form').append('<div><input type="text" name="V' + i + '"></div>');
}
}
}
Fiddle: https://jsfiddle.net/dc5665xk/1/
ID attribute is missing for rows element.
There is no form element having form as ID
Syntax error as closing braces were missing.
Note: var keyword was missing in for-loop
$(document).ready(function() {
$('#rows').change(function() {
var rows = $(this).val();
for (var i = 0; i <= rows; i++) {
$('#form').append('<div><input type="text" name="N' + i + '"></div>');
$('#form').append('<div><select name="S' + i + '"><option value="Text">Text</option><option value="editor">Editor</option></select></div>');
$('#form').append('<div><input type="text" name="V' + i + '"></div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="form">
<input type="text" name="rows" id="rows">
</form>
I know this question has been asked a million times, but I can't seem to get anything to work. I am trying to have the value of the input change when I click one of the links which is working fine, but I'd also like to submit the form automatically as well, without a submit button as soon as a link is clicked. At the moment it doesn't work unless I click the input field. Also I can't add id's to the links. This is what I have so far.
var $Form = $('form'), $Container = $('#container');
$Container.hide();
$Form.on('click', function(p_oEvent){
var sUrl, sMovie, oData;
p_oEvent.preventDefault();
sMovie = $Form.find('input').val();
sUrl = 'https://www.omdbapi.com/?t=' + sMovie + ''
$.ajax(sUrl, {
complete: function(p_oXHR, p_sStatus){
oData = $.parseJSON(p_oXHR.responseText);
console.log(oData);
$Container.find('.title').text(oData.Title);
$Container.find('.plot').text(oData.Plot);
$Container.find('.poster').html('<img src="' + oData.Poster +
'"/>');
$Container.find('.year').text(oData.Year);
$Container.show();
}
});
});
$(function () {
$('a').on('click', function () {
var text = $('#text');
text.val($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
rocky<br>
Back To The Future<br>
Spaceballs<br>
<form id="omdbform">
<input type="text" name="movie" placeholder="movie title" id="text" onchange="this.form.submit();">
</form>
<div id="container">
<h3 class="title">Title</h3>
<span class="year">Year</span>
<span class="poster">Poster</span>
<p class="plot">Plot</p>
</div>
Any help would be greatly appreciated.
Added link examples
filename1.jpg
filename2.jpeg
Change your link function to below :
$(function () {
$('a').on('click', function () {
var text = $('#text');
var fileName =$(this).text();
fileName = fileName.replace(/\.[^/.]+$/, "");
text.val(fileName);
$Form.click();
});
});
try the following code
var $Form = $('form')
$Container = $('#container');
$Container.hide();
$("body").on("submit", "form", function(p_oEvent){
var sUrl, sMovie, oData;
p_oEvent.preventDefault(); sMovie = $Form.find('input').val();
sUrl = 'https://www.omdbapi.com/?t=' + sMovie + ''
$.ajax(sUrl, {
complete: function(p_oXHR, p_sStatus){
oData = $.parseJSON(p_oXHR.responseText);
console.log(oData);
$Container.find('.title').text(oData.Title);
$Container.find('.plot').text(oData.Plot);
$Container.find('.poster').html('<img src="' + oData.Poster +
'"/>');
$Container.find('.year').text(oData.Year);
$Container.show();
}
}); });
$('a').on('click', function (e) {
e.preventDefault();
var text = $('#text');
text.val($(this).text());
$("form").submit();
});
Before using the "on" read http://api.jquery.com/on/
I am creating a 'my account page as part of a larger project. And I am using jquery to get data about which radio button the user has selected. I cannot figure out why it isnt working, i believe the problem is with the jquery used to dictate when a radio button is clicked.
JQUERY:
$("input[name=currentTree]").on('change',function(){
var currentTreeId = $(this).val();
alert ('data:' + currentTreeId);
$.post('selectTree.php',{currentTreeId:currentTreeId} ,function(data,status){
alert(data + ' is the current tree');
});
});
$("input[type=radio][name=currentTree]").change(function(){
var currentTreeId = $(this).val();
alert ('data:' + currentTreeId);
$.post('selectTree.php',{currentTreeId:currentTreeId} ,function(data,status){
alert(data + ' is the current tree');
});
});
Try this:
$('input[type=radio][name=currentTree]').change(function() {
if ($(this).val() == 'typeA') {
alert("Got Type A Radio");
}
else if ($(this).val() == 'typeB') {
alert("Got Type B Radio");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="typea">Type A</label><input id="typea" type="radio" name="currentTree" value="typeA">
<label for="typeb">Type B</label>
<input id="typeb" type="radio" name="currentTree" value="typeB">
$("input[name=currentTree]").on('change', function(){
...
});
Example: https://jsfiddle.net/b80sa4kx/
i want add text-boxes on each click that work well but i need add id for each text-boxes which is added dynamical. i am struggling to give id for it below i give the code used for adding textbox on click
$(function() {
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />//for clickbutton//
<div id="plusicondivbox" class="insidediv " style="margin-top:-53px;"></div>//div for adding txtbox//
Have a global-variable and increment it after every click-event
$(function() {
var count = 0;
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
$('#' + a + "box input:last").attr('id', 'id_' + count);
++count;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>
Or assign inline attribute by concatenation:
$(function() {
var count = 0;
$('.plusicon').on('click', function() {
var textBox = '<input type="text" id="id_' + count + '" class="textbox"/>';
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
++count;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>
Use instead of $(this) $(textbox)
$(function () {
$('.plusicon').on('click', function () {
var textBox = '<input type="text" class="textbox"/>';
var a = $(textBox).attr("id","your_id");
$('#'+a+"box").append(textBox);
});
Please have a look at below code. We can define global counter which will get incremented each time you press plus button so that you will get unique number each time. that number we can use to define unique textbox id as follows:
var textBoxCounter = 1;
$(function() {
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
textBox = $(textBox);
textBox.attr("id", "myTextBox_" + textBoxCounter);
textBoxCounter++;
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>
This code will work for you ,use global variable which will give dynamicid for your textboxes ie(different id for dynamic textboxes):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</script>
<script>
var idCount=0;
$(function() {
$('p').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var a = $('<input>').attr("id","textBox"+idCount);
$(textBoxDiv).append(a);
idCount++;
});
});
</script>
</head>
<body>
<p>Click !</p>
<div id="textBoxDiv" style="width:50%;height:50%">
</div>
</body>
</html>
I know this answer has already been accepted, but I dislike the option of using a global variable just to increment the count for the dynamically added id - when there is a cleaner way of doing it in the function using the length of the .textbox elements. Note that this will give a zero-indexed number for the id that is incremented each time the image is clicked, because each time a textbox is appended - the length of the .textbox class increases by 1. I have put a console.log in there to demonstrate the increasing count:
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var textboxLength = $('.textbox').length;
$('#plusicondivbox').append(textBox);
$('.textbox:last').attr('id', 'id_' + textboxLength);
console.log('id_' + textboxLength);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>
im very new at javascipt (im php developer) so im really confused trying to get this working.
In my web form i have 3 textfields (name, description and year) that i need to let the user add as many he needs, clicking on a web link, also, any new group of text fields need to have a new link on the side for removing it (remove me).
I tried some tutorial and some similar questions on stackoverflow but i dont get it well. If you can show me a code example just with this function i may understand the principle. Thanks for any help!
this is the simplest thing that has come to my mind, you can use it as a starting point:
HTML
<div class='container'>
Name<input type='text' name='name[]'>
Year<input type='text' name='year[]'>
Description<input type='text' name='description[]'>
</div>
<button id='add'>Add</button>
<button id='remove'>Remove</button>
jQuery
function checkRemove() {
if ($('div.container').length == 1) {
$('#remove').hide();
} else {
$('#remove').show();
}
};
$(document).ready(function() {
checkRemove()
$('#add').click(function() {
$('div.container:last').after($('div.container:first').clone());
checkRemove();
});
$('#remove').click(function() {
$('div.container:last').remove();
checkRemove();
});
});
fiddle here: http://jsfiddle.net/Fc3ET/
In this way you take advantage of the fact that in PHP you can post arrays: server side you just have to iterate on $_POST['name'] to access the various submissions
EDIT - the following code is a different twist: you have a remove button for each group:
$(document).ready(function() {
var removeButton = "<button id='remove'>Remove</button>";
$('#add').click(function() {
$('div.container:last').after($('div.container:first').clone());
$('div.container:last').append(removeButton);
});
$('#remove').live('click', function() {
$(this).closest('div.container').remove();
});
});
Fiddle http://jsfiddle.net/Fc3ET/2/
jsFidde using append and live
String.format = function() {
var s = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
var reg = new RegExp("\\{" + i + "\\}", "gm");
s = s.replace(reg, arguments[i + 1]);
}
return s;
}
var html = "<div>" + '<input name="name{0}" type="text" />' + '<input name="description{1}" type="text" />' + '<input name="year{2}" type="text" />' + '<input type="button" value="remove" class="remove" />' + '</div>',
index = 0;
$(document).ready(function() {
$('.adder').click(function() {
addElements();
})
addElements();
$('.remove').live('click', function() {
$(this).parent().remove();
})
});
function addElements() {
$('#content').append(String.format(html, index, index, index));
index = index + 1;
}
Look at this: http://jsfiddle.net/MkCtV/8/ (updated)
The only thing to remember, though, is that all your cloned form fields will have the same names. However, you can split those up and iterate through them server-side.
JavaScript:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#addnew").click(function(e) {
$("#firstrow").clone() // copy the #firstrow
.removeAttr("id") // remove the duplicate ID
.append('<a class="remover" href="#">Remove</a>') // add a "remove" link
.insertAfter("#firstrow"); // add to the form
e.preventDefault();
});
$(".remover").live("click",function(e) {
// .live() acts on .removers that aren't created yet
$(this).parent().remove(); // remove the parent div
e.preventDefault();
});
});
</script>
HTML:
Add New Row
<form id="myform">
<div id="firstrow">
Name: <input type="text" name="name[]" size="5">
Year: <input type="text" name="year[]" size="4">
Description: <input type="text" name="desc[]" size="6">
</div>
<div>
<input type="submit">
</div>
</form>
Try enclosing them in a div element and then you can just remove the entire div.
Try this
Markup
<div class="inputFields">
..All the input fields here
</div>
Add
<div class="additionalFields">
</div>
JS
$("#add").click(function(){
var $clone = $(".inputFields").clone(true);
$clone.append($("<span>Remove</span").click(functio(){
$(this).closest(".inputFields").remove();
}));
$(".additionalFields").append($clone);
});
There are 2 plugins you may consider:
jQuery Repeater
jquery.repeatable
This question has been posted almost 4 years ago. I just provide the info in case someone needs it.