Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Popup, problem z przesyłaniem formularza
Forum PHP.pl > Forum > Przedszkole
KrzysiekKCN
8.01.2012, 03:52:40
Cześć, mam straszny problem z przesłaniem formularza w okienku popup.
W kodzie mam umieszczony div z popupem
Kod
Zmień stan produktu:
<a href="#"class="close" style="float:right;"><img src="images/table/action_delete.gif" border="0"></a>
<form action="index.php?do=depot&procedure=modify_book" name="formid" method="POST">
<p>Akcja:
        <select name="akcja" class="styledselect_form_1">
            <option value="1">ODPIS</option>
            <option value="2">ZWROT</option>
        </select>
</p>
<p>
Ilość: <input type="text" class="inp-form" name="ilosc"/>
</p>    
<p>
Data: <input type="text" class="inp-form" name="data"/>  - format RRRR-MM-DD
</p>    
<p>
OD/DO:
<p>BUDOWA: <input type="text" id="budowa" class="inp-form" name=""/>&nbsp;<a href="index.php?do=build&procedure=add_build"><img src="images/forms/add_build.png" border="0"></a></p>
<p>KLIENT: <input type="text" id="budowa" class="inp-form" name=""/>&nbsp;<a href="index.php?do=clients&procedure=add_client"><img src="images/forms/add_client.png" border="0"></a></p>
</p>
<input type="button" value="" class="form-submit" />
</form>
<a href="index.php?do=depot&procedure=show_all_product" onclick="document.formid.submit();">prześlij - próba linkiem</a>
</div>
</div>


i takie okienko otwieram linkiem:
Kod
<a href="#dialog" name="modal"><img src="images/forms/stan.png" border="0"></a>


do tego mam załączony jakiś tam css i kod jquery:
Kod
<script type="text/javascript">

$(document).ready(function() {    

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        
        //Get the A tag
        var id = $(this).attr('href');
    
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
    
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        
        //transition effect        
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",2.0);    
    
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
              
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
    
        //transition effect
        $(id).fadeIn(2000);
    
    });
    
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        
        $('#mask').hide();
        $('.window').hide();
    });        
    
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });            
    
});

</script>


no i problem jest w tym, że nie mogę przesłać formularza, ani do pliku w którym jest ten div, ani też do samego otwartego popupa.
Okienko otwiera się bezproblemowo, mogę umieszczać linki, tylko formularz nie chwyta.

Proszę o pomoc,
pozdrawiam i dzięki
czychacz
8.01.2012, 10:22:08
nie wiem, może z rana mało spostrzegawczy jestem, ale przydało by się zobaczyć, w jaki sposób tworzysz nowe okno. jak widzę, nie pokazałeś tej części kodu.
KrzysiekKCN
8.01.2012, 10:54:34
pokazałem. to cały kod wymagany to utworzenia nowego okna. No jeszcze załączam jquery 1.4.1
#edit
no faktycznie zjadłem 2 linie kodu
tak wygląda okno
Kod
<div id="boxes">
<div id="dialog" class="window">
Zmień stan produktu:
<a href="#"class="close" style="float:right;"><img src="images/table/action_delete.gif" border="0"></a>
<form action="index.php?do=depot&procedure=modify_book" name="formid" method="POST">
<p>Akcja:
        <select name="akcja" class="styledselect_form_1">
            <option value="1">ODPIS</option>
            <option value="2">ZWROT</option>
        </select>
</p>
<p>
Ilość: <input type="text" class="inp-form" name="ilosc"/>
</p>    
<p>
Data: <input type="text" class="inp-form" name="data"/>  - format RRRR-MM-DD
</p>    
<p>
OD/DO:
<p>BUDOWA: <input type="text" id="budowa" class="inp-form" name=""/> <a href="index.php?do=build&procedure=add_build"><img src="images/forms/add_build.png" border="0"></a></p>
<p>KLIENT: <input type="text" id="budowa" class="inp-form" name=""/> <a href="index.php?do=clients&procedure=add_client"><img src="images/forms/add_client.png" border="0"></a></p>
</p>
<input type="button" value="" class="form-submit" />
</form>
<a href="index.php?do=depot&procedure=show_all_product" onclick="document.formid.submit();">REFRESH</a>
</div>
</div>
';
czychacz
8.01.2012, 11:10:04
jeśli dobrze zrozumiałem, masz problem z samym przesłaniem formularza po kliknięciu na link REFRESH, tak?
jeśli tak, to spróbuj w OnClick tego link'a wywołać .submit() przez jQuery. w tej chwili "document.formid.submit();" może mieć problem. użyj może:
[PHP] pobierz, plaintext 
  1. $('form[name=formid]').submit();
