We Keep Coding

display next span when filling in input of previous span

I have 2 input fields in each span. when the first span of the row is filled with some date, the next span should be visible.
<span name="datalist_2field" class="display_inline xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
</span>
<?PHP
for ($i=1; $i<=10; $i++)
{
?>
<span name="datalist_2field" class="display_none xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
</span>
<?PHP
}
?>
jQuery:
$('input[name="inputfield_smpc"]').keyup(function(){
$(span.xyz).next().removeClass('display_none');
$(span.xyz).next().addClass("display_inline");
});
Unfortunately it doesn't work. What's wrong? Thanks!

I'd recommend the change() event instead of keyup(). The reason you shouldn't use keyup() is because if a user inputs a value using autofill, it will not fire keyup(). However, autofill does fire the change() event, and your verification script will run, and the input will be verified.
As for why it isn't working, you have
.removeClass('display_none')
but the item you're trying to select doesn't have a class name called 'display_none'
if your trying to change the css without using another class you can use something like this
.css("display", "block");

display_none need to be added to second input instead of the span based on your requirement.
Code sample for your first span:
HTML
<span name="datalist_2field" class="display_inline xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right display_none" name="inputfield_evmpd" value=""></input>
</span>
jQuery
$('input[name="inputfield_smpc"]').keyup(function(){
$(this).next().removeClass('display_none');
$(this).next().addClass("display_inline");
});

how to select one single text from multiple text inside html tags with css selector?

<span class="filter-dot hidden"></span>
Brand <span class="filter-count hidden">(0)</span>
<input type="hidden" class="js-filter-count" value="0">
<span class="filter-clear hidden" data-displaytype="checkBox">
Clear
</span>
I want to select only 'Brand',but when i'm using $('div.filter-type-name').text(); it selects 'Brand' as well as 'Clear'. Can anyone please suggest me how can I select 'Brand' only?

Wrap "Brand" into one more specific selector and select it only:
<div class="filter-type-name">
<span class="filter-dot hidden"></span>
<span class="filter-name">Brand</span>
<span class="filter-count hidden">(0)</span>
<input type="hidden" class="js-filter-count" value="0">
<span class="filter-clear hidden" data-displaytype="checkBox">Clear</span>
</div>
Then:
$('div.filter-type-name .filter-name').text()
Otherwise, use childNodes collection to iterate through it and select what you need (Node.TEXT_NODE === 3), but this is not very practical:
$('div.filter-type-name')[0].childNodes

Either give Brand its own surrounding element with a class or id, say "brand-name" and do:
$('div.filter-type-name .brand-name').text()
or keep it as is and do:
$('div.filter-type-name').text().split(' ')[0];

THIS ONE seems to solve it.
Here's the JSFiddle:
https://jsfiddle.net/flamedenise/9dsfbkms/
var text = ($(".filter-type-name").clone().children().remove().end().text()).trim();
alert(text);

Without wrapping your 'Brand' string into a tag. You can use the below method.
Suppose here is your code:
<div class="filter-type-name">
<span class="filter-dot hidden"></span>
Brand
<span class="filter-count hidden">(0)</span>
<input type="hidden" class="js-filter-count" value="0">
<span class="filter-clear hidden" data-displaytype="checkBox"> Clear </span>
</div>
You can use the regular expression match script for checking the text you want.
var str = $('div.filter-type-name').text();
var res = str.match(/Brand/g);
To see the output,
<p id="demo"> </p>
document.getElementById("demo").innerHTML = res;

JQuery detects focusOut even if I still focus on input inside the same div. How to change it?

