I was wondering if I could get some help with jquery. This is the html I have now:
http://jsfiddle.net/spadez/9sX6X/4/
<form name="input">
<input id="current" type="text" name="content" placeholder="content">
<input type="submit" value="Add" id="add">
</form>
What I want to do is when the user clicks "add" and as long as the input field isnt empty, I want to do the following:
Change that input field id to "accepted" and remove the add button
next to it and replace it with a remove button
Add an input field below the original one with the id to "current"
with an add button next to it
I want this process to happen every time the add button is clicked so more and more input boxes can spawn under each other. As far as I got was trying to spawn input boxes but even that doesn't work.
function addField(){
$('#add').append('<input type="text" name="myinput" />');
return false;
}
Can anyone please show me how this should be achieved.
I think it isn't a good solution to clone existing elements every time. Instead I would suggest cloning ... well... clones )) The original input and button remain the same, only visually shifted.
Is this behavior needed? - http://jsfiddle.net/skip405/9sX6X/6/
Use before()
$('#add').before('<input type="text" name="myinput" />');
since you need to append the new input just before your submit button (and not into it, which is not possible here, since it's an input element)
A working example http://jsfiddle.net/steelywing/9sX6X/12/
$('form').on('click', '.add', function () {
var row = $(this).closest('div'),
new_row = row.clone();
row.find('input:text').addClass('accepted');
row.find('.add')
.removeClass('add')
.addClass('remove')
.val('Remove');
new_row.find('input:text').val('');
row.after(new_row);
}).on('click', '.remove', function () {
$(this).closest('div').remove();
});
Related
I want to allow users to dynamically create as many input fields as they want within the format that I supply to them.
I need the features below:
There should be a button to add more fields
There should be a button next to each field to delete the field
Is there any method which satisfies my needs?
I've already used the append() method in JavaScript but I was not able to delete the fields using a button next to it.
onclick on a button:
$( '#some_div' ).append( '<input type="text" name="tel[]" class="form-control">' );
I've heard something about grids but could not find anything relevant.
append() will work for adding fields. To subtract fields you could use remove().
One possible method of performing this action is done by wrapping the field and the delete button in a div, making it easy to target the entire group for deletion. jQuery's closest() finds the closest element up the DOM that matches your search, relative to the location you're searching from.
$("#add-field").click(function() {
$("#some_div").append('<div class="input-block"><input type="text" name="tel[]" class="form-control"><input type="button" class="remove-field" value="-"></div>');
});
$(document).on("click", ".remove-field", function() {
$(this).closest(".input-block").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="add-field" value="+ Add Field">
<div id="some_div"></div>
I have the following code:
jQuery
$(document).ready(function(){
$('input[name="new_tax_button_post_tag"]').click(function(){
value = $('input[name="post_tag"]').val();
$("#fieldID3").val(value);
});
});
and I want it change:
HTML
<input type="text" id="fieldID3" name="changeme"value="n/a">
The problem is that the click itself is what creates the value, so I have to click the button twice to get the desired results. The first click creates the value. The second click sets the value in the field.
How do I make it so that it does it in one click?
It's like which came first the chicken or the egg.....
I write jquery on the basis of ID of button and textbox,
and also remove value from following input field,
<input type="text" id="fieldID3" name="changeme">
$(document).ready(function(){
$("#new_tax_button_post_tag").click(function(){
value = $("#post_tag").val();
$("#fieldID3").val(value);
});
});
I hope this useful for you.
I copy need the dynamic text of a spam that is generated by a slider that the user sets. It must be copied to a value of an input.
I tried that, and didnt work:
<h4>Valor do consórcio: <span class="slider-value quote-form-element valor-carro1" data-name="Valor | Automóvel" name="Valor" data-slider-id="consorcio-auto">R$ <span id="THAT_VALUE"></span></span>
</h4>
<div class="slider" data-slider-min="20000" data-slider-max="100000" data-slider-start="23192" data-slider-step="1000" data-slider-id="consorcio-auto"></div>
<h4>Seus dados:</h4>
<input type="hidden" id="THAT_FIELD" name="THAT_FIELD" value="" />
<h4>Seus dados:</h4>
<input type="hidden" id="valorcarro" name="valorcarro" value="" />
script
$(function(){
var valorcarro = $('#THAT_VALUE').html();
$('#THAT_FIELD').val(valorcarro);
});
example in this page in the button on menu "Simulação".
The script just does not copy because the value is generated later and the user can still change
You need to use an event to fire your code after the slider value has changed. This is how you do it with a bootstrap slider.
$('.slider').on('slideStop', function () {
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
To get the text of an element, use text()
For example
$("span").text();
you can try this code.
jQuery(function(){
var valorcarro = jQuery('#THAT_VALUE').text();
jQuery('#THAT_FIELD').val(valorcarro);
});
Actually, #Pamblam's response is better than mine. I was assuming the .slider class was for regular range inputs, which fire the 'change' event when their value changes, but it looks like it is in fact a bootstrap slider, which fires the slideStop event instead. Regardless, the code here listens for a change in the slider value, and when it is triggered, takes the text from the #THAT_VALUE span (from op's code) and sets the value of the #THAT_FIELD field to whatever it is :
$(".slider").change(function(){
var valorcarro = $('#THAT_VALUE').text();
$('#THAT_FIELD').val(valorcarro);
});
I need to send a form off to where a single hidden field is comprised of two of the other fields that will be dynamically populated by a user (post/zip code and first line of address) where after regular expression only the numbers remain "123|456".
I have attempted to start, using the code below, where I monitor the output in the console. I have managed to dynamically edit a textfield so that all that is shown are the numbers but this is not suitable for a user. So I was trying to store the edited textfield data into the hidden field whilst leaving the complete line of address but I could not see how this can be done.
Also, can someone explain why if I remove the commented line the variable is not stripped of any letters albeit just 1?
$(document).ready(function() {
$("#testMe").on('propertychange change click keyup input paste', function() //attaching multiple handlers
{
var removedText = $("#testMe").val().replace(/\D/, '');
$("#testMe").val(removedText); //only removes once if removed
console.log(removedText);
}
);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="hidden" id="hide" value="">
<input type="text" id="testMe" value="">
<span id="test2"></span>
The question was kind of unclear to me, but I did my best to answer.
https://jsfiddle.net/ccu6j6xu/
<input type="hidden" id="hide" value="">
<input type="text" id="zip" value="">
<input type="text" id="address" value="">
<span id="test2"></span>
In the HTML, all I did was add another input, because I think that's what you wanted to do?
$(document).ready(function() {
$("#zip, #address").on('propertychange change click keyup input paste', function() {
var concatText = $("#zip").val().replace(/\D/g, '') + "|" + $("#address").val().replace(/\D/g, '');
$("#test2").text(concatText);
$("#hide").val(concatText);
});
});
Then in the JavaScript, I changed the selector to match the new inputs, and then I changed the function.
The first line of this function defines a variable concatText to hold the values of each input concatenated with a | character between. Each one has regex applied to remove the letters for the final value. Then the next line changes the value of the span to display, and the final line applies this value to the hidden input.
Again, the question was kind of confusing to me, but feel free to comment and I can help some more :)
EDIT: reread the question, I think this better answers
I want to create a new input when clicking to the last input. Whenever I focus the last input I want to creat another one and append to it under the previous one. And I want to increase the name attr 1 by 1.
Here's the html,
<div id="ingredientsCtr" class="hidden">
<label class="label">Malzemeleri yazın</label>
<input name="ingredient1" type="text" class="req-string req-min default-input" rel="ingredientsCtr"/>
</div>
This is the jscript code
$("#ingredientsCtr").find("input:last").on("focus", function(){
$(this).clone(true).appendTo("#ingredientsCtr");
});
It clones everyinput when I focus on I just want to duplicate the last one.
try this
$("#ingredientsCtr").find("input:last").on("focus", function(){
$(this).clone().appendTo("#ingredientsCtr");
});