04 July 2016

Submit Multiple Forms with One Button

Birden Fazla HTML Form Yönetimi


Aşağıdaki örnekte, birden fazla form elementi içeren sayfalarda, tek bir button ile toplu olarak istediğimiz sayfaya POST edeceğiz. Buradaki mantık; form içeriğindeki elementleri, JQUERY yardımı ile ekstra bir form içeriğine çağırıp, verileri tek bir form altında toplayıp öyle POST etmek.

Öncelikle index(.html, .php vs.) sayfamızı oluşturup, içine bu kodları yazıyoruz.


<html>
<head>
<!-- sistemimizdeki jquery dosyasini cagiriyoruz-->
<script type="text/javascript" src="jquery-latest.js"></script>

<!--
Bu fonksiyon ile, form1 ve form2 ID sine sahip, içeriğinde input, select, textarea gibi form elementlerinin değerlerini aliyoruz, ve birlesik_form ID'li formun içindeki hidden elemente atıyoruz.
-->
<script type="text/javascript">
    function form_birlestir() {
        $yeniform= $("#birlesik_form");
        $("#form1 input, #form2 input, #form1 select, #form2 select, #form1 textarea, #form2 textarea").each(function(){
            $yeniform.append("<input type='hidden' name='"+$(this).attr('name')+"' value='"+$(this).val()+"' />");
        });
}
</script>

</head>
<body>
<form id="form1">
    <input type='text' name='f1a' />
    <input type='text' name='f1b' />
</form>
<form id="form2">
<input type='text' name='f2a' />
<input type='text' name='f2b' />
</form>

<form id="birlesik_form" action="post.php" method="POST" onsubmit="form_birlestir(); return true;">
<input type="submit" />
</form>
</body>
</html>

Sonuçları görmek için post.php sayfamızı oluşturup, içine bu kodları yazıyoruz.


<?php
foreach($_POST AS $key=>$val) {
echo $key.":".$val."<br>";
                       }
?>










No comments:

Post a Comment