Complex form of New Topic Function

Hello,

So on my forum i have installed a javascript where by adding an image link to the description it makes it an image and views it to the topics preview list. Now some members don't know that and doesn't matter how many times i tell them how to do that they seem not to understand at all.

So basically what i want is a simple form that will be activated once you press the New Topic button in the News Forum.

That form will include a Title field (that will be filled i guess automatically afterwards) and the title prefixes next to that so they can select the correct prefix, an Image field where members will add the link of the image for the topic and then the image will be placed in the description field of the topic and added to the topic also and the News Text where members will add the text of the news they found.

I will give you an example so you guys understand better what i want.

Here we are:


These are the main 4 fields i want to be shown. So you add a title for your topic, it adds it there. You select a Prefix it adds it (based on my codes i already have there), then you add an image just once, and it adds the image as a link to the description field and then as an image

Code: [img]URL[/img]

to the editor and a last field that would be a text zone for the news text.

Once they edit that the Send button will glow and then they can post the topic.


Will that be easy to create?
The forum is:
http://www.informationforumgr.com
version is phpBB3.

Thanks for any help.

Bump

Some information i forgot:
This has to work on specific categories and not for every category. So if this is done automatically via js or has to be in the HTML page then works for me.

Thanks again!

Hey,

So if I got this right, all you really need is for the script to add an image to the text editor when placed in the description and only work in specific forums, correct ? If that's right, where would the image be placed in the editor ?

Kay so here's how the posts look:

---

Centered Image

