So I want to show div's text to input value if button clicked. But if the text includes single quote, It doesn't show properly.
<div id="content_comment">It's Yours!</div>
<button id="btn_comment_edit">Edit</button>
// jQuery
$('.btn_comment_edit').click(function(){
$('#content_comment').replaceWith("<form method='post'><input type=text value='"+$('#content_comment').text()+"'></form>")
});
// result
// It' (doesn't show after single quotes)
It should be It's Yours! in input value. How can I display whole statement with single quotes?
You can do something like this
$('#content_comment').replaceWith("<form method='post'><input type=text value='\'' +$('#content_comment').text()+'\'></form>")
The problem is with the usages of single and double quotes. You are also using .btn_comment_edit instead of #btn_comment_edit. Try like following.
$('#btn_comment_edit').click(function () {
$('#content_comment').replaceWith('<form method=post><input type=text value="' + $('#content_comment').text() + '"></form>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_comment">It's Yours!</div>
<button id="btn_comment_edit">Edit</button>
This is how you can do the encoding.
$('.btn_comment_edit').click(function(){
var a = $('#content_comment').text();
a = addslash(a);
$('#content_comment').replaceWith("<form method='post'><input type=text value='"+a+"'></form>")
});
function addslash(iid){
str=iid.replace(/"/g,'\"');
str=iid.replace(/'/g,'\'');
return str;
}
Related
I currently have a little HTML window I use at work to automatically Capitalize All, Alphabetize, and Capitalize first letters of contents entered into a <TextArea> on the HTML. I was hoping to find a method to add an additional "Comma" Button (<input type="submit">) - so it will automatically add a comma to the end of each line in the <TextArea>.
This should do what you are trying to accomplish.
function comma(){
var textarea = document.getElementById('textarea').value;
var res = textarea.replace(/(\r\n|\n|\r)/gm,",\r\n");
console.log(res);
document.getElementById('textarea').value = res;
}
textarea {
width: 500px;
height: 500px;
}
<textarea id="textarea"></textarea>
<button onclick="comma()">Comma</button>
Steps
Put the content of the textarea in a variable, say 'textareaContent'
Find all occurrences of "\r\n" and replace with ";\r\n"
EDIT.
HTML + JS
<script>
function addComma()
{
// get textarea's content
var content = document.getElementById('myTextArea').value;
// replace all newline's with ';\n'
var replaced = content.replace(/\n/g,';\n');
// rewrite the content with the new content
document.getElementById('myTextArea').value = replaced; }
</script>
<textarea id='myTextArea' rows='5' cols='30'>
First Line
Second Line
Third Line
</textarea>
<input type='button' onclick='addComma()' value='Add Comma' />
Anyways, this is an example, in live action. See the fiddle here -- http://jsfiddle.net/u6b7yz21/
Cheers.
Is it possible to modify the value of each textfield present in a webpage, based on the original value, using jQuery or JavaScript?
For example, suppose I have 50 textfields in a page. I want to remove whitespace from the beginning and end of each textfield’s value. I don’t find it to be a good idea to call the function for every textfield individually. How can I do it without calling a function for each textfield?
Can just use val() with a callback argument. It will loop over all elements for you:
$('input[type=text]').val(function( index, originalValue){
return $.trim(originalValue);
});
val() API docs
You can execute this code:
$('input[type=text]').each(function (i, e) {
var $this = $(e);
$this.val($this.val().trim());
});
Get all the inputs from the page using jquery then run a loop, and for each element trim the value
<body>
<input type="text" value=" abc " >
<input type="text" value=" def " >
<input type="button" id="remove" value="Remove">
<script type="text/javascript">
$(document).ready(function(){
$('#remove').click(function(){
var inputs = $('input[type=text]');
$.each(inputs, function(index,input){
$(input).val($(input).val().trim())
});
});
});
</script>
</body>
I am trying to append the value of a div or a input box to my text area. I have this working no problem but if i clear the contents of the text area first with a Jquery action it doesnt allow me to use my append features.
E.g.
<script type="text/javascript">
$(document).ready(function() {
$("#Column1").click(function () {
$("#sql").append($("#Column1").val())
})
$("#Column2").click(function () {
$("#sql").append($("#Column2").html())
})
$("#reset_sql").click(function () {
$("#sql").val('SELECT ')
})
</script>
<div> <input type="checkbox" name="column1" id="column1" value="`Column1`"> column1 </div>
<div id="Column2"> Column2 </div>
<textarea rows="10" cols="80" name="sql" id="sql"><? echo $sql ;?></textarea>
<input type="submit" value="submit" />
<input type="button" value="reset sql" id="reset_sql" />
The input and div lines above are just generic examples but relate exactly to what i'm trying to do.
I dont understand that when i clear the text area with javascript that my appends wont work. I get no JS errors in firefox error console.
thank you
You have several issues with your code: you haven't closed your document.ready callback, you are using the incorrect case when refering to your ID's, and you're using some of the jQuery methods incorrectly. For example, append() appends HTML to an element, whereas you want to update the value.
Your logic isn't quite correct either, since columns won't be removed when you uncheck a checkbox, and the columns won't be comma delimited (it looks like you are building a SQL string here).
I believe something like this is what you're looking for:
$(document).ready(function() {
var $sql = $('#sql');
var initialValue = $sql.val();
$("#column1, #column2").on('change', function () {
var cols = [];
var checked = $('input[type="checkbox"]').filter(':checked').each(function() {
cols.push($(this).val());
});
$sql.val(initialValue + ' ' + cols.join(', '));
})
$("#reset_sql").on('click', function () {
$sql.val(initialValue)
})
});
Working Demo
Your checkbox has an id of 'column1', but your event handler is $("#Column1").click(function () {.
Case matters! Either change the id to 'Column1' or the event handler to look for $('#column1').
Demo
I have a list of URLs:
localhost/action/add/234
localhost/action/add/244
localhost/action/add/334
localhost/action/add/254
In front of these values there is a text box, and when a value is typed into the box I want to append it to the end of the URL.
localhost/action/add/234/test text1
localhost/action/add/244/test text2
localhost/action/add/334/test text3
localhost/action/add/254/test text4
Can someone explain me how can I do it? I found out that its possible to do it using .val() but I'm unsure how to use it.
If you want it to update immediately:
<script>
$(function(){
var a = $('#url').text();
$('#textbox').keyup(function(){
var b = $('#textbox').val();
$('#url').text(a + '/test ' + b);
$('#url').attr('href', a + '/test ' + b);
});
});
</script>
<input id='textbox' type='text'></input>
<a href="localhost/action/add/234" id='url'>localhost/action/add/234</a>
The key things here are
use the .keyup() event to run the function whenever a keyboard key is released
modify the .text() of the url element on keyup
modify the 'href' attribute of the url element so that the link matches the text
Normally .val() is used to set/get the value of input elements, like the text box ^, or a dropdown
Assuming, you want to append the text that you typed in the textfield to the href (URL).
I think we can make it more simple.
Here is the working solution.
$(document).ready(function(){
$('#search').on('click', function(e) {
var search_url = e.originalEvent.currentTarget.href; //or else you can grab the URL anywhere from your DOM;
e.originalEvent.currentTarget.href = search_url + $('#search_term').val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search_term" placeholder="Search..StackOverflow" />
Search
$(function(){
var currVal = $('.url').text();
$('input[type="text"]').keydown(function() {
$('.url').text(currVal.trim()+$(this).val().trim());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="url">
localhost/action/add/234
</span>
<input type="text" id="search_term" placeholder="blabla" />
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