[PHP] pobierz, plaintext

albo
[PHP] pobierz, plaintext 
  1. $('form[name="formid"]').submit();
[PHP] pobierz, plaintext
KrzysiekKCN
8.01.2012, 11:56:33
co, prawda, to przesyła formularz. Tylko nie wiem gdzie. Sprawdziłem w skrypcie w którym popup jest umieszczony i nic, do skryptu do którego odwołuje się formularz w ogóle nie przechodzi.
Jakieś pomysły?
Nie musi nawet nigdzie przechodzić, może odpalić się w samym popupie, lub skrypcie w którym jest umieszczony.
czychacz
8.01.2012, 16:56:01
z jakiej przeglądarki korzystasz?
jeśli to firefox - skorzystaj z Firebug'a, aby sprawdzić, czy w ogóle coś jest wysyłane.
jeśli to chrome - rozwiązanie podobne do Firebug'a już w nim jest. korzysta się podobnie jak w wyżej wymienionym przypadku.
KrzysiekKCN
10.01.2012, 09:29:06
Mam wszystkie bardziej znane przeglądarki, więc to nie sprawia żadnego prbolemu. Szczerze nie potrafię zabardzo obsługiwać się FireBugiem, ale nigdzie nie zauważyłem niczego na temat wysyłania tego formularza.
- A może jakoś pobierać i przetwarzać dane w jQuery w tym popupie? Naprawdę potrzebuje takiego rozwiązania, nic nie udało mi się narazie znaleźć.

Odświeżam, proszę o jakieś pomysły na rozwiązanie problemu. Próbowałem używać innych popup, ale muszą one być w skrypcie jako div i wyświetlane, inna opcja raczej nie ma większych szans na powodzenie :/
potreb
10.01.2012, 11:43:06
Umieść gdzieś kod żeby można było przetestować live, z drugiej strony lepiej zastosować dialog z formularzem i metodą ajaxową zapisywac dane.
KrzysiekKCN
10.01.2012, 14:35:47
Przepraszam za pusty plik, coś źle wgrałem.
Pełen wiedzy po spotkaniu AKAI i programistą WIKIA jQuery wyszło mi takie coś:

Kod
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {    

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        
        //Get the A tag
        var id = $(this).attr('href');
    
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
    
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        
        //transition effect        
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",2.0);    
    
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
              
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
    
        //transition effect
        $(id).fadeIn(2000);
    
    });
    
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        
        $('#mask').hide();
        $('.window').hide();
    });        
    
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });            
    
});

</script>
<style>
#mask {
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:300px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px;
  height:250px;
  padding:10px;
  background-color:#ffffff;
  border: 2px solid grey;
}

#boxes #dialog1 {
  width:375px;
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent;
  width:375px;
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent;
  width:267px;
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px;
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent;
  width:326px;
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<?php
print_r($_POST);
echo '
<div id="boxes">
<div id="dialog" class="window">
Zmień stan produktu:
<a href="#"class="close" style="float:right;"><img src="images/table/action_delete.gif" border="0"></a>
<form action="index.php" name="formid" method="POST">
<p>Akcja:
        <select name="akcja" class="styledselect_form_1">
            <option value="1">ODPIS</option>
            <option value="2">ZWROT</option>
        </select>
</p>
<p>
Ilość: <input type="text" class="inp-form" name="ilosc"/>
</p>    
<p>
Data: <input type="text" class="inp-form" name="data"/>  - format RRRR-MM-DD
</p>    
<p>
OD/DO: <input type="text" class="inp-form" name="stanproduktu"/>
<p>BUDOWA: <input type="text" id="budowa" class="inp-form" name="budowa"/>&nbsp;<a href="index.php?do=build&procedure=add_build"><img src="images/forms/add_build.png" border="0"></a></p>
<p>KLIENT: <input type="text" id="klient" class="inp-form" name="klient"/>&nbsp;<a href="index.php?do=clients&procedure=add_client"><img src="images/forms/add_client.png" border="0"></a></p>
</p>
<input type="submit" value="Przycisk submit">
</form>
</div>
</div>
';
/////////////
echo '<a href="#dialog" name="modal">OTWÓRZ FORMULARZ</a>';
?>
</body>
</html>


problem w tym że jeżeli podpinam to pod mój skrypt wyświetla tylko pole akcja :/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.