The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

JS and HTML Form Code

View previous topic View next topic Go down

Solved JS and HTML Form Code

Post by FineryWorkshop on 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

FineryWorkshop
Forumember

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

http://NOTREADY.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by _Twisted_Mods_ on 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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by FineryWorkshop on 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

FineryWorkshop
Forumember

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

http://NOTREADY.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by _Twisted_Mods_ on 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?

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by FineryWorkshop on 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

FineryWorkshop
Forumember

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

http://NOTREADY.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by Michael_vx on 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

Michael_vx
Forumember

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

Back to top Go down

Solved Re: JS and HTML Form Code

Post by _Twisted_Mods_ on 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_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by _Twisted_Mods_ on 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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by FineryWorkshop on 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.

FineryWorkshop
Forumember

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

http://NOTREADY.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

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

sorry my browser messed up the code should be good now

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by FineryWorkshop on 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)

FineryWorkshop
Forumember

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

http://NOTREADY.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by _Twisted_Mods_ on 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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by FineryWorkshop on 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.

FineryWorkshop
Forumember

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

http://NOTREADY.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by _Twisted_Mods_ on 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_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

Post by _Twisted_Mods_ on 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',{

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

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

Thank you so much! It works now Smile

Thank you for helping me ^-^

FineryWorkshop
Forumember

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

http://NOTREADY.forumotion.com

Back to top Go down

Solved Re: JS and HTML Form Code

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

Topic solved and archived

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum