This topic contains 30 reply and 2 voices, and was last updated by Tareq Hasan 5 years, 11 months ago
Viewing 15 Posts - 1 through 15 (of 30 total)
Author Posts
October 21, 2013 at 6:45 pm 9254
Tareq Hasan -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
October 22, 2013 at 7:09 pm 9293
hatchmedia hatchmedia

Hi all,

Anybody have any ideas on this one?

Cheers

Damien

October 24, 2013 at 2:31 pm 9375
hatchmedia hatchmedia

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

October 24, 2013 at 8:14 pm 9400
Tareq Hasan Tareq Hasan

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?

November 15, 2013 at 8:19 pm 10103
hatchmedia hatchmedia

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

November 15, 2013 at 9:13 pm 10107
Tareq Hasan Tareq Hasan

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?

November 15, 2013 at 10:49 pm 10126
hatchmedia hatchmedia

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

November 16, 2013 at 12:54 am 10136
Tareq Hasan Tareq Hasan

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.

November 16, 2013 at 3:11 am 10144
hatchmedia hatchmedia

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?

November 16, 2013 at 3:49 pm 10164
Tareq Hasan Tareq Hasan

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

November 18, 2013 at 4:08 pm 10228
hatchmedia hatchmedia

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 🙂

November 18, 2013 at 9:21 pm 10237
hatchmedia hatchmedia

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

November 19, 2013 at 5:21 am 10244
hatchmedia hatchmedia

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

November 19, 2013 at 7:31 pm 10263
Tareq Hasan Tareq Hasan

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

November 19, 2013 at 7:44 pm 10264
hatchmedia hatchmedia

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 🙂

November 19, 2013 at 10:51 pm 10268
Tareq Hasan Tareq Hasan

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]

Viewing 15 Posts - 1 through 15 (of 30 total)