The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    JS and HTML Form Code

    FineryWorkshop
    FineryWorkshop
    Forumember


    Female Posts : 48
    Reputation : 1
    Language : English
    Location : USA

    Solved JS and HTML Form Code

    Post by FineryWorkshop February 18th 2015, 8:25 pm

    Version: PHPbb3

    Details:
    So I am trying to make a code where you can upload a picture from your computer and submit it, and when you do submit it it sends me (the admin) a PM of the picture. I have the code for it, the upload works, and everything else works but when I hit submit it bring me to a weird page where it says "go back to forum index..." so :/

    Here's the code:
    Code:
    <script type="text/javascript">
          function fileSelected() {
          var file = document.getElementById('fileToUpload').files[0]
          if (file) {
          var fileSize = 0;
          if (size.size > 1024 * 1024)
          fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
          fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
          
          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
          }
          }
          
          function uploadFile() {
          var fd = new FormData();
          fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
          var xhr = new XMLHttpRequest();
          xhr.upload.addEventListener("progress", uploadProgress, false);
          xhr.addEventListener("load", uploadComplete, false);
          xhr.addEventListener("abort", uploadCanceled, false);
          xhr.open("POST","upload.php");
          xhr.send(fd);
          }
          
          function uploadProgress(evt) {
          if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
          }
          else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
          }
          }
          
          function uploadComplete(evt) {
          /*This event is raised when the server send back a response*/
          alert(evt.target.responseText);
          }
          
          function uploadFailed(evt) {
          alert("There was an error attempting to upload the file.");
          }
          
          function uploadCanceled(evt) {
          alert("The upload has been canceled by the user or the browser dropped the connection.");
          }
        </script>

    <form id="form1, privatemessage" enctype="multipart/form-data" method="post" action="upload.php" action="/privmsg" name="post">
    Username: <br>
    <input type="text" name="username" value="">
    <br>
       <div class="row">
                   <label for="fileToUpload">Select a File to Upload</label><br />        <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" />      
       </div>           
       <div id="fileName">          </div>           
       <div id="fileSize">       </div>      
       <div id="FileType">    </div>
               
       <div class="row">
                   <input type="button" onclick="uploadFile()" value="Upload" />          </div>
                  <div id="progressNumber">
              </div>


    <input name="username[]" type="text" style="display:none" value="Usernames"/>
      <input type="text" id="usernameSender" name="username[]" value="Finery Workshop" style="display:none"/>
    <input maxlength="64" style="display:none" name="subject" type="text" class="usernameinput" value="Purchase"/>
      <textarea id="cartMessage" style="display:none" class="noThis" name="Boutique Entry" >


    </textarea>
    <input type="submit" class="sendingBut" name="post" value="Submit" />
    </form>


    Last edited by FineryWorkshop on February 19th 2015, 6:43 pm; edited 1 time in total
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 18th 2015, 8:58 pm

    this wont work and the upload does not work either it fools you to make u think it works

    you would need the upload.php page for it to work and we do not have acess to the database to use php pages so this will never work

    but you give me a couple days i can make you somthing

    just have few questions

    where will this upload button be located?
    is it on a html page?
    do you want a predefined subject?
    and do you want the users to be able to enter a message?

    and any other details you think i might need
    FineryWorkshop
    FineryWorkshop
    Forumember


    Female Posts : 48
    Reputation : 1
    Language : English
    Location : USA

    Solved Re: JS and HTML Form Code

    Post by FineryWorkshop February 18th 2015, 9:12 pm

    _Twisted_Mods_ wrote:this wont work and the upload does not work either it fools you to make u think it works

    you would need the upload.php page for it to work and we do not have acess to the database to use php pages so this will never work

    but you give me a couple days i can make you somthing

    just have few questions

    where will this upload button be located?
    is it on a html page?
    do you want a predefined subject?
    and do you want the users to be able to enter a message?

    and any other details you think i might need
    Ohh okay :/

    That would be so amazing ♥ Thank you so much if you can do it Smile

    (Sorry if I misunderstand this question) Between the Username place and the submit button ^-^
    Yes, I was planning on it Smile
    Yes, if that's okay. Is it okay if the subject is: Contest Entry 
    No, just for them to be able to put their image in Smile
    Uhm, I don't think any other details. ^-^ 

    Would you need the CSS for the buttons or would I just add that in?
    And thank you so much again if you're able to do it Smile
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 18th 2015, 9:45 pm

    i will give it an id so you can add your own css ..oh one more thing i forgot .. sense you are using a html page will you have the header and footer activated on it?
    FineryWorkshop
    FineryWorkshop
    Forumember


    Female Posts : 48
    Reputation : 1
    Language : English
    Location : USA

    Solved Re: JS and HTML Form Code

    Post by FineryWorkshop February 18th 2015, 9:58 pm

    _Twisted_Mods_ wrote:i will give it an id so you can add your own css ..oh one more thing i forgot .. sense you are using a html page will you have the header and footer activated on it?
    Okay! And yes Smile
    Michael_vx
    Michael_vx
    Forumember


    Male Posts : 659
    Reputation : 29
    Language : Arabic and some English
    Location : Egypt

    Solved Re: JS and HTML Form Code

    Post by Michael_vx February 18th 2015, 10:53 pm

    hi there
    can i add something
    in order to make sure the image upload will work good you would need storage space that is forumotion dose not have it so if the Script used an image host service or make your own free host service then make the script use the space this might make it work
    its just idea if im wrong please correct me
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 18th 2015, 11:00 pm

    yea im gonna use filepicker to upload the images to ..so you will just need to create a account with them and get the api# they give you but i will give all the info needed when i finish
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 18th 2015, 11:43 pm

    ok first goto https://developers.filepicker.io/register/free and crate an account this will be used to upload the images to

    after you create an account ..

    click create app

    name: your choice

    Which Filepicker.io file SDK(s) are you planning to use? WEB

    skip the logo upload step

    3rd step will give you a API Key copy it you will need it for the script below


    Now for the rest

    html buttons and inputbox

    Code:
    <input id="imgbox" type="text">
    <input type="button" id="imguplbtn" value="Upload Image" onclick="getPick()">
    <input type="button" id="subbtn" value="Submit" onclick="sendthemsg()">

    add these anywhere in the html page you like

    1st: is the input box for the image url
    2nd: the upload button
    3rd: is the submit button to send the message


    now you will need to add this script to very bottom of your html page

    Code:
        <script type="text/javascript">
          jQuery(function(){
        var script = document.createElement('script');
            script.id="filepicker";
            script.type="text/javascript";
            script.src="//api.filepicker.io/v1/filepicker.js";
            var body=$('body');
            body.append(script);
        });
            function getPick(){
            var textArea = $('#imgbox');
            filepicker.setKey('yourkeyhere');
            filepicker.pick({
            mimetypes: ['text/*','image/*','video/*'],
            services:['COMPUTER','WEBCAM','VIDEO']
            },function(FPFile) {
            var docFile = FPFile.url;
            var type= FPFile.mimetype;
            var file = FPFile.url+'+'+FPFile.filename.replace(/\s/g,"");
            if(/^.*text.*$/.test(type)) {
            textArea.val(textArea.val()+'[url]'+file+'[/url]');
            } else if(/^.*image.*$/.test(type)) {
            textArea.val(file);
            }else {
            textArea.val(textArea.val()+'[flash]'+file+'[/flash]');
            };
         
            });
            };

        function sendthemsg(){
        if($('#imgbox').val()==""){alert('Upload A Image First!')}else{
        msg = '[img]'+$('#imgbox').val()+'[/img]';
          jQuery.post('http://liquidcode.forumotion.com/privmsg',{             
        subject:  'Contest Entry',
        message:  msg,
        mode:  'post',
          username:{'':'_Twisted_Mods_'},
          folder:  'inbox',
          new_pm_time: 9999999999,
        post:  1
        },function(data,status){if(data.match("Your message has been sent")){alert('Image Has Been Submitted!');$('#imgbox').val('');}else{alert('Error! please try again')};});
        };};
          </script>

    replace yourkeyhere in

    Code:
    filepicker.setKey('yourkeyhere');

    with the api key you got earlier from filepicker

    then replace _Twisted_Mods_ in

    Code:
    username:{'':'_Twisted_Mods_'},


    with your username

    all done

    if you have a issue with it sending messages goto acp>general>forum>security

    and set

    Unauthorize unofficial forms to post messages and private messages on the forum:NO

    save


    Last edited by _Twisted_Mods_ on February 19th 2015, 5:58 am; edited 1 time in total
    FineryWorkshop
    FineryWorkshop
    Forumember


    Female Posts : 48
    Reputation : 1
    Language : English
    Location : USA

    Solved Re: JS and HTML Form Code

    Post by FineryWorkshop February 19th 2015, 12:10 am

    I added all of it in there and when I press upload image or submit nothing happens :/  

    Do you want me to show you the code I have for it? I tested it out on a page just by itself so there's no other codes in between it.

    I made an account and put in the API Key code it gave me and replaced your username with mine.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 19th 2015, 5:58 am

    sorry my browser messed up the code should be good now
    FineryWorkshop
    FineryWorkshop
    Forumember


    Female Posts : 48
    Reputation : 1
    Language : English
    Location : USA

    Solved Re: JS and HTML Form Code

    Post by FineryWorkshop February 19th 2015, 2:29 pm

    The image uploading part works perfect now, but when I hit submit nothing happens. (I got on as a different user to test it since my main one is the one the PM would go to)
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 19th 2015, 3:13 pm

    you dont need to switch accounts you can pm yourself .. and did you switch the username  if so can you provide the code for your html page either here or in a pm
    FineryWorkshop
    FineryWorkshop
    Forumember


    Female Posts : 48
    Reputation : 1
    Language : English
    Location : USA

    Solved Re: JS and HTML Form Code

    Post by FineryWorkshop February 19th 2015, 5:58 pm

    Here's the code I have on the test page:
    Code:

    <input id="imgbox" type="text">
    <input type="button" id="imguplbtn" value="Upload Image" onclick="getPick()">
    <input type="button" id="subbtn" value="Submit" onclick="sendthemsg()">
     
        <script type="text/javascript">
          jQuery(function(){
        var script = document.createElement('script');
            script.id="filepicker";
            script.type="text/javascript";
            script.src="//api.filepicker.io/v1/filepicker.js";
            var body=$('body');
            body.append(script);
        });
            function getPick(){
            var textArea = $('#imgbox');
            filepicker.setKey('AsbKjsZyQ16r7FQ8AHFTdz');
            filepicker.pick({
            mimetypes: ['text/*','image/*','video/*'],
            services:['COMPUTER','WEBCAM','VIDEO']
            },function(FPFile) {
            var docFile = FPFile.url;
            var type= FPFile.mimetype;
            var file = FPFile.url+'+'+FPFile.filename.replace(/\s/g,"");
            if(/^.*text.*$/.test(type)) {
            textArea.val(textArea.val()+'[url]'+file+'[/url]');
            } else if(/^.*image.*$/.test(type)) {
            textArea.val(file);
            }else {
            textArea.val(textArea.val()+'[flash]'+file+'[/flash]');
            };
          
            });
            };

        function sendthemsg(){
        if($('#imgbox').val()==""){alert('Upload A Image First!')}else{
        msg = '[img]'+$('#imgbox').val()+'[/img]';
          jQuery.post('http://liquidcode.forumotion.com/privmsg',{              
        subject:  'Contest Entry',
        message:  msg,
        mode:  'post',
          username:{'':'Finery Workshop'},
          folder:  'inbox',
          new_pm_time: 9999999999,
        post:  1
        },function(data,status){if(data.match("Your message has been sent")){alert('Image Has Been Submitted!');$('#imgbox').val('');}else{alert('Error! please try again')};});
        };};
          </script>
    When I press the submit button without having an image it responds telling me I need an image but it doesn't respond when I do have an image.
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 19th 2015, 6:04 pm

    seems to work fine did you do the last part

    goto acp>general>forum>security

    and set

    Unauthorize unofficial forms to post messages and private messages on the forum:NO

    save
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 19th 2015, 6:07 pm

    oooh i just notice 1 other thing i missed

    change

    Code:
    jQuery.post('http://liquidcode.forumotion.com/privmsg',{

    to


    Code:
    jQuery.post('/privmsg',{
    FineryWorkshop
    FineryWorkshop
    Forumember


    Female Posts : 48
    Reputation : 1
    Language : English
    Location : USA

    Solved Re: JS and HTML Form Code

    Post by FineryWorkshop February 19th 2015, 6:42 pm

    Thank you so much! It works now Smile 

    Thank you for helping me ^-^
    _Twisted_Mods_
    _Twisted_Mods_
    Helper
    Helper


    Male Posts : 2083
    Reputation : 336
    Language : English
    Location : Ms

    Solved Re: JS and HTML Form Code

    Post by _Twisted_Mods_ February 19th 2015, 6:53 pm

    Topic solved and archived

      Current date/time is November 11th 2024, 8:03 pm