This is my code:
Javascript:
$(".test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
HTML:
Inputs inside div:
<div class="test">
<input type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I want to detect if user leaves "div.test". Unfortunately, "focusout" works also when I move focus to other object inside this div.
Look at this fiddle: http://jsfiddle.net/Piotrek1/wfukje3g/6/
Click on first input and use Tab to switch through textboxes. "
Lost focus" should appear only if user move out from the div, but it happens always. Why is that and how to change it?

The $ operator returns a collection. You have two inputs inside the <div class="test">. So it matches all elements and children with the .test class.
I think what you want two divs with separate input elements and two different classes OR, use an ID on the actual input element so the $ operator only matches the input id you want this event to fire on. http://jsfiddle.net/wfukje3g/7/
$("#test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
<div class="sometest">
<input id="test" type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>

I have implemented piece of code to handle div focus out
$(document).ready(function () {
var count = 1;
$("#name").focusout(function (e) {
if($(this).has(e.relatedTarget).length === 0) {
$("#output").append("<label style='width:100%;'>"+ count++ +" Name div focus out </label>");
}
});
});
Inputs inside div:
<div id="name" class="test">
<input type="text" id="firstname"/>
<input type="text" id="lastname"/>
</div>
Inputs outside div:<br>
<input type="text" id="dob"/>
<div id="output" style="width:100%"></div>
In this piece of code I have used relatedTarget.
relatedTarget will provide the next focused element If next element is not the child of this div then it is div focus out.
Try this in your code.
I hope this will be helpful.
Thanks
JSFIDDLE LINK - Sample code

How come my input box's value isn't being returned?

Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>

If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});

I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.

Find and replace a number using Javascript

I have a piece of HTML that gets repeated over and over using jQuery (when a user clicks 'add' it creates another block:
<p>
<label for="question[1][text]">Question: <span class="req">*</span></label>
<input name="question[1][text]" id="A_Question_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[1][type]">Type: <span class="req">*</span></label>
<input name="question[1][type]" id="A_Type_1" type="text" class="f_input" />
</p>
I need to increment each number by 1 for each iteration of that block, so that the next block automatically creates:
<p>
<label for="question[2][text]">Question: <span class="req">*</span></label>
<input name="question[2][text]" id="A_Question_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[2][type]">Type: <span class="req">*</span></label>
<input name="question[2][type]" id="A_Type_1" type="text" class="f_input" />
</p>
I'm sure it's simple enough but I'm not experienced enough with Regexs etc. to work out how to go about it. Thanks :)

JQote offers an HTML templating library for JQuery. It is invoked with an object containing its parameters.
<script type="text/html" id="template">
<![CDATA[
<p>
<label for="question[<%= this.iteration %>][text]">Question: <span class="req">*</span></label>
<input name="question[<%= this.iteration %>][text]" id="A_Question_<%= this.iteration %>" value="" type="text" class="f_input" />
</p>
<p>
<label for="question[<%= this.iteration %>][type]">Type: <span class="req">*</span></label>
<input name="question[<%= this.iteration %>][type]" id="A_Type_<%= this.iteration %>" type="text" class="f_input" />
</p>
]]>
</script>
Then as part of your add() function:
<script type="text/javascript">
var globalIteration = 0
function add() {
<...your code...>
globalIteration++;
var obj= {
iteration: globalIteration,
<...any other variables to insert into template...>
};
$('#template').jqote(obj).appendTo($('body'));
}
</script>

You can store template in some hidden div with placeholders for ids (something like #id#).
Then, you can replace placeholders with actual id in javascript. Something like
var html = $('#template').html().replace('#id#', id);
list.append(html);
The next id can be calculated from the current amount of children.
var id = list.children().length + 1;

Something like this should work:
$(document).ready(function() {
$container = $('#container');
$button = $('#button')
.data('clicked', 0)
.click(function() {
var clicked = $button.data('clicked');
$container.append('<p><label for="question[' + clicked + '][text]">Question: <span class="req">*</span></label><input name="question[' + clicked + '][text]" id="A_Question_' + clicked + '" value="" type="text" class="f_input" /></p>');
$button.data('clicked', clicked + 1);
});
});

It depends on how you are binding your function. If you are binding it in javascript I would probably use the number as a fake property of the add link.
Something like
'Add
Replace [1] with $(this).attr('question_number') in your javascript and at the end add $(this).attr('question_number', nextId)
A better solution might be to tack it on to the id of the link and change the id when the javascript finishes, not a good solution if you are binding by id though.
If you are binding the onclick directly in the html using something like
<a href="javascript:;" onclick="my_func();">Add</a/>
modify your function to take a parameter and change the paramter at the end of the javascript similar to above. I also like Andy's solution.

Here is how I have done it http://pintum.com.au/goCruising/details.html#tabs-2
Click the add button.
It uses jQuery, jtemplates plugin and JSON. Just look at the source for how it works.