html form onclick check if file exists

Question

I have a form containing one single input. Is there any way to check if a text file is existing with the same name as entered in the input field , when clicking on "submit"? So if you click on "submit", it should check if the text you typed in matches a file in a certain dir with end ".txt". If it exists, there should be an alert, if not, the form should be processed further.

Edit: As it seems to be quite hard to answer a few more details: There is a form looking like this:

<form action="<?php echo 'create-page.php' ?>" method="post">
<input type="text" name="newpage" value=""  /><br>
<input type="submit" name="submit" value="Save">
</form>

If you cick on "submit", the script should check if a .txt file in the dir /example/ is existing with the name you just typed in in to the If yes, there should be the alert "File found", if not, the form file be submitted. Hope this is more clear now... I think something like a php function should be fired. But how?

add a click listener to submit button and inside handler function use ajax to check the file existence. Then do your stuff based on the result.. — Subash Selvaraj, Feb 21 '14 at 15:52
Sure, there is. But ou will need some server-side code, like PHP, ASP, JSP, etc... Are you already working with any server side code? — LcSalazar, Feb 21 '14 at 15:53
Before submitting your form, peform an AJAX request for a PHP script that checks to see if the text file exists. The PHP will send back JSON reporting its findings. — Willy, Feb 21 '14 at 15:58
PHP would probably be the best solution if its possible. But I guess it cannot be handled just by setting sth like "onclick = my-php-function" as php is server-side... Edit: Bill, thank you. I will try so — , Feb 21 '14 at 15:58

score 0 · Answer 1 · answered Feb 21 '14 at 15:59

Well, for that you will have to submit the information to the server side somehow. You can do this by two ways: AJAX, or simple form submit.

I'm sorry, but I don't think SO is meant to be writing the code for you, but to help you find at least a direction to go to. Try learning about form submiting, and about AJAX. Then you will have the input value on the PHP side. There you can look for the file, and act as you wish back on javascript side.

score 0 · Answer 2 · answered Feb 21 '14 at 15:59

Try using ajax,. Do something like this,

<form id="myform" action="<?php echo 'create-page.php' ?>" method="post">
    <input type="text" name="newpage" value=""  /><br>
    <input type="button" name="submit" value="Save">
</form>

script

$('body').on('click',"input[name='submit']",function(e){
    $.ajax({
       url:"filecheck.php",
       data: $(#myform).serialize(),
       success:function(data){
          if(data){
            alert("file matches");
            // submit your form or do whatever you want
          }else{
            alert("file doesn't match");
          }
       },
       error(error){
       }
    });
});

score 0 · Accepted Answer · edited May 23 '17 at 11:52

Your question lacks specific detail, and code. So I can't tell exactly what it is that you want. Here are three methods, on some things you should study when checking if a file exists.

Javascript/XML Functions: Used with XML variables, this method is something you would NOT want to try if running a localhost. It is possible, but a pain nonetheless, if you still want to use this method to check if the url of a file exists, then try to put it as a function. Try something simple but effective. If you are using an XML document, or have something serverside going on you may want to try this method. First put something like this this in your Javascript... function fileExists (samename.txt) After that you need to create an XML var using http functions. I reccomend validating it with http:open and http:send. Of course, with any var statements, and send you always need to do return statement. So many good sites to study about this. What this does is it basically creates a variable, that can look into your server and use http:, to subliminally type in a url with in the server and see if it is found, then returns the results. In simpler terms, this method allows the code to type in the url of the file within the server, and tells you if it has found any results. You need to configure this a lot before this will work perfectly. For more help and an example code on how you may want to set this up...Click Here

Ajax and ASP: If you run your codes on a localhost, or better yet, no host at all, this method will probably come easier for you. Commonly used, and not very complex code at all I would reccomend this method if you haven't already configured your code for something else. Basically this is simple Javascript and has it's function of it's own, but one you will be more familiar with. Here is a sample code that really doesn't require much for it to just slip it in to your current script....

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
        $(function () {
            $('#clickMe').click(function () {
                var url = $('#fileName').val();
                $.ajax({
                    type: "HEAD",
                    url: samename.txt,
                    success: function (data) {
                        alert("found");
                    },
                    error: function (request, status) {
                        alert("not found");
                    }
                });
            });
        });
</script>

Once you have that create a <div> that corresponds to the script. Here is an example...

   <div>
        FileName: <input type="text" id="fileName" /><input type="button" value="check" id="clickMe" /> 
   </div>

So just make sure you configure filename, to the file you want to check. If you want to learn, not copy then keep reading as I explain what it does. If you have this file, or this file could be stored in the same folder as the above script, it then checks if it is there then uses the simple alert function to tell you if they found anything. You should know that the div is what gives the onclick which you have requested.

PHP/MySQL Yes this too is a way you could check the url of a file. This isn't the main reason why I have brought it up, but it is still an effective possiblity. These ways are endless with this method. Here are two from the PHP. One if it has a url to the file, and one if it doesn't. Either way these two are both using a reccomended file_exists function.

Url.php (Basically, if you want to check from another server)

<?php
function fileExists($path){
    return (@fopen($path,"r")==true);
}
?>

Short, but complicated. This creates a variable ($Path), and uses the @fopen statement, to open up all files on all servers which the variable can validate through($Path) and return the informstion "r")==true);.

Personal.php(A file within the server)

file_exists( $path_from_root . '/somedir/file/' )

that's it. This because of file_exists so calm nature, your OS even comes to play here. This is code that is self-explanatory and does not need much explanation.

The PHP/MySQL methods appear to be a pros and cons type code. There's good things that come out of it, such as knowing that there are so many ways to redo it if something goes awry. Bad things however, can really be a hassle. Like there is no onclick function in this case, and that PHP is not always safe.

Final Thoughts: Because of the fact that you want to check files in your html form, I strongly suggest using Ajax so you aren't completely altering the code. Make sure if you do decide to use the Ajax script above, that you remove the div, and add it's fileName componetes to your form, or to wherever you want it to check the file. Also, the other two have things to offer too, but unless you change your question enough to know exactly what you want, every one of these are just suggestions.

html form onclick check if file exists

3 Answers3