User Post

Hi all,

Anybody have any ideas on this one?

Cheers

Damien

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

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?

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

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?

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

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.

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 and 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 or causes the upload not to work at all.

Any ideas?

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

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 🙂

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

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

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

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 🙂

I said to do this:
[html]
<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">
<div id="properform"></div>
</div>
[/html]