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 /. 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/ /" readonly></br>
</form>
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./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./ /" readonly></br>
</form>
- use $("#result").val(data); instead of $("#result").html(data); – Ajeet Sinha Commented Nov 9, 2013 at 16:07
3 Answers
Reset to default 1I 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./" 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);
})
});
it should be
success: function (data) {
$("#result").val( 'http//www.example./'+data+'/');
}
chage this
success: function (data) {
$("#result").html(data);
}
to this
success: function (data) {
$("#result").attr('value','http//www.example./'+data+'/');
}