Info Image (i want this to show up automatically, it's always the same)
News Text


*Source: Source Link (so maybe we'll need an other field for the source )

---

Here's the preview of a topic:
http://prntscr.com/bk103l

Hmm.. give this a try :

Code:

$(function() {
  var form = document.post;

  if (form && form.f) {
    if (form.f.value == '3' || '6' || '9') {
      if (!form.message.value) {
        form.message.value = '[center][img]INFO IMAGE[/img][/center]\n\nSOURCE : [url=SOURCE LINK]SOURCE TEXT[/url]';
      }

      form.onsubmit = function() {
        if (this.description && this.description.value) {
          if ($.sceditor && !new RegExp('[center][img]' + this.description.value + '[/img][/center]').test(this.message.value)) {
            var instance = $(form).sceditor('instance');
            instance.val('[center][img]' + this.description.value + '[/img][/center]' + instance.val());
          } else {
            this.message.value = '[center][img]' + this.description.value + '[/img][/center]' + this.message.value;
          }
        }
      };
     
    }
  }
});

Set the placement for this script to "in all the pages" and make sure to edit this part to include the forum ids you want the script to execute in :

Code:

if (form.f.value == 3 || 6 || 9)

Basically it should add a small form to the message area, and when you submit the topic ( either by submit or preview ) it'll add the image from the description to the message. Let me know if it works for you.

Another alternative is you can insert a text template into the message area, and then when you submit the topic it'll remove the template labels, and parse the template values.

@Ange Tuteur can this be added in a html page as well? And i mean have a form design like the image on top appearing when the new topic button is pressed?

What i want basically is when you press a new topic to have a new form instead of the normal type of editor and have those input fields there that will be recognized as the title, the prefix, the description, message and the other info i added above. Is that easy to do? I mean i can create the page entirely and have it ready but i don't know how to make the inputs to be like i want it to be...

This is what i made but i can't make it work with js..
http://prntscr.com/bklf0c

code i used:

Well, yes, it is possible. What you need to do is bind an event to a button, so when you click it, it get's the values of all your custom fields and compiles them into a single string which is entered into the message area. Usually :

Code:

<textarea name="message"></textarea>

or you could use AJAX to post the topic instead, it depends.

Sooo, I'd recommend adding an id to each custom field so you can get the value of those fields easily. Something like this :

Code:

Name : <input type="text" id="name"/>

Then JS to get the field's value would look like this :

Code:

var name = document.getElementById('name').value;

After that you just need to compile everything into a single string. You might want to use this ( It's a modified version of the graphic form I made, although you might already have this ) as a reference, because it's a great example of what you're trying to achieve. Specifically :

Code:

          case 1 :
            for (var data = getId('stepData-1').getElementsByTagName('INPUT'), i = 0, j = data.length, pass = true; i<j; i++) {
              if (data[i].name == 'creType' && data[i].value == 0) {
                getId('stepData-1').getElementsByTagName('SELECT')[0].style.borderColor = '#E53';
                pass = false;
              }
              if (!data[i].value) {
                if (data[i].name == 'creType' || data[i].name == 'creURL' || data[i].name == 'creSize' || data[i].name == 'creRules' || data[i].name == 'creText') {
                  data[i].style.borderColor = '#E53';
                  pass = false;
                } else data[i].value = 'N/A';
              }
            }
            if (!pass) return alert('Merci de remplir tous les champs obligatoires');
            var content = '[h3]En bref...[/h3]\n[color=#3399CC][b]Nature de la création :[/b][/color] ' + form.creType.value + '\n[color=#333333][b]Taille de la création (en pixels) :[/b][/color] ' + form.creSize.value + '\n[color=#3399CC][b]Couleur de fond :[/b][/color] ' + form.primaryColors.value + '\n\n[h3]Image(s)[/h3]\n[color=#3399CC][b]Lien(s) image(s) :[/b][/color]' + form.creImages.value.replace(/(https?:\/\/\S+)/gi,'\n\n[url]$1[/url]\n[spoiler="Visualiser"][img]$1[/img][/spoiler]') + '\n\n[h3]Texte[/h3]\n[color=#333333][b]Texte à insérer :[/b][/color] ' + form.creText.value + '\n[color=#3399CC][b]Police à utiliser :[/b][/color] ' + form.creFont.value + '\n[color=#333333][b]Couleur police :[/b][/color] ' + form.creFontColor.value + '\n\n[h3]En détails...[/h3]\n[color=#3399CC][b]Lien de mon forum Forumactif :[/b][/color] ' + form.creURL.value + '\n[color=#333333][b]Commentaire(s) supplémentaire(s) :[/b][/color] ' + form.desc.value;
            form.content.value = content;
            break;

I do have a different name to all of them. I could add the same id's to the inputs and do that. But how do i create the script. That part you gave me it's kind of confusing to me the way it is.. :S

Try focusing on this part :

Code:

var content = '[h3]En bref...[/h3]\n[color=#3399CC][b]Nature de la création :[/b][/color] ' + form.creType.value + '\n[color=#333333][b]Taille de la création (en pixels) :[/b][/color] ' + form.creSize.value + '\n[color=#3399CC][b]Couleur de fond :[/b][/color] ' + form.primaryColors.value + '\n\n[h3]Image(s)[/h3]\n[color=#3399CC][b]Lien(s) image(s) :[/b][/color]' + form.creImages.value.replace(/(https?:\/\/\S+)/gi,'\n\n[url]$1[/url]\n[spoiler="Visualiser"][img]$1[/img][/spoiler]') + '\n\n[h3]Texte[/h3]\n[color=#333333][b]Texte à insérer :[/b][/color] ' + form.creText.value + '\n[color=#3399CC][b]Police à utiliser :[/b][/color] ' + form.creFont.value + '\n[color=#333333][b]Couleur police :[/b][/color] ' + form.creFontColor.value + '\n\n[h3]En détails...[/h3]\n[color=#3399CC][b]Lien de mon forum Forumactif :[/b][/color] ' + form.creURL.value + '\n[color=#333333][b]Commentaire(s) supplémentaire(s) :[/b][/color] ' + form.desc.value;

The content above this variable mostly checks if certain fields are valid. Basically the above variable is the content that will be inserted as the message. You'll see that it consists of values from multiple different fields. This string will later be added as the message content.


So for example we have this button :

Code:

<input type="submit" id="submitForm" value="Submit"/>

And the JavaScript for compiling all the data from your fields when it's clicked :

Code:

document.getElementById('submitForm').onclick = function() {
  var content = 'Field 1 : ' + document.getElementById('field1').value + '\nField 2 : ' + document.getElementById('field2').value + '\netc...';
};

Okay so my remaining question is how this function of the script starts. I mean i can't really copy that code because it makes my mind dizzy.. :S

I am soooo noob on JavaScript..

I mean the code of the Graphic request form..
lol not that small bit.. hehe

Start with a blank function like this :

Code:

document.getElementById('MY_ID').onclick = function() {

};

You're going to want this function to be executed when a specific element is clicked, so place that element's ID where MY_ID is.

After that you can define a string by concatenating the values of your fields together. Like this :

Code:

var message = 'value 1' + 'value 2' + 'value 3';

You use the "+" operator to connect the strings and values together. I have strings above, but you can do the same with the values of elements. As long as it's a string you can concatenate them together.

Giving you something like this :

Code:

document.getElementById('MY_ID').onclick = function() {
  var message = 'value 1' + 'value 2' + 'value 3';
};

What you do with that string afterwards is up to you. If the original textarea is available you can add this variable's string as its value, or you can submit a topic via AJAX with "message" as the message content.

Okay this is understood and then how am i supposed to make them be posted and to the section they have to be?

This is why i basically get confused.. Because in this code i can only do that for one category. But i want this in multiple ones. i have to create like 15 new hmtl pages for each category?

I did do this now:

Spoiler:

I added the ids and made the script content as i want it to be.
Now for the title, the prefix and the description? How are we going to make them as we want them to be?

Title: document.getElementById('Title').value
Prefix: document.getElementById('prefixes').value
Description: document.getElementById('imgdesc').value

But where and how am i supposed to make them fill the fields automatically. And how is the content going to be placed in the editor of the new topic to post it.? OMG so difficult and i am taking too much of your time..

Since you want to use this form for multiple forums, I'd suggest creating a select field. Each option will have the forum's name as the innerText and the value will be the forum id. For example :

Code:

<select id="forumSelect">
  <option value="1">Forum 1</option>
  <option value="2">Forum 2</option>
  <option value="3">Forum 3</option>
</select>

Once you get this up all you need to do is manage the form submission.



If you want the fields to be mandatory I'd suggest performing a conditional check to make sure the value has been filled. Sooo, your script would look like this in that case :

Code:

document.getElementById('MY_ID').onclick = function() {
  var message = '',
      title = document.getElementById('Title'),
      prefix = document.getElementById('prefixes'),
      desc = document.getElementById('imgdesc'),
      err = '';

  if (!title.value) err += 'Please fill in the title';
  if (!prefix.value) err += '\nPlease select a prefix.';
  if (!desc.value) err += '\nPlease fill in the description.';

  if (err) {
    alert(err);
    return;
  } else {
    message = 'something';
    // other stuff..
  }
};

Last but not least, you can submit a topic via AJAX like this :

Code:

$.post('/post', {
      subject : 'topic title',
  description : 'topic desc',
      message : 'message content',
    post_icon : 0, // topic icon
        mode : 'newtopic',
            f : 1, // forum id
        post : 1
}, function(d) {
  console.log('posted');
  // stuff that needs to be done after the topic is posted should be done here
});

All you need to do is replace the strings with your variables or values from your fields.

it should be placed near the end, like this for example :

Code:

document.getElementById('MY_ID').onclick = function() {
  var message = '',
      title = document.getElementById('Title'),
      prefix = document.getElementById('prefixes'),
      desc = document.getElementById('imgdesc'),
      err = '';

  if (!title.value) err += 'Please fill in the title';
  if (!prefix.value) err += '\nPlease select a prefix.';
  if (!desc.value) err += '\nPlease fill in the description.';

  if (err) {
    alert(err);
    return;
  } else {
    message = 'something';

    $.post('/post', {
          subject : 'topic title',
      description : 'topic desc',
          message : 'message content',
        post_icon : 0, // topic icon
            mode : 'newtopic',
                f : 1, // forum id
            post : 1
    }, function(d) {
      console.log('posted');
    });
  }
};

Just make sure "Unauthorize unofficial forms to post messages and private messages on the forum" is disabled under General > Security. Otherwise it wont work.


Don't worry about it, I'll try to answer whenever I'm free.

interessan ,You can explain how to add Thank you very much!

@Ange Tuteur i used this and i tested it to the forum id /f3-forum to try it out if it works but the button wont send the message...

Here's what i use:

Code:

<select id="forumSelect">
  <option value="1">Forum 1</option>
  <option value="2">Forum 2</option>
  <option value="3">Forum 3</option>
</select>
<div style="width:200px;font-size:14px;display:inline-block;text-align:right">Title of the topic ::</div>
  <input type="text" name="title" id="Title" placeholder="Title" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" />
    <select id="prefixes" name="tags4" onchange="tagprefixo()"><option value="">Χωρίς θέμα</option><option value="announcement">ΑΝΑΚΟΙΝΩΣΗ</option><option value="request">ΑΙΤΗΜΑ</option><option value="idea">ΙΔΕΑ</option><option value="problem">ΠΡΟΒΛΗΜΑ</option><option value="help">ΒΟΗΘΕΙΑ</option><option value="hallo">ΝΕΟ ΜΕΛΟΣ</option><option value="ΕΛΛΑΔΑ ">ΕΛΛΑΔΑ</option><option value="ΚΟΣΜΟΣ ">ΚΟΣΜΟΣ</option><option value="ΑΘΛΗΤΙΚΑ ">ΑΘΛΗΤΙΚΑ</option><option value="ΠΕΡΙΕΡΓΑ ">ΠΕΡΙΕΡΓΑ</option><option value="FACEBOOK ">FACEBOOK</option><option value="ΤΕΧΝΟΛΟΓΙΑ ">ΤΕΧΝΟΛΟΓΙΑ</option><option value="SMARTPHONES ">SMARTPHONES</option><option value="tutorial">ΟΔΗΓΟΣ</option><option value="portablee">PORTABLE</option><option value="DOWNLOAD ">DOWNLOAD</option><option value="phhs">PHOTOSHOP</option><option value="musicccc">ΜΟΥΣΙΚΗ</option><option value="ΠΑΙΧΝΙΔΙΑ ">ΠΑΙΧΝΙΔΙΑ</option><option value="movies">ΤΑΙΝΙΑ</option><option value="spam">SPAM</option><option value="votespolls">ΨΗΦΟΦΟΡΙΑ</option><option value="school">ΣΧΟΛΕΙΟ</option><option value="advert">ΔΙΑΦΗΜΙΣΗ</option><option value="vips">VIP</option><option value="ΥΓΕΙΑ ">ΥΓΕΙΑ</option><option value="tipsadvices">TIPS - ΣΥΜΒΟΥΛΕΣ</option><option value="soscall">ΚΛΗΣΕΙΣ SOS</option><option value="cooking">ΜΑΓΕΙΡΙΚΗ</option><option value="weather">ΚΑΙΡΟΣ</option><option value="staff">STAFF</option><option value="inprogress">ΣΕ ΕΞΕΛΙΞΗ</option><option value="solved">ΛΥΘΗΚΕ</option><option value="archieved">ΚΑΔΟΣ</option></select> <br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">Image of the topic ::</div>
  <input type="text" id="imgdesc" name="imgdesc" placeholder="Image URL" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">The text of the topic ::</div>
  <input type="text" id="textmsg" name="textmsg" placeholder="News Text" style="width: 600px;height: 150px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">The topic's source link ::</div>
  <input type="text" id="srxlink" name="srclink" placeholder="Source Link" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;display:inline-block;text-align:right">The topic's source name ::</div>
  <input type="text" id="srcname" name="srcname" placeholder="Source Name" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />

<br /><BR /><BR />
<input type="submit" id="submitForm" value="Submit"/>


<script type="text/javascript">

document.getElementById('submitForm').onclick = function() {
  var message = '',
      title = document.getElementById('Title'),
      prefix = document.getElementById('prefixes'),
      desc = document.getElementById('imgdesc'),
      err = '';
 
  if (!title.value) err += 'Please fill in the title';
  if (!prefix.value) err += '\nPlease select a prefix.';
  if (!desc.value) err += '\nPlease fill in the description.';
 
  if (err) {
    alert(err);
    return;
  } else {
    message = '[center][img]' + document.getElementById('imgdesc').value + '[/img]\n\n[img]http://i68.servimg.com/u/f68/18/45/97/69/ei310.png[/img][/center]\n[I-F-GR]' + document.getElementById('textmsg').value + '\n\n\n\n[color=green][b]* Πηγή:[/b][/color] [url=' + document.getElementById('srclink').value + ']' + document.getElementById('srcname').value + '[/url][/I-F-GR]';
    // other stuff..
  }
};
</script>

Did you submit the topic via AJAX ? I don't see any forms or the required post() function..

Look at the AJAX portion of my post. I provide the method for submitting the topic + an example of where the post() function should go. If you can't figure that part out let me know and I'll give you another example using your above markup.

I did just update the code with this one:

Code:

<select id="forumSelect">
  <option value="1">Forum 1</option>
  <option value="2">Forum 2</option>
  <option value="3">Forum 3</option>
</select>
<div style="width:200px;font-size:14px;display:inline-block;text-align:right">Title of the topic ::</div>
  <input type="text" name="title" id="Title" placeholder="Title" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" />
    <select id="prefixes" name="tags4" onchange="tagprefixo()"><option value="">Χωρίς θέμα</option><option value="announcement">ΑΝΑΚΟΙΝΩΣΗ</option><option value="request">ΑΙΤΗΜΑ</option><option value="idea">ΙΔΕΑ</option><option value="problem">ΠΡΟΒΛΗΜΑ</option><option value="help">ΒΟΗΘΕΙΑ</option><option value="hallo">ΝΕΟ ΜΕΛΟΣ</option><option value="ΕΛΛΑΔΑ ">ΕΛΛΑΔΑ</option><option value="ΚΟΣΜΟΣ ">ΚΟΣΜΟΣ</option><option value="ΑΘΛΗΤΙΚΑ ">ΑΘΛΗΤΙΚΑ</option><option value="ΠΕΡΙΕΡΓΑ ">ΠΕΡΙΕΡΓΑ</option><option value="FACEBOOK ">FACEBOOK</option><option value="ΤΕΧΝΟΛΟΓΙΑ ">ΤΕΧΝΟΛΟΓΙΑ</option><option value="SMARTPHONES ">SMARTPHONES</option><option value="tutorial">ΟΔΗΓΟΣ</option><option value="portablee">PORTABLE</option><option value="DOWNLOAD ">DOWNLOAD</option><option value="phhs">PHOTOSHOP</option><option value="musicccc">ΜΟΥΣΙΚΗ</option><option value="ΠΑΙΧΝΙΔΙΑ ">ΠΑΙΧΝΙΔΙΑ</option><option value="movies">ΤΑΙΝΙΑ</option><option value="spam">SPAM</option><option value="votespolls">ΨΗΦΟΦΟΡΙΑ</option><option value="school">ΣΧΟΛΕΙΟ</option><option value="advert">ΔΙΑΦΗΜΙΣΗ</option><option value="vips">VIP</option><option value="ΥΓΕΙΑ ">ΥΓΕΙΑ</option><option value="tipsadvices">TIPS - ΣΥΜΒΟΥΛΕΣ</option><option value="soscall">ΚΛΗΣΕΙΣ SOS</option><option value="cooking">ΜΑΓΕΙΡΙΚΗ</option><option value="weather">ΚΑΙΡΟΣ</option><option value="staff">STAFF</option><option value="inprogress">ΣΕ ΕΞΕΛΙΞΗ</option><option value="solved">ΛΥΘΗΚΕ</option><option value="archieved">ΚΑΔΟΣ</option></select> <br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">Image of the topic ::</div>
  <input type="text" id="imgdesc" name="imgdesc" placeholder="Image URL" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">The text of the topic ::</div>
  <input type="text" id="textmsg" name="textmsg" placeholder="News Text" style="width: 600px;height: 150px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">The topic's source link ::</div>
  <input type="text" id="srxlink" name="srclink" placeholder="Source Link" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;display:inline-block;text-align:right">The topic's source name ::</div>
  <input type="text" id="srcname" name="srcname" placeholder="Source Name" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />

<br /><BR /><BR />
<input type="submit" id="submitForm" value="Submit"/>


<script type="text/javascript">

document.getElementById('submitForm').onclick = function() {
  var message = '',
      title = document.getElementById('Title'),
      prefix = document.getElementById('prefixes'),
      desc = document.getElementById('imgdesc'),
      err = '';
 
  if (!title.value) err += 'Please fill in the title';
  if (!prefix.value) err += '\nPlease select a prefix.';
  if (!desc.value) err += '\nPlease fill in the description.';
 
  if (err) {
    alert(err);
    return;
  } else {
    message = 'something';
 
    $.post('/post', {
          subject : 'topic title',
      description : 'topic desc',
          message : 'message content',
        post_icon : 0, // topic icon
            mode : 'newtopic',
                f : 1, // forum id
            post : 1
    }, function(d) {
      console.log('posted');
    });
  }
};
</script>

Still nothing happened..

This is a complete example using all the fields you provided :

Code:

<select id="forumSelect">
  <option value="1">Forum 1</option>
  <option value="2">Forum 2</option>
  <option value="3">Forum 3</option>
</select>
<div style="width:200px;font-size:14px;display:inline-block;text-align:right">Title of the topic ::</div>
  <input type="text" name="title" id="Title" placeholder="Title" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" />
    <select id="prefixes" name="tags4" onchange="tagprefixo()"><option value="">Χωρίς θέμα</option><option value="announcement">ΑΝΑΚΟΙΝΩΣΗ</option><option value="request">ΑΙΤΗΜΑ</option><option value="idea">ΙΔΕΑ</option><option value="problem">ΠΡΟΒΛΗΜΑ</option><option value="help">ΒΟΗΘΕΙΑ</option><option value="hallo">ΝΕΟ ΜΕΛΟΣ</option><option value="ΕΛΛΑΔΑ ">ΕΛΛΑΔΑ</option><option value="ΚΟΣΜΟΣ ">ΚΟΣΜΟΣ</option><option value="ΑΘΛΗΤΙΚΑ ">ΑΘΛΗΤΙΚΑ</option><option value="ΠΕΡΙΕΡΓΑ ">ΠΕΡΙΕΡΓΑ</option><option value="FACEBOOK ">FACEBOOK</option><option value="ΤΕΧΝΟΛΟΓΙΑ ">ΤΕΧΝΟΛΟΓΙΑ</option><option value="SMARTPHONES ">SMARTPHONES</option><option value="tutorial">ΟΔΗΓΟΣ</option><option value="portablee">PORTABLE</option><option value="DOWNLOAD ">DOWNLOAD</option><option value="phhs">PHOTOSHOP</option><option value="musicccc">ΜΟΥΣΙΚΗ</option><option value="ΠΑΙΧΝΙΔΙΑ ">ΠΑΙΧΝΙΔΙΑ</option><option value="movies">ΤΑΙΝΙΑ</option><option value="spam">SPAM</option><option value="votespolls">ΨΗΦΟΦΟΡΙΑ</option><option value="school">ΣΧΟΛΕΙΟ</option><option value="advert">ΔΙΑΦΗΜΙΣΗ</option><option value="vips">VIP</option><option value="ΥΓΕΙΑ ">ΥΓΕΙΑ</option><option value="tipsadvices">TIPS - ΣΥΜΒΟΥΛΕΣ</option><option value="soscall">ΚΛΗΣΕΙΣ SOS</option><option value="cooking">ΜΑΓΕΙΡΙΚΗ</option><option value="weather">ΚΑΙΡΟΣ</option><option value="staff">STAFF</option><option value="inprogress">ΣΕ ΕΞΕΛΙΞΗ</option><option value="solved">ΛΥΘΗΚΕ</option><option value="archieved">ΚΑΔΟΣ</option></select> <br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">Image of the topic ::</div>
  <input type="text" id="imgdesc" name="imgdesc" placeholder="Image URL" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">The text of the topic ::</div>
  <input type="text" id="textmsg" name="textmsg" placeholder="News Text" style="width: 600px;height: 150px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;text-align:right;display:inline-block;">The topic's source link ::</div>
  <input type="text" id="srxlink" name="srclink" placeholder="Source Link" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
<div style="width:200px;font-size:14px;display:inline-block;text-align:right">The topic's source name ::</div>
  <input type="text" id="srcname" name="srcname" placeholder="Source Name" style="width: 600px;height: 25px;border-radius: 3px;font-size: 13px!important;border: 1px solid #ccc;" /><br /><br />
 
<br /><BR /><BR />
<input type="submit" id="submitForm" value="Submit"/>
 
 
<script type="text/javascript">
 
document.getElementById('submitForm').onclick = function() {
  var message = '',
      title = document.getElementById('Title'),
      prefix = document.getElementById('prefixes'),
      desc = document.getElementById('imgdesc'),
      msg = document.getElementById('textmsg'),
      srclink = document.getElementById('srxlink'),
      srcname = document.getElementById('srcname'),
      forum = document.getElementById('forumSelect'),
      err = '';
 
  if (!title.value) err += 'Please fill in the title';
  if (!prefix.value) err += '\\nPlease select a prefix.';
  if (!desc.value) err += '\\nPlease fill in the description.';
  if (!msg.value) err += '\\nPlease fill in the message.';
  if (!srclink.value) err += '\\nPlease fill in the source link.';
  if (!srcname.value) err += '\\nPlease fill in the source name.';
  if (!forum.value) err += '\\nPlease select a forum.';
 
  if (err) {
    alert(err);
    return;
  } else {
    $.post('/post', {
          subject : '[' + prefix.value + '] ' + title.value,
      description : desc.value,
          message : '[center][img]' + desc.value + '[/img][/center]\\n' + msg.value + '\\nSource : [url=' + srclink.value + ']' + srcname.value + '[/url]',
            mode : 'newtopic',
                f : forum.value, // forum id
            post : 1
    }, function(d) {
      alert('Your topic has been posted.');
      window.location.href = $('a[href^="/viewtopic?t="]', d).attr('href');
    });
  }
};
</script>

Make sure that :
1. "Unauthorize unofficial forms to post messages and private messages on the forum" is disabled under General > Security.
2. You're using your forum's header and footer for the HTML page OR you have the jQuery library in your HTML page if you're not using your forum's header and footer.

This does work now!! Yay.. Now how can i set the forums i selected to use this form, once they press the new topic to redirect them to the hmtl page instead of the new topic form?

EDIT: Thanks Ange. I'll leave this a couple of days and if i get any problems i'll let your know..

Man Luffy, that site is all "GREEK" to me..

Hahaha @BlackScorpion, it's in Greek man what do you expect!! lol

jessy wrote:interessan ,You can explain how to add Thank you very much!

@Luffy okay, you're welcome.

@Jessy to be frank, if you do not understand the basics of HTML, CSS, or JavaScript I cannot help you with this.

OK thank you very much