AJAX post request and string concatenation
Question
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>
3 answers
solution1
2 ACCPTED 2013-11-09 16:22:28
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);
})
});
solution2
1 2013-11-09 16:07:36
it should be
success: function (data) {
$("#result").val( 'http//www.example.com/'+data+'/');
}
solution3
1 2013-11-09 16:13:27
chage this
success: function (data) {
$("#result").html(data);
}
to this
success: function (data) {
$("#result").attr('value','http//www.example.com/'+data+'/');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.