How To Add Http String To Input Field Using JQuery

Posted By Bajarangi soft , Posted On 08-01-2021

Using JQuery we can add http string if user did not add it for example when user enter url into input field automatically add http to url .so today we discuss how to do it.

How To Add Http String To Input Field Using JQuery

Let learn
Step 1:Create Index.php file in xampp\htdocs\demo and implement html code in it

<!DOCTYPE html>
<html>
<head>
    <title>How To Add Http String To Input Field Using JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    .bg_form {
        background: lightblue;
        border-radius: 20px;
        padding: 10px;
    }
</style>
<body>
<div class="container">
    <div class="text-center">
        <h1>How To Add Http String To Input Field Using JQuery</h1>
    </div>
    <h2></h2>
    <div class="col-md-12 bg_form">
        <div class="col-md-6">
            <h4>Enter Your Url</h4>
            <input id="url" type="text" class="form-control " name="url" value=""
                   autocomplete="url" autofocus required="">
        </div>
    </div>
</div>
<br>
</body>
</html>

Step 2:After implementing html code Now implement below jquery script to index.php to add string like "http://" or "https://"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#url").change(function () {
            if (!/^http:\/\//.test(this.value) && !/^https:\/\//.test(this.value)) {
                var value = "http://" + this.value
                $("#url").val(value);
            }
        });
    });
</script>

Complete Code For Adding Http String To Input Field Using JQuery.

<!DOCTYPE html>
<html>
<head>
    <title>How To Add Http String To Input Field Using JQuery</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    .bg_form {
        background: lightblue;
        border-radius: 20px;
        padding: 10px;
    }
</style>
<body>
<div class="container">
    <div class="text-center">
        <h1>How To Add Http String To Input Field Using JQuery</h1>
    </div>
    <div class="col-md-12 bg_form">
        <div class="col-md-6">
            <h4>Enter Your Url</h4>
            <input id="url" type="text" class="form-control " name="url" value=""
                   autocomplete="url" autofocus required="">
        </div>
    </div>
</div>
<br>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#url").change(function () {
            if (!/^http:\/\//.test(this.value) && !/^https:\/\//.test(this.value)) {
                var value = "http://" + this.value
                $("#url").val(value);
            }
        });
    });
</script>