Develop Reference

How to select text value from a variable div id tag?

<div id="Modal<%= index %>">
<div>
<input type="text" id="textvalue">
</div>
</div>
In the above code I need to get value of text field but the problem coming is the div id is variable according to index i.e it may be 'Modal0' or 'Modal1' or 'Modal"n"' depending on value of index. So, if i write $(#textvalue).val() then it is always giving the text entered in id 'Modal0'. What will be solution for this? And the big issue is that I can not use 'Modal0' or 'Modal1' ... id because that is generated dynamically.

you can use closest jquery function like that make dive id is different.
closest will fetch the parent tag.
$(diveid).closest("diveid").inoutid.val();

You should include the parent div in the query as well, for example:
$("#Modal0 input").val();

First you should select the div you´re looking for , then find it's text-input
$('#Modal0').find('#textvalue').val();
$('#Modal1').find('#textvalue').val();

Im not sure if this is what you're trying to do, but if the clicking of buttons will only affect the ID of the same container div of the input.textvalue element then this will do the trick:
$('div[id^=Modal] #textvalue').val());
DEMO:
$(function(){
$('a').on('click', function(e) {
const ID = $(this).attr('href')
const counterID = ID.substring(ID.length-1);
const targetID = $('div[id^="Modal"]').attr('id');
$('div[id^="Modal"]').attr('id', 'Modal'+(counterID-1));
console.log('DIV ID:', 'Modal'+(counterID-1));
});
$('button').on('click', function(){
console.log('DIV ID: ' + $('div[id^=Modal]').attr('id'), ' ,TEXT VAL: ' + $('div[id^=Modal] #textvalue').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Modal 1
Modal 2
Modal 3
<div id="Modal">
<div>
<input type="text" id="textvalue">
</div>
<button>submit</button>
</div>

Jquery replace string in a textarea

I am trying to replace a string value in textarea while typing in textbox with jquery. I used keypress event to try achieving that. What may be the issue here in this fiddle?
<input type="text" id="textbox" />
<textarea id="txtArea">This is a sample test.</textarea>
jquery code
$("#textbox").keypress(function () {
var txtAreaValue = $('#txtArea').val();
var txtAreaValueAfterreplace = txtAreaValue.replace('sample', $(this).val());
$('#txtArea').val(txtAreaValueAfterreplace);
});

The main problem is that, when using keypress you are getting the value of the input box before it is set, so nothing appears. However even if you change it to keyup you still will only get one value because once 'sample' is replaced it is gone so therefor it cannot be replaced again.
A new logic needs to be considered if you are wanting to replace sample with the full value of the textarea. Consider the following example:
$("#add").click( function () {
$( '#txtArea' ).val( $('#txtArea').val().replace( 'sample', $("#textbox").val() ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox" /><br>
<input type='button' id='add' value='add'>
<textarea id="txtArea">This is a sample test.</textarea>
Or we replace when the user stopped typing
var typing;
$("#textbox").keyup( function () {
// Stop the change from being made since they typed again
clearTimeout(typing);
// They typed, so set the change to queue up in a 3rd of a second
typing = setTimeout(function(){
$( '#txtArea' ).val( $('#txtArea').val().replace( 'sample', $("#textbox").val() ) );
},350);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox" /><br>
<textarea id="txtArea">This is a sample test.</textarea>

You want to look for keyup, not keypress (you want to make sure you get the whole string.
You are trying to put the textbox value right? You're looking for the textarea value in line two of the javascript.
If you replace sample on the first key stroke, there won't be anything to replace the second key stroke.
You can simplify lines 3 and 4 into one line.
replace can only be used on a string. So you need to get the value first, if you're going to do it that way. txtAreaValue.val().replace('sample', $(this).val());
Feel free to play around with it on this fiddle: http://jsfiddle.net/snlacks/abc6skp9/
$("#txtBox").on('keyup', function () {
var txtValue = $(this).val();
$('#txtArea').val("this is a " + txtValue);
});
If you have a longer string, replace might work better, but you still need to store the full string somewhere.
var longString = "some really long string... sample... more...";
$("#txtBox").on('keyup', function () {
var txtValue = $(this).val();
$('#txtArea').val(longString.replace('sample', txtValue);
});

Linking form and button to javascript command

I am trying to make a simple form and button work. I have linked to a JS Fiddle here View JS Fiddle here
<form>
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button type="submit" id="WFFsearch">Search</button>
</form>
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').text();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
I want to be able to enter "nba" without the quotation marks and click the search button, then have a new window which generates the following link http://espn.go.com/nba/statistics. The first part and the last part of all the urls will be the same, it's just the middle that changes (nba, nfl, mlb). Any help would be greatly appreciated, thanks!

$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
You need val() property, since input is in question, not text(). https://jsfiddle.net/1c93pqj0/2/

you wanna use the .val() instead of .text() as text gets the value between 2 tags <div>here is some text</div> and val gets the value <input value="some value"/>

EzPz! This is a very simple task. First of all though, since you're using jQ to establish your button's click event, you can either drop the attribute type="submit", OR (recommended), create your event on the form's submit. If it were me, I'd id the form and use the forms submit, so that you don't need any alters to your button type="submit" and enter key can still be used in search box to submit the form.
Also, you're trying to .text on an input. Input's have value. In jQuery you can get or set that value by calling .val() instead.
The code:
$('#frmGetStats').on('submit', function (e) {
e.preventDefault();
var searchInput = $('#search').val(),
url = "http://espn.go.com/" + searchInput + "/statistics",
win = window.open(url);
alert("In this sandbox, new windows don't work. \nHowever you can see the link is \n[" + url + "]");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="frmGetStats">
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button id="WFFsearch" type="submit">Search</button>
</form>

To get the value of an input field, use .val(). .text() is for the text in a DOM element.
Clicking on the submit button submits the form by default, which reloads the page and kills the script. You need to return false from the event handler to prevent this.
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
return false;
});
DEMO

find and change ::123:: text inside a textbox into an image

i'm making a little smiley script for my site and i wonder how do i use jquery/javascript to find ::id:: inside a sentence inside an input box(text).
Example:
I have typed ::123:: into my text box and when i click enter jquery will find for it and get the id out of it which is 123 , then turn it into an image.
<input id="tb" type="text" value=""></input><input id="btn" type="submit" value="Send"></input>
<div id="display">
image will be displayed here
<img src="...domain/image?id=123">
</div>
jQuery:
var inputval = $('#tb').val();
$(document).ready(function(){
$('#btn').click(function(){
//get the id from inputval(variable)
});
});
P/S it will also check for if it's intergar.

Use String.replace with a regex and group reference:
var strWithImgs = inputval.replace(/::(\d+)::/g, "<img src='...domain/image?id=$1'>")
$("#display").html(strWithImgs);
The $1 means "the first expression in parentheses", which is the run of digits.

You could do
$('#tb').keyup(function(e){
if(e.which === 13){
var value = this.value.replace(/::/g, '');
if(jQuery.isNumeric( value )){
$(this).next().find('img').attr('src' , "...domain/image?id="+value)
}
}
});
this means thatif the user press return the value inside the textfield will be parsed, and after removing the ::, if it's a number will be used for the src of the img

JQuery: Selecting elements with unique class AND id

I have this html code:
<div class="category" id="154"> Category </div>
<div class="category2" id="156"> Category2 </div>
<div class="category3" id="157"> Category3 </div>
<div class="category4" id="158"> Category4 </div>
<input type="text" />
So in example if I write a id in text box, how to select div .category with this ID and get inner HTML text. With jQuery

so you only need to use the ID as this is a unique value (or should be)
var html = $("#154").html();
NOTE: If you do have duplicate ID values in use then it is important to note that JQuery will only select the first one.
if you want to do this when a textbox value is entered you could do this on the textbox change event...
$("input").change(function(){
var id = $(this).val();
var element = $("#" + id);
if(element){
var html = element.html();
//do something with html here
}
});
NOTE: you may want to put an ID value on your textbox to ensure you get the correct control
Although I strongly suggest you find a way around using duplicate ID values, you could have a function like this to get the DIV you want...
function GetContent(className, id) {
var result = null;
var matchingDivs = $("." + className);
matchingDivs.each(function(index) {
var div = $(matchingDivs[index]);
if (div.attr("id") == id) {
result = div.html();
}
});
return result;
}
Click here for working example

I recommend you give the textbox an ID, in case you add other textboxes to the page.
But if you only have the 1 text input, the following would work:
var id = $('input:text:first').val();
var innerHtml = $('#' + id).html();
Here is a jsFiddle that will alert the html using this technique whenever the text in the textbox changes.

$("#id.class")
will select the necessary element by both class and ID (replacing id and class with their respective names, of course).
Adding .html() to the end will get you the content.
i.e:
$("#id.class").html()