This topic is: not resolved

This topic contains 30 replies, has 2 voices, and was last updated by  Tareq Hasan 5 years, 3 months ago.

Viewing 15 posts - 1 through 15 (of 31 total)
  • Author
    Posts
  • #9254

    hatchmedia
    Participant
    Post count: 116

    -Edit : Sorry, I posted this into the Regular WPUF Forum earlier, meant to be in here.

    Hi guys,

    Hopefully one you can help with which is kind of related to one of my previous posts.

    I have four forms set up. I want the user to select from a drop down which form they choose to upload using. When they fill in the form and click submit, they are redirected to something like the following:

    http://www.mysite.ie/members/members_username/submit/?post_title=test&wpuf_filesfeatured_image=3645&post_content=test&location=37&breed=121&size-dogs=98&sexes-dogs=43&_wpnonce=1ca800c568&_wp_http_referer=%2Fmembers%2Fmember_username%2Fsubmit%2F&form_id=1258&page_id=47&action=wpuf_submit_post&submit=Submit

    The post then does not upload. This happens with all the forms.

    I am using the following code on the submit page:

    <select id="opts" onchange="showForm()"><option value="0">Select Option</option><option value="1">Dogs</option><option value="2">Cats</option><option value="3">Farms</option><option value="4">Others</option></select>
    <div id="f1" style="display: none;"><form name="form1">[wpuf_form id="1258"]</form></div>
    <div id="f2" style="display: none;"><form name="form2">[wpuf_form id="1267"]</form></div>
    <div id="f3" style="display: none;"><form name="form2">[wpuf_form id="1274"]</form></div>
    <div id="f4" style="display: none;"><form name="form2">[wpuf_form id="1275"]</form></div>
    <script type="text/javascript">// <![CDATA[
    function showForm(){
    var selopt = document.getElementById("opts").value;
    if (selopt == 1) {
    document.getElementById("f1").style.display="block";
    document.getElementById("f2").style.display="none";
    document.getElementById("f3").style.display="none";
    document.getElementById("f4").style.display="none";
    }
    if (selopt == 2) {
    document.getElementById("f2").style.display="block";
    document.getElementById("f1").style.display="none";
    document.getElementById("f3").style.display="none";
    document.getElementById("f4").style.display="none";
    }
    if (selopt == 3) {
    document.getElementById("f3").style.display="block";
    document.getElementById("f1").style.display="none";
    document.getElementById("f2").style.display="none";
    document.getElementById("f4").style.display="none";
    }
    if (selopt == 4) {
    document.getElementById("f4").style.display="block";
    document.getElementById("f1").style.display="none";
    document.getElementById("f2").style.display="none";
    document.getElementById("f3").style.display="none";
    }
    }
    // ]]>
    </script>

    I hope you can help.

    Damien

    #9293

    hatchmedia
    Participant
    Post count: 116

    Hi all,

    Anybody have any ideas on this one?

    Cheers

    Damien

    #9375

    hatchmedia
    Participant
    Post count: 116

    Hi guys,

    There seems to be a javascript conflict with this which I am unable to fix. Would you have any ideas on where to look to resolve this issue?

    Thanks

    Damien

    #9400

    Tareq Hasan
    Keymaster
    Post count: 2831

    I believe something is changing the forms POST method to GET. So upon submitting the form you get that big nasty URL. Any plugin conflict?

    #10103

    hatchmedia
    Participant
    Post count: 116

    Hi Tareq,

    Hopefully you can provide a little more insight to this.

    I have taken a different approach with my issue of four forms to upload to different custom post types.

    I have created a folder on the root of my site called ‘forms' that contain the four different wpuf forms. I have added the following code to my submit page in the WP backend:

    <Select id="formselector">
       <option value="empty">Select a Form</option>
       <option value="one">Form One</option>
       <option value="two">Form Two</option>
       <option value="three">Form Three</option>
       <option value="four">Form Four</option>
    </Select>
    <div id="properform"></div>
    
    <script type="text/javascript">// <![CDATA[
    	jQuery(function() 
    	{
    		jQuery('#formselector').change(function()
    		{
    jQuery('#properform').empty();
    			form = jQuery(this).val();
    			if (form == 'one' || form == 'two' || form == 'three' || form == 'four')
    {
    jQuery("#properform").load("http://www.mysite.ie/forms/"+form+".html");
    }
    		});
    	});
    // ]]></script>

    Whats happening now though is instead of getting a big nasty url, I am getting nothing at all. When I click submit, the page loads to a new page which looks like some form of default buddypress members page, but the url is still the same as the submit form ie http://www.mysite.ie/member/username/submit/.

    The post does not upload as a result.

    I hope you can help me with this as I really need to get it resolved once and for all πŸ™‚

    Cheers

    Damien

    #10107

    Tareq Hasan
    Keymaster
    Post count: 2831

    I have created a folder on the root of my site called β€˜forms’ that contain the four different wpuf forms. I have added the following code to my submit page in the WP backend:

    How can a directory have the wpuf forms if it's not WordPress, I am confused!

    In the select dropdown change event, you are loading a HTML page. How is that related to WPUF?

    #10126

    hatchmedia
    Participant
    Post count: 116

    Hi Tareq,

    Well, what I did was include the shortcode for the four forms individually onto the site. I then viewed the source and copied out the HTML for each of the forms and this is what is pulled by the code mentioned above. This should mean that what I am pulling versus what the shortcode is pulling will be exactly the same.

    This actually got around another issue I had with the featured image box being pulled 4 times because it effectively had the same ID.

    http://wedevs.com/support/topic/upload-issue-when-using-a-drop-down-form/

    Is this insane? haha

    #10136

    Tareq Hasan
    Keymaster
    Post count: 2831

    Seems like insane πŸ˜‰

    You could create multiple pages in WP with those forms and fetch them as you are fetching now, fetch only the forms, not the whole page.

    Anyway, still that won't work, because these forms uses ajax to submit the contents. As the forms aren't loaded in DOM yet, the submit event doesn't fire when you click submit button, because it was loaded via ajax. So, nothing happens, but a page load.

    Try adding fetching the form within a div class wpuf-form-add.
    [html]
    <div class="wpuf-form-add">
    <!– fetch and display the forms –>
    </div>
    [/html]

    That might work, git it a try.

    #10144

    hatchmedia
    Participant
    Post count: 116

    Thanks Tareq!

    That does not seem to be working unfortunately.

    I have this in the Submit page:

    <Select id="petselector">
       <option value="empty">Select a Pet</option>
       <option value="dog">Submit a Dog</option>
       <option value="cat">Submit a Cat</option>
       <option value="farm">Submit a Farm Animal</option>
       <option value="other">Submit an Other Type</option>
    </Select>
    <div id="properform"></div>
    
    <script type="text/javascript">// <![CDATA[
    	jQuery(function() 
    	{
    		jQuery('#petselector').change(function()
    		{
    jQuery('#properform').empty();
    			form = jQuery(this).val();
    if (form == 'dog') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-dogs");
    if (form == 'cat') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-cats");
    if (form == 'farm') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-farms");
    if (form == 'other') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-others");
    		});
    	});
    // ]]></script>

    I created four separate pages with just the shortcode for each for in them. I also created a template to just call the_content(), as follows:

    <?php
    /*
    Template Name: Only content
    */
    ?>
    <?php wp_head(); ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <?php the_content(); ?>
    <?php endwhile; ?>
    <?php endif; ?>
    <?php wp_footer();?>

    At first, I did not have < ?php wp_head(); ?> and < ?php wp_footer(); ?> included, but nothing happened. After adding them, the forms submit but seems to load twice (it even displays two loading icons). The first time it loads, it displays an alert saying ‘undefined'. Once I click ok to that, it then continues and uploads the post.

    Removing either < ?php wp_head(); ?> or < ?php wp_footer(); ?> causes the upload not to work at all.

    Any ideas?

    #10164

    Tareq Hasan
    Keymaster
    Post count: 2831

    Did you followed the instruction I said about adding the .wpuf-form-add class?

    #10228

    hatchmedia
    Participant
    Post count: 116

    Hi Tareq,

    TO be honest, what I tried I actually thought was the same thing, but re-reading it now may show why I am having problems with the wp_head and wp_footer ie not taking the actual content from a single div.

    Would that seem right?

    Just trying to figure it all out πŸ™‚

    #10237

    hatchmedia
    Participant
    Post count: 116

    Ok, I have tried it with the class like you suggested but it still doesnt like it.

    In each individual submit page, for each of the forms I have:

    <div class="wpuf-form-add">
    [wpuf_form id="XXXX"]
    </div>

    In the main submit page, I have:

    <select id="petselector">
    <option value="empty">Select a Pet</option>
    <option value="dog">Submit a Dog</option>
    <option value="cat">Submit a Cat</option>
    <option value="farm">Submit a Farm Animal</option>
    <option value="other">Submit an Other Type</option>
    </select>
    <div id="properform"></div>
    
    <script type="text/javascript">// <![CDATA[
    jQuery(function()
      {
        jQuery('#petselector').change(function()
     	{ jQuery('#properform').empty();
     	   form = jQuery(this).val(); 
                  if (form == 'dog') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-dogs .wpuf-form-add"); 
                  if (form == 'cat') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-cats .wpuf-form-add"); 
                  if (form == 'farm') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-farms .wpuf-form-add"); 
                  if (form == 'other') jQuery("#properform").load("http://www.adoptapet.ie/submit/submit-others .wpuf-form-add"); 		
         }); 	
     });
    // ]]>
    </script>

    This is successful in loading the correct forms, but it unfortunately the upload image buttons then stop working (ie, when they are clicked, the just add # to the end of the URL) and the submit button just does as it has before and load the page but not actually do anything or go anywhere.

    You mentioned before to me to maybe try it as one big form and then by using filters, display the fields required as a selection is made from the dropdown. My jquery isnt the strongest so would you be able to give me an idea of how this might be started and then I could try finish the rest myself?

    Cheers again Tareq!

    Damien

    #10244

    hatchmedia
    Participant
    Post count: 116

    Hey Tareq,

    I was just thinking about this and because I use different Custom Post Types, I dont think I will be able to use one big form because I need to send the different posts to different custom post type areas.

    Is there anything that can be done with this issue? Surely there is a way to post to different custom post types but by selecting the desired form from a drop down menu?

    I'm really running out of ideas on this πŸ™‚

    Cheers

    Damien

    #10263

    Tareq Hasan
    Keymaster
    Post count: 2831

    What I asked you is to add the class like this:
    [html]<div class="wpuf-form-add"><div id="properform"></div></div>[/html]

    #10264

    hatchmedia
    Participant
    Post count: 116

    Apologies, I thought when you said:

    <div class="wpuf-form-add">
    <!-- fetch and display the forms -->
    </div>

    …that you wanted me to wrap that around the form itself which is help on a separate page, which is what I have done.

    Or are you saying to just wrap the forms in the class on the same page as the dropdown menu? Something like:

    <select id="petselector">
    <option value="empty">Select a Pet</option>
    <option value="dog">Submit a Dog</option>
    <option value="cat">Submit a Cat</option>
    <option value="farm">Submit a Farm Animal</option>
    <option value="other">Submit an Other Type</option>
    </select>
    <div class="wpuf-form-add">
    [wpuf_form id="XXXX"]
    </div>

    Sorry for any misunderstanding here πŸ™‚

Viewing 15 posts - 1 through 15 (of 31 total)

The topic ‘User Post’ is closed to new replies.