0

I have a form that contains a menu system. In the menu system you select which type of form you want to dynamically load. [Ex. Upload Video, Embed Video, Upload Photo, Import Image, Upload Audio, Share Audio] By default, with no form selected and loaded, the form process 'Add Text'.

I used to have no issues with my form when i wasn't using $.post, but the page reloads were killing me softly. So, now only 'Add Text' works.

The way the form works is the form id changes onclick events of the form selected. [Ex. Upload video -> form id='uploadvideo', and when back to main menu -> form id='sendtxt'] The issue is the serialization of the form when a menu item is clicked. This is the JS/HTML for the menu system.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"     type="text/javascript"></script>
<script language="javascript">
$(function(){
  $(".imge").click(function(){
    $("#txtrmenu").load("/widgets/txtr/optn/imge.php");
    $("#txtrform").attr('id', 'sendimge');
  });
});

$(function(){
  $(".imgl").click(function(){
    $("#txtrmenu").load("/widgets/txtr/optn/imgl.php");
    $("#txtrform").attr('id', 'sendimgl');
  });
});

$(function(){
  $(".vide").click(function(){
    $("#txtrmenu").load("/widgets/txtr/optn/vide.php");
    $("#txtrform").attr('id', 'sendvide');
  });
});

$(function(){
  $(".vidl").click(function(){
    $("#txtrmenu").load("/widgets/txtr/optn/vidl.php");
    $("#txtrform").attr('id', 'sendvidl');
  });
});

$(function(){
  $(".aude").click(function(){
    $("#txtrmenu").load("/widgets/txtr/optn/aude.php");
    $("#txtrform").attr('id', 'sendaude');
  });
});

$(function(){
  $(".audl").click(function(){
    $("#txtrmenu").load("/widgets/txtr/optn/audl.php");
    $("#txtrform").attr('id', 'sendaudl');
  });
});
</script>

<img class="imgl" src='/assets/imgl.png'>
<img class="imge" src='/assets/imge.png'>
<img class="vidl" src='/assets/vidl.png'>
<img class="vide" src='/assets/vide.png'>
<img class="audl" src='/assets/audl.png'>
<img class="aude" src='/assets/aude.png'>

This is the JS for the $.post functions. Note: Only the first function works.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){

$("#txtrform").submit(function(){

    $.post('http://mediahood.net/widgets/txtr/optn/proc/sendtxt.php', $("#txtrform").serialize(), function(data) {
        $("#statusimge").html(data);
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;       
});

$("#sendaude").submit(function(){

    $.post('http://mediahood.net/widgets/txtr/optn/proc/shareaudio.php', $("#sendaude").serialize(), function(data) {
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;           
}); 

$("#sendaudl").submit(function(){

    $.post('http://mediahood.net/widgets/txtr/optn/proc/uploadaudio.php', $("#sendaudl").serialize(), function(data) {
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;           
}); 

$("#sendimge").submit(function(e){

    $.post('http://mediahood.net/widgets/txtr/optn/proc/importphoto.php', $("#sendimge").serialize(), function(data) {
        $("#statusimge").html(data);
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;           
}); 

$("#sendimgl").submit(function(){

    $.post('http://mediahood.net/widgets/txtr/optn/proc/uploadphoto.php', $("#sendimgl").serialize(), function(data) {
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;           
}); 


$("#sendvide").submit(function(){

    $.post('http://mediahood.net/widgets/txtr/optn/proc/embedvideo.php', $("#sendvide").serialize(), function(data) {
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;           
}); 


$("#sendvidl").submit(function(){

    $.post('http://mediahood.net/widgets/txtr/optn/proc/uploadvideo.php', $("#sendvidl").serialize(), function(data) {
        $("#col3").load("/include/txtrpbox/feed.php");
        $('input#txtrinput').val('');
    });

    return false;           
}); 

});
</script>

You can visit mediahood.net and login with guest/guest. To see how 'The Splash' works. Its still under development. But I need some help figuring out why the dynamically changed form doesn't serialize. I even have an alert box in the second box returning the results, and the changed forms return nothing. Only the default, 'sendtxt' works.

Tim Banon
  • 95
  • 1
  • 7
  • 1
    You need to read up on [how to upload files with AJAX](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery). – gilly3 May 05 '13 at 16:58
  • yea tht too but im at least trying to get the embed forms to serialize. they dont require uploads. i modified my alert_div to output which php processor is being called and when i click a menu item the default doesn't change. – Tim Banon May 05 '13 at 18:18
  • I change the form id and load in any new input fields after each menu click. Then, I have multiple $.post functions to corresponds to all of the form combinations. Is that correct? – Tim Banon May 05 '13 at 18:22
  • Studying the behavior, when menu item changes to the form id, the submit button doesn't adopt its corresponding $.post. As if, the form never changed. Any ideas? – Tim Banon May 05 '13 at 18:28

0 Answers0