Remove focus and click event - Jquery - javascript

Good day.
Create 5 divs dynamically with jQuery. These Divs are created after I type in a text type Input.
After creating these divs have to click on one of them and pick up the text, and add this text in the input that entered the text.
But the problem that when I type the text the first time, I give a FOCUS on input, so when I click on any div created by me, the following happens:
1 - The first click, remove the FOCUS
2 - In the second click it sends the value to the input
You see I have to give 2 clicks, but I like to do that in just one click ...
$('.tags_add').on("click",".tags_vdd", function(){
//$("input[name=tags]").trigger("blur");
//$(".tags_vdd").trigger("click");
Pegar_dado = $(this).text();
$('input[name=tags]').val(Pegar_dado);
});
<div class="tags_add">
<span class="tags_vdd">ccc</span>
<span class="tags_vdd">CCCCCCCCCCCCCCCCCC</span>
<span class="tags_vdd">cxcc</span>
<span class="tags_vdd">cc</span>
<span class="tags_vdd">cxc</span>
</div>
<input type="text" name="tags" placeholder="Tags" class="tags valid"/>

I can't reproduce your issue : JsFiddle
After loading the page, I type something in the input, then I select a div and in one click it
$('.tags_add').on("click",".tags_vdd", function(){
Pegar_dado = $(this).text();
$('input[name=tags]').val(Pegar_dado);
});

Related

How can I retrieve a value in jquery with a button click?

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.

Add class to if text contains special word to a div with a class

I stuck with a simple code but cant figure it out.
Im working on a special form, where you have one select box with a lot of options. This select box is not visible, I just need it to get what the user has picked. The "select box" the user sees is made out of divs and spans. When the user picks an option, the text in an element will show the selected option. The value also changes the selected option in the hidden select box. (I know, its confusing )
This part above works fine. The main problem I got is that different select options show different boxes with more input field. Now I want wanted to show those boxes if the span "selected" contains a special word and add a news class to the box. But many codes I found didn't worked for me.
if($('.selected:contains("Eck")').length) {
$(".d1").addClass("show-form");
}
Here is some html from my form:
<div class='selectBox'>
<span class='selected'></span>
<span class='selectArrow'>&#9660</span>
<div class="selectOptions" >
<span class="selectOption" data-value="Rund" value="Rund">Rund</span>
<span class="selectOption" data-value="Eck" value="Eck">Eck</span>
</div>
</div>
And this box should get the new class "show-form". But it didn't.
<div class="box d1">CONTENT</div>
what about something like this
$('.selectedOption').click(function(){
$selected = $(this).val();
switch($selected) {
case 'Eck':
$(".d1").addClass("show-form");
break;
case 'Rund':
// do something else
break;
}
});

how to copy a text of span

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);
});

When focusing clone the last input and append

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");
});

Element added to DOM but doesn't display on screen

Basically my problem is that when i add an element from the javascript (using jquery) the element that i added shows up in the web inspector but doesn't display in the browser at all.
What i am trying to do is simulate something i liked about google+ when it first came out, which is when you want to the user to enter a list of item, you provide them with one text field and once they start to add something to that text field then instantly after the first character is typed a new text field with appear under that. So I'm my code, i have the user entering a series of goals they want to achieve, i provide them with a single text field (or multiple if the user is editing the list they previously made) and once the last text field has data then it will programmatically create a new text field.
HTML:
<div class="field-group clickToAddGroup">
<label>Goals: </label>
<div class="input">
<input type="text" name="goals" value="Goal1">
<input type="text" name="goals" value="Goal2">
<input type="text" name="goals" value="Goal3">
<input type="text" name="goals" value="Goal4">
<input type="text" name="goals" placeholder="Type to add Goal" class="clickToAdd">
</div>
</div>
Javascript:
$(".clickToAdd").live('keyup',function(){
console.log("key up triggered");
if( $(this).val() != '' )
{
console.log("cloning in process");
var theClone = $(this).clone().val(''); // Set the new element to null
theClone.appendTo( $(this).parent() ); // Clone Parent
$(this).removeClass('clickToAdd'); // Remove the click to add class
console.log("clone complete");
}
console.log("key up finished");
console.log("----");
});
$('.clickToAddGroup input').live('blur', function(){
if( $(this).val() == '' && !$(this).hasClass('clickToAdd') )
$(this).remove();
});
Now the code above actually works, however when the page first loads when i click (or tab to) the last text field (one that has the clickToAdd class) and begin typing, i see in the web inspector that the javascript ran correctly and created the new field and placed it where it should, but i don't actually see it on the screen. But when i take the content that i had just wrote in the text field, delete it, and lose focus (triggering 'blur') the text field is deleted and then i can see the textfield that was shown. From this point on when i add content to the last field (one with the clickToAdd class) it works 100% perfectly, it adds the element and is visible via both the web inspector AND is displayed on screen.
Edit: I copied the code to jsfiddle (included css i am using as well) and tried it there and it happens to work perfectly as intended without the issue i am having. http://jsfiddle.net/qz2QK/2/
Edit 2: Added "var" to the line "var theClone = $(this).clone().val('');" so that its not implicitly a global variable.

Categories