Question

i try to use the tinybox Javascript.

Now i will try to use it on submit, but i don’t know how!?

<div id="add">
<form name="addVoc" action="javascript:TINY.box.show('system/import.php',1,300,150,1);" method="post" onsubmit='return checkForm();'>
    <img src="images/gb.png" width="13px" height="8px"> English: <input type="text" name="English" class="addBox" />
    <img src="images/de.png" width="13px" height="8px"> German: <input type="text" name="German" class="addBoxD" /><br><br>
    <img src="images/icon_hinweis.gif" width="10px" height="10px"> Add Voc <input type="submit" class="sbutton" value="Add"/>
</form>

Now it shows me the tinybox but nothing happens, the box is empty.

This is my JS checkForm()

    function checkForm(){

        if (document.forms["addVoc"].English.value==""){
            alert('Upps!'); 
            return false;
        }
        if (document.forms["addVoc"].German.value==""){
            alert('Upps!');
            return false;
        }
return true;
    }

In my Html Head i linked the Tinybox CSS and JS

<link rel="stylesheet" type="text/css" href="css/tinybox.css" />
<script type="text/javascript" src="js/tinybox.js"></script>

here is the import.php:

<?php
include 'include/connect.php';

$db_link = mysql_connect (MYSQL_HOST, MYSQL_BENUTZER, MYSQL_KENNWORT);
if (!$db_link)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("vokabel", $db_link);

$sql="INSERT INTO word (Englisch, Deutsch)
VALUES
('$_POST[Englisch]','$_POST[Deutsch]')";

if (!mysql_query($sql,$db_link))
  {
  die('Error: ' . mysql_error());
  }
echo "Vokabel wurde hinzugefügt!";

mysql_close($db_link)
?> 

I’m new on JS, i hope some one can help me… without tinybox it works perfectly

Thank you very mutch

Answer 1

Since you have

<input type="text" name="Deutsch" class="addBoxD" />

I suspect

if (document.forms["addVoc"].German.value==""){

should read

if (document.forms["addVoc"].Deutsch.value==""){

Also, you should add

return true;

to the last line of the checkForm() function.

I doubt either of these will fix your tinybox problem – this most likely because the system/import.php does not output anything.

Load system/import.php in your browser and make sure you get the output you expect. If you do, make sure that system/import.php is the correct relative path from the current page to get to import.php. If all of this is correct, please edit the question to include the source code of import.php.

Having said all that, it does seem a little odd to have the tiny box called as the action attribute of the form – are you sure this is what you want to do? What exactly are you trying to achieve here?

EDIT

Try this:

HTML

<div id="add">
<form name="addVoc" action="javascript:void(0);" onsubmit="return checkForm();">
    <img src="images/gb.png" width="13px" height="8px"> Englisch: <input type="text" name="Englisch" class="addBox" />
    <img src="images/de.png" width="13px" height="8px"> Deutsch: <input type="text" name="Deutsch" class="addBoxD" /><br><br>
    <img src="images/icon_hinweis.gif" width="10px" height="10px"> Add Voc <input type="submit" class="sbutton" value="Add"/>
</form>

Javascript

function checkForm(){

    if (document.forms["addVoc"].Englisch.value=="") {
        alert('Upps!'); 
        return false;
    }
    if (document.forms["addVoc"].Deutsch.value==""){
        alert('Upps!');
        return false;
    }

    TINY.box.show('system/import.php?Englisch='+document.forms["addVoc"].Englisch.value+'&Deutsch='+document.forms["addVoc"].Deutsch.value,1,300,150,1);

    return false;

}

PHP

<?php

  include 'include/connect.php';

  if (!$db_link = mysql_connect(MYSQL_HOST, MYSQL_BENUTZER, MYSQL_KENNWORT)) {
    die('Konnte keine Verbindung: ' . mysql_error());
  }
  mysql_select_db("vokabel", $db_link);

  $sql = "INSERT INTO `word` 
            (`Englisch`, `Deutsch`)
          VALUES
            ('".mysql_real_escape_string($_GET['Englisch'])."','".mysql_real_escape_string($_GET['Deutsch'])."')";

  if (!mysql_query($sql,$db_link)) {
    die('Fehler: ' . mysql_error());
  }

  echo "Vokabel wurde hinzugefügt!";

  mysql_close($db_link)

?>

ANOTHER EDIT

If you are using Tinybox 2, change this line:

TINY.box.show('system/import.php?Englisch='+document.forms["addVoc"].Englisch.value+'&Deutsch='+document.forms["addVoc"].Deutsch.value,1,300,150,1);

To this:

TINY.box.show({url:'system/import.php',post:'Englisch='+document.forms["addVoc"].Englisch.value+'&Deutsch='+document.forms["addVoc"].Deutsch.value,width:300,height:150});

And change the two occurences of $_GET in import.php to $_POST.