Submit button with POST instead of using HTML form

Question

I have a form inside a form and this makes the top form unresponsive. When I take off the second form (which is inside the first form), the first form works. This is the second form I have:

<form action="imgupload.php" method="post" enctype="multipart/form-data">
            <h3>Upload a new image:</h3>
            <input type="file" name="fileToUpload" id="fileToUpload">
            <br>
            <input type="hidden" value="<?php echo $row['Gallery_Id']; ?>" name="gid">
            <input type="hidden" value="User" name="user">
            <input type="submit" value="Upload Image" name="imgup">
</form>

Since this makes the first form not work, I was wondering if I can take off the form fields and then the submit button can send the form data to the imgupload.php like this.

<input type="file" name="fileToUpload" id="fileToUpload">
<input type="hidden" value="<?php echo $row['Gallery_Id']; ?>" name="gid">
<input type="hidden" value="User" name="user">
<input type="submit" value="Upload Image" name="imgup" action="imgupload.php" method="post" enctype="multipart/form-data">

This does not work now. Is there a way I can get this working? If not, what's an alternative way to send this data to the other php?

Why do you need a form within a form? Why use two php documents if you are combining the two forms? — Ethernetz, Apr 06 '16 at 01:16
The two forms are not combined. I'm looping some stuff from a database and these input forms should come together inside the loop. The first form posts the data to the same file (newsearch.php) and the second form posts the data to `imgupload.php`. — Yohan Blake, Apr 06 '16 at 01:18
Why not either combine the two forms and merge the php documents, or place one form after the other. It makes no sense to put
tags's within other
tags. — Ethernetz, Apr 06 '16 at 01:22
@Ethernetz, oh wow why didn't I think of this?! That worked. Thank you very much — Yohan Blake, Apr 06 '16 at 01:29
You are only showing us one form, and it's a file upload system. I am trying to imagine what the second form does. Are you requesting additional data from the user? Sounds kinda like you should be using `input` fields within a DIV structure, and using js/jQuery to grab those values when the form is submitted. Really, though, it sounds like you should check out [AJAX - it's pretty simple](http://stackoverflow.com/questions/36025289/prevent-page-load-on-jquery-form-submit-with-none-display-button#36025530) and hella useful. — cssyphus, Apr 06 '16 at 01:30

cssyphus · Answer 1 · 2016-04-06T01:25:42.270

Since you are uploading files, have a look at Ravi Kusuma's Hayageek jQuery File Upload plugin. It's simple, it's a Swiss Army Knife, and it works.

Study the examples.

http://hayageek.com/docs/jquery-upload-file.php

Ravi breaks down the process into three simple steps, that basically look like this:

<head>
    <link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">  // (1)
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>   // (1)
</head>
<body>
    <div id="fileuploader">Upload</div>  // (2)
    <script>
        $(document).ready(function(){
            $("#fileuploader").uploadFile({  // (3)
                url:"my_php_processor.php",
                fileName:"myfile"
            });
        });
    </script>
</body>

The final step is to have the PHP file specified in the jQuery code (in this case my_php_processor.php) to receive and process the file:

my_php_processor.php:

<?php
    $output_dir = "uploads/";
    $theFile = $_FILES["myfile"]["name"];
    move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$fileName);

Note the relationship between myfile in the PHP ($_FILES["myfile"]), and the filename specified in the jQuery code block.

Don't forget to check out the server-side code from the Server Side tab -- you need both parts (js and php).

Looking at your question again, you will probably want to use this functionality as well:

dynamicFormData: function()
{
    var data ={ location:"INDIA"}
    return data;
}

or

dynamicFormData: function(){
    return {
        newID: $("#newNID").val(),
        newSubj: $("#newSubj").val(),
        newBody: $("#newBody").val(),
        formRole: $('#formRole').val()
    };

These will appear on the PHP side, thus:

$newID = $_POST['newID'];
$subj = $_POST['newSubj'];
etc

As with any plugin, resist the temptation to just plop it into your code. Do a couple of quick-and-dirty tests with it first. Kick its tires. Fifteen minutes will save you two hours.

And don't forget to verify what was uploaded. You never know when a developing country black hat might be trying to get a new account.

Submit button with POST instead of using HTML form

1 Answers1