CODEWITHSUNDEEP
javascriptjqueryajax
user2970730
user2970730

Reputation:

AJAX post request and string concatenation

I am using jQuery/AJAX to do a post request. I am trying to take the input from the first textbox and concatenate that with a url and display result in the second textbox. Example, If user types in asdf the ajax function will then make the post and the result will display as http://www.example.com/sdf/. I have two problems, As mentioned early I have a ajax function that it is performing post but no result is diplaying in the html(it does show in the firebug console). Second, How can I concatenate the input into the url. Live Site

<script>
$(document).ready(function () {
    var timer = null;
    var dataString;

    function submitForm() {
        $.ajax({
            type: "POST",
            url: "/concatenate/index.php",
            data: dataString,
            dataType: "html",
            success: function (data) {
                $("#result").html(data);
            }
        });
        return false
    }
    $("#input").on("keyup", function() {
        clearTimeout(timer);
        timer = setTimeout(submitForm, 40);
        var input = $("#input").val();
       dataString = { input : input }
    })
});
</script>
</head>
<body>

<h1>Enter a word:</h1>

<form action="create_entry.php" method="post">
Input: <input type="text" id="input" name="zipcode"></br>
Concatenated Result: <input type="text" id="result" name="location" value="http//www.example.com/ /" readonly></br>
</form>

Upvotes: 0

Views: 17977

Answers (3)

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

it should be 

success: function (data) { 
    $("#result").val( 'http//www.example.com/'+data+'/'); 
}

Upvotes: 1

charlietfl
charlietfl

Reputation: 171690

I would suggest you pass parameters into submitForm instead of using a global variable for data.

To do concatenation could store the original value of the input using .data() method and always grab that and then add your new value to it.

 <!-- remove extra space and "/" -->
<input type="text" id="result" name="location" value="http//www.example.com/" readonly>


$(document).ready(function () {
    var timer = null;
   /* cache $("#result") and store initial url value*/
    var $result=$("#result");
     $result.data('url',$result.val());

    function submitForm( input ) {
        $.ajax({
            type: "POST",
            url: "/concatenate/index.php",
            data: {input:input},
            dataType: "html",
            success: function (data) {
                 /* new value from stored url and new user input*/
                var url=$result.data('url'),
                 newUrl= url+data;
                /* use val() not html() */
                $result.val(newUrl);
            }
        });
        return false
    }


    $("#input").on("keyup", function() {
        /* no point using "$("#input")" to search DOM again when already have "this"*/
        var input = $(this).val();
        clearTimeout(timer);
        timer = setTimeout(function(){
             submitForm(input) ;
        }, 40);


    })
});

Upvotes: 1

user2511140
user2511140

Reputation: 1696

chage this

success: function (data) {
                $("#result").html(data);
            }

to this

success: function (data) { 
        $("#result").attr('value','http//www.example.com/'+data+'/');
}

Upvotes: 0

Related Questions