Showing posts with label jquery keyup. Show all posts
Showing posts with label jquery keyup. Show all posts

Wednesday, April 05, 2017

jQuery - How to convert a Title to a URL slug

Title : <input type="text" name="title" id="title"><br>
Slug  : <input type="text" name="slug-title" id="slug-title">


var slug = function(str) {
    var slug1 = '';
    var trimmed = $.trim(str);
    slug1 = trimmed.replace(/[^a-z0-9-]/gi, '-').
    replace(/-+/g, '-').
    replace(/^-|-$/g, '');
    return slug1.toLowerCase();
}
       
$("#title").keyup(function(){       
    var Text = $(this).val();
    $('#slug-title').val(slug(Text));             
});

$("#slug-title").keyup(function(){       
    var Text = $(this).val();
    $('#slug-title').val(slug(Text));             
});

Output:
Title: 123@345#456&421*322
Slug : 123-345-456-421-322

Demo : https://jsfiddle.net/vasashiner/Ltg06sax/

Thursday, July 30, 2015

Multiply two values without clicking a button - Jquery

Multiplies both the text input numbers and shows the result in the third box .
User can enter a value in the 2nd text box so it automatically multiplies and shows the result in the 3rd textbox without any button.

HTML CODE:

<input type="text" name="input1" id="input1" value="5">
<input type="text" name="input2" id="input2" value="">
<input type="text" name="output" id="output" value="">

Script:
<script>
$(function(){
   $("#input2,#input1").keyup(function () {

    $('#output').val($('#input1').val() * $('#input2').val());

  });
}); 
</script>

OUTPUT:

http://jsfiddle.net/sarathsprakash/YFgkB/10/