Hello all I want to ask, how to make the numbers automatically using jquery append ..?
I have made it but still failed
My source code is :
<html>
<head>
<title>Help Help</title>
</head>
<body>
<input type="button" id="button" value="Create a number from 1 to N"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('#button').click(function()
{
$('#result').append('<div class="number">Numbers To ......</div>');
});
});
</script>
</body>
<hr>
results from click button
<hr>
<div id=result></div>
Here's one way of doing it:
$('#numbers').change(
function(){
var max = $(this).val();
var sequence;
for(i=0; i<=max; i++) {
var text = $('#result').text();
if (text == false){
text = i;
}
else if (i == max) {
text = text + ', ' + i + '.';
}
else {
text = text + ', ' + i;
}
$('#result').text(text);
}
});
$('form').submit(
function(){
return false;
});
With the following, simplified, html:
<form action="#" method="post">
<label for="numbers">Make a sequence of numbers, from one to <em>n</em></label>
<input type="number" min="0" max="1000" step="1" id="numbers" name="numbers" />
</form>
<div id="result">
</div>
JS Fiddle demo.
Edited to offer a more concise version of the above jQuery code, as offered by mplungjan (in comments, below):
$('#numbers').change(
function(){
var max = $(this).val(),text="";
for(i=1; i<=max; i++) {
text += ', ' + i;
}
if(text) $('#result').text(text.substring(2)+".");
});
$('form').submit(
function(){
return false;
});
Revised/optimised jQuery at JS Fiddle
Answer convertd to community wiki, since earning rep from someone else's efforts just seems wrong....
Related
I want to display the number of input box according to the number inputed in the how many.
My code is not working
<input id="howmany" />
<div id="boxquantity"></div>
Jquery/JavaScript
$(function() {
$('#howmany').change(function(){
for(i=0; i < $("#howmany").value; i++)
{
$('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]" size="50"/>');
}
});
});
I think the problem with the code is it's using .value on a jquery object. I replaced the $("#howmany").value with $("#howmany").val()
I also added a remove function to clear the number of inputs displayed.
Do run the snippet, thanks
$(document).ready(function() {
$('#howmany').change(function() {
$("#boxquantity input").remove();
for (i = 0; i < $("#howmany").val(); i++) {
$('#boxquantity').append('<input name="boxid['+i+']" type="file" id="boxid['+i+']" size="50"/>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="howmany" />
<div id="boxquantity"></div>
Working code, without jQuery.
Built the HTML into a variable and then appended to the DOM in a single go.
var boxes = "";
document.getElementById("howmany").onchange = function() {
boxes = "";
var howmany = document.getElementById("howmany").value;
for(i=0;i<howmany;i++) {
boxes += '<b>File ' + i + '</b>: <input type="file" id="box' + i + ' name="box' + i + ' /><br/>';
}
console.log(boxes);
document.getElementById("boxquantity").innerHTML = boxes;
}
Here is a JSBin link.
Replace value with val. You can replace $("#howmany").value with $(this).val(). Also each input should have unique id
$(function() {
$('#howmany').change(function() {
for (let i = 0; i < $(this).val(); i++) {
$('#boxquantity').append('<input name="boxid[]" type="file" id="boxid[]_' + i + '" size="50"/>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="howmany" />
<div id="boxquantity"></div>
1st: use type="number" for input
2nd: for realtime use on('input',) instead of .change event .change works like .on('blur' ,)
3rd: use .val() instead of .value
4th: you need to reset the #boxquantity div when number is change .. for me it'll be better to save the inputs html to variable then use .html() instead of .append() .. OR you can use $('#boxquantity').html(''); before the for loop
$(document).ready(function() {
$('#howmany').on('input',function() {
var Inputs = '';
for (var i = 0; i < $("#howmany").val(); i++) {
Inputs += '<input name="boxid[]" type="file" size="50"/>';
}
$('#boxquantity').html(Inputs);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="howmany" />
<div id="boxquantity"></div>
I have an input where I want the first character to be #.
That means if the user writes something, it automatically adds the #, or better, the # is already present in the input.
How do I do that? I thought i could do that with jQuery mask but I couldn't make it work.
Here is the code,
$("#your-input-id").keypress(function(e) {
if (e.keyCode != 8) {
var text = this.value;
if (text.length == 0) {
this.value = text + '#';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="#">
<input id="your-input-id" type="text" placeholder="Type a text here..." data-prefix="#" />
</form>
Hope this will work.
This will append # when you will start typing, and it will append everything later to #.
EDIT
$("#your-input-value").keydown(function(e) {
var cur_val=$(this).val();
var field=this;
setTimeout(function () {
if(field.value.indexOf('#') !== 0) {
$(field).val(cur_val);
}
}, 1);
});
See this solution http://codepen.io/bachors/pen/yeJOrg
Running example to meet your needs:
/***********************************************
* #### jQuery Prefix Input ####
* Coded by Ican Bachors 2015.
* http://ibacor.com/labs/jquery-prefix-input/
* Updates will be posted to this site.
***********************************************/
$(".yourClass").focus(function(){var a=$(this).data("prefix"),ibacor_currentId=$(this).attr('id'),ibacor_val=$(this).val();if(ibacor_val==''){$(this).val(a)}ibacor_fi(a.replace('ibacorat',''),ibacor_currentId);return false});function ibacor_fi(d,e){$('#'+e).keydown(function(c){setTimeout(function(){var a=bcr_riplis($('#'+e).val()),qq=bcr_riplis(d),ibacor_jumlah=qq.length,ibacor_cek=a.substring(0,ibacor_jumlah);if(a.match(new RegExp(qq))&&ibacor_cek==qq){$('#'+e).val(bcr_unriplis(a))}else{if(c.key=='Control'||c.key=='Backspace'||c.key=='Del'){$('#'+e).val(bcr_unriplis(qq))}else{var b=bcr_unriplis(qq)+c.key;$('#'+e).val(b.replace("undefined",""))}}},50)})}function bcr_riplis(a){var f=['+','$','^','*','?'];var r=['ibacorat','ibacordolar','ibacorhalis','ibacorkali','ibacortanya'];$.each(f,function(i,v){a=a.replace(f[i],r[i])});return a}function bcr_unriplis(a){var f=['+','$','^','*','?'];var r=['ibacorat','ibacordolar','ibacorhalis','ibacorkali','ibacortanya'];$.each(f,function(i,v){a=a.replace(r[i],f[i])});return a}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="#">
<input id="yourInput" class="yourClass" type="text" placeholder="Type a text here..." data-prefix="#" />
</form>
You can try this,
HTML
<input type="text" class="txtUrl" />
Javascript
$('.txtContent').keydown(function(e) {
var cur_val = $(this).val();
if(cur_val.length == 0) {
$(this).val('#' + cur_val);
}
});
Here is the working fiddle: http://jsfiddle.net/jMH9b/43/
Hope this helps!
As you stated, if there is already a SLASH it should not do anything. Here is the solution
$('#description').bind('input', function(event){
var currentVal = $(this).val();
$(this).val(currentVal.indexOf('#') !== 0 ? ('#' + currentVal) : currentVal)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label name="description">Enter some text</label>
<input type="text" id="description" name="description">
<input id='e' onKeyup='test(this)' value='#'/>
var input = document.getElementById('e');
function test(e){
input.value = e.value.charAt(0) !== '#' ? input.value = '#' + e.value : e.value
}
hope this helps...
I am using this code:
<form oninput="x.value=a.value">Account Info <br>
<input type="text" id="a">First Name<br>
UserName <output name="x" for="a"></output>
</form>
I want i such a way that if the user inputs a word and he has place # before the word without space then how to make the word as a link. Means the tag which happens in facebook. Can it be done with java script and how.
This was just the example to demonstrate i want to intergrate this type in my project as comments. And it will be with php.
Thanks
Here's one example to check. It works with enter keypress and even prevents for adding same tags over again: http://codepen.io/zvona/pen/KpaaMN
<input class='input' type="text" />
<output class='output'></output>
and:
'use strict';
var input = document.querySelector('.input');
var output = document.querySelector('.output');
input.addEventListener('keyup', function(evt) {
if (evt.keyCode !== 13 || !input.value.length || ~output.textContent.indexOf(input.value)) {
return;
}
var tag = document.createElement('a');
tag.appendChild(document.createTextNode(input.value));
if (input.value.startsWith("#")) {
tag.setAttribute("href", input.value);
}
output.appendChild(tag);
input.value = "";
}, false);
<form>Account Info <br>
<input type="text" id="a">First Name<br/>
<output id="result" name="x" for="a"></output>
<button type="button" onclick="changeVal(document.getElementById('a').value)">Click</button>
</form>
<script>
function changeVal(value1){
var dt = value1.split(" ");
document.getElementById("result").innerHTML = "";
for(var t=0; t < dt.length; t++){
if(dt[t].startsWith("#")){
document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" <a href='#'>"+dt[t]+"</a>";
}
else{
document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" "+dt[t];
}
}
}
</script>
Checkout Jsfiddle demo
https://jsfiddle.net/tum32675/1/
You could use a textarea to input and a render to show the output. Then hiding the input and showing the output only. But that's another
story.
If you use a contentEditable div, you can actually insert and render the html from it in the same component. Check it out!
$(document).on("keyup","#render", function(){
var words = $(this).text().split(" ");
console.log(words);
if (words){
var newText = words.map(function(word){
if (word.indexOf("#") == 0) {
//Starts with #
//Make a link
return $("<div/>").append($("<a/>").attr("href", "#").text(word)).html();
}
return word;
});
}
$(this).empty().append(newText.join(" "));
placeCaretAtEnd( $(this)[0]);
});
Here is the Plunker
Thanks for the attention.
I have the following code written,
it can get the text and remove the HTML tags but i cant or dont have the knowledge to write a code that search's the word which user types in a text input and shows the result.
How to do this by HTML and JavaScript ?
<html>
<head>
</head>
<body>
<script type="text/javascript">
function stripHTML(){
var re= /<\S[^><]*>/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, "")
}
</script>
<form>
<textarea name="data1" style="width: 400px; height: 100px"></textarea><br />
<input type="button" value="Remove HTML tags" onClick="stripHTML(this.form.data1)">
</form>
</body>
</html>
Okay, this is a totally rewritten answer which contains some significant changes.
First off, I added a bit to your Html so there would be a place for the text to go once the tags were stripped, as well as a textarea and buttons for searching the cleaned-up text:
<form>
<textarea name="data1" style="width: 400px; height: 100px"></textarea><br />
<input type="button" value="Remove HTML tags" onclick="stripHTML(this.form.data1)">
</form>
<hr>
<h3><b>Output (no HTML tags):</b></h3>
<p id="output"></p>
<hr>
<form>
<textarea name="data2" id="search"></textarea></br>
<input type="button" value="Search Output for Word" onclick="searchMe(this.form.data2)">
</form>
<hr>
Next, I added the following javascript:
// used to remove empty strings from array:
Array.prototype.clean = function(deleteValue) {
for (var i = 0; i < this.length; i++) {
if (this[i] == deleteValue) {
this.splice(i, 1);
i--;
}
}
return this;
};
// Gets rid of the html tags in the first `textarea`.
stripHTML = function(text) {
var re = /<\S[^><]*>/g;
var newText = text.value.replace(re, "");
showText(newText);
}
// Puts stripped text into "output" `p` tag.
showText = function(text) {
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = text;
}
// Searches output text for word in `search` textarea.
searchMe = function(searchWord) {
var text = document.getElementById("output").innerHTML;
if(text) {
// assuming your words will be split by spaces.
var wordList = text.split(' ');
wordList.clean('');
if (wordList.length === 1) {
alert('only one word!');
} else {
var message = '';
for (var i = 0; i < wordList.length; i++) {
if (wordList[i].toLowerCase() === searchWord.value.toLowerCase()) {
if (i === 0) {
message += [wordList[i],wordList[i+1]].join('-');
} else if (i === wordList.length-1) {
message += [wordList[i-1],wordList[i]].join('-');
} else {
message += [wordList[i-1],wordList[i],wordList[i+1]].join('-');
}
message += "---Word#:"+(i+1)+"\n";
}
}
if (message) alert("Prev-This-Next:\n\n"+message);
else alert ('No matches!');
}
} else {
alert('press "Remove HTML tags" first!');
}
}
Hopefully this is close to what you were looking for!
References:
Array.prototype.clean function.
I am creating a system where a user can preview the title and steps of a recipe, i have created a dynamic form so the user can add more steps, the preview works with the title and first step however it seems that i can't get it to work on the second, third, fourth step. Can anyone help me? Any help would be greatly appreciated!
http://jsfiddle.net/uKgG2/
Jquery
var commentNode = $('#lp-step'),
nameNode = $('#lp-name');
$('input, textarea').bind('blur keyup', function () {
commentNode.html($('textarea[name="step_detail[]"]').val().replace(/\n/g, '<br />'));
nameNode.text('Title: ' + $('input[name="name"]').val());
});
var addDiv1 = $('#addStep');
var i = $('#addStep p').size() + 1;
$('#addNewStep').on('click', function () {
$('<p> <textarea id="step_' + i + '" name="step_detail[]"> </textarea>Remove </p>').appendTo(addDiv1);
i++;
return false;
});
$(document).on('click', '.remNew1', function () {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
return false;
});
HTML
<label for="name">Enter recipe name:</label>
<input type="text" name="name">
<br />
<h1>Method</h1>
<div id="addStep">
<p>
<textarea id="step_1" name="step_detail[]"></textarea>
Add
</p>
</div>
<br />
<button type="submit">
Save on xml
</button>
</form>
<div id="live-preview-display">
<div id="lp-name"> </div>
<div id="lp-step"> </div>
</div>
You should bind the keyup or blur event to all the new textareas which are created with add button or link whatever.
Improved
try this :
$('#addStep').on('keyup', 'textarea', function () {
step_id = $(this).attr('id');
step_text = $('#' + step_id).val();
if($('.'+step_id).length > 0) {
$('.'+step_id).text(step_text);
return;
}
p = document.createElement('p');
p.className = step_id;
$(p).appendTo(commentNode);
$(p).text(step_text);
});
it worked! I saved it to fiddle too. you should just update the recipe name and clean this as I said i't very hacky just have to improve it.good luck. http://jsfiddle.net/uKgG2/3/