I'm using a form for users to fill in their username and password and a filename in order to access a specific file located on a server. The files can be accessed with a url like this:
http://username:password@webserver.org:8080/folder1/folder2/filename.txt
This would display the contents of the text file in the browser. What I need to do is to have the text content copied into a textarea I have on my site, so that users can work with the text. I would like to have users able to save the contents back to the file, but that can come later. Is there any way I can do this using Javascript or jQuery? Also, if the file is a .html
file, I would need to have the code inserted into the textarea.
This is the form I have:
<form id="loginForm" action="" method="get">
<div id="loginWindow">
<p class="signInText">Username</p>
<input type="text" name="username" id="username" required="required" />
<p class="signInText">Password</p>
<input type="password" name="password" id="password" required="required" />
<p class="signInText">File Name</p>
<input type="text" name="filename" id="filename" required="required" />
<input type="submit" value="Ok" id="submit" />
</div>
</form>
If this is not possible in either Javascript or jQuery, please let me know if there are any other tools or libraries I can use to achieve this.
You can use
jQuery.ajax()
.
Retrieve content using ajax and assign value to text area.
$.ajax({
url: "http://username:password@webserver.org:8080/folder1/folder2/filename.txt",
}).done(function() {
// Append content to text area here
});
use form submit method with ajax GET call and in Response you return the content event.preventDefault() will prevent default form submission so that you can configure your URL
$("#loginForm").submit( function (event)
{
event.preventDefault();
// make your url here
$.ajax({
type: "GET",
url: "url",
success: function(response)
{
alert(JSON.stringify(response)); // see your response structure if its JSON format
alert(response.responseText;); // else you can get data from here
},
error: function (error)
{
}
});
});