Pecuilar Form Submission Problem With Hidden Fields

[ke-jo]

Hello,
I have a very long form that is having problems submitting. The user has several options in a dropdown. Depending on their selection certain chunks of HTML are removed from sight using ".hide()". This all works as expected. The problem is the form will NOT submit if these chunks of HTML code are hidden. If I go to the browser tools and delete each of these hidden HTML chunks the form submits perfectly. I have tried to use ".remove()" but the problem is I am unable to restore it if the user decides to go back and change a form option. I also tried ".detach()" but it does not work if the append function is in another place on the page. I thought that maybe I needed to disable the inputs in these corresponding chunks of HTML. However, that does not make a difference. I also tried to condense the entire chunk of HTML block into a single line (horrible wasteful excess and duplication) and load as "innerHTML". However, there are "<?php echo ?>" elements inside the blocks that do not cooperate in this condensed single line of HTML. Does anybody know how to get the form to submit while there are hidden blocks of HTML code or another way to get this to work?

$('.group2,.group3,.group5').hide();

[ke-jo]

ke-jo
I added more code for you to inspect. I tried to clean it up so you can see it better. Please forgive any mistakes in my cleanup process.

  `$(document).ready(function() {
        
            var $sections = $('.form_section');
            
	  function navigateTo(index) {
	  
		//Mark the current section with the class 'current'
		$sections
		.removeClass('current')
		.eq(index)
		.addClass('current');
		
		//Show only the navigation buttons that make sense for the current section:
		$('.form_navigation2 .previous').toggle(index > 0);
		var atTheEnd = index >= $sections.length - 1;
		$('.form_navigation1 .submit_button').toggle(!atTheEnd);
		$('.form_navigation2 [type=submit]').toggle(atTheEnd); 
	}
	
	function curIndex() {
		//Return the current index by looking at which section has the class 'current'
		return $sections.index($sections.filter('.current'));
	}


            $('.form_navigation2 .previous').click(function() {			
		navigateTo(curIndex() - 1);
                    $('#the_form').reset;
                    
            $('.form_navigation1 .submit_button').click(function() {
		$('#the_form').parsley().whenValidate({
			group: 'block-' + curIndex()
		}).done(function() {
			navigateTo(curIndex() + 1);
		});
		if ($('.part1').val() == 'option1') {
                    $('.group2,.group3,.group5').hide();
                    }
                    if ($('.part2').val() == 'option2') {
                    $('.group1,.group2,.group5').hide();
                    }

          //Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
	$sections.each(function(index, section) {
		$(section).find(':input').attr('data-parsley-group', 'block-' + index);
	});
	navigateTo(0); //Start at the beginning
     });`

[Weedpacket]

Might have to show a bit more than just one line that might not even be where the problem lies.

[ke-jo]

Weedpacket
I added more code for you to inspect. I am not sure if the problem lies elsewhere. But certainly removing what is hidden (grayed out) works.
thanks

[siberp]

Formu if else komutları arasına alarak çözersin.

if($group == "kontrol"){
echo "içeriği göster veya gönder";
} else {
echo "içeriği gizle ve gönderme";
}

[ke-jo]

siberp

Thanks for your reply. I added more code so you can see more of the issue. I have my conditional statements wrapped around the ".hide()" code. If I go to the browser tools and delete the hidden sections (grayed out). It works perfectly. Do you see the problem in my code? Thank you

[ke-jo]

I added more code for you to inspect. I tried to clean it up so you can see it better. Please forgive any mistakes in my cleanup process.
`
$(document).ready(function() {
var $sections = $('.form_section');

	function navigateTo(index) {
		//Mark the current section with the class 'current'
		$sections
		.removeClass('current')
		.eq(index)
		.addClass('current');
		//Show only the navigation buttons that make sense for the current section:
		$('.form_navigation2 .previous').toggle(index > 0);
		var atTheEnd = index >= $sections.length - 1;
		$('.form_navigation1 .signup_now_button').toggle(!atTheEnd);
		$('.form_navigation2 [type=submit]').toggle(atTheEnd); 
	}

	function curIndex() {
		//Return the current index by looking at which section has the class 'current'
		return $sections.index($sections.filter('.current'));
	}

$('.form_navigation2 .previous').click(function() {
navigateTo(curIndex() - 1);
$('#the_form').reset;

$('.form_navigation1 .submit_button').click(function() {
$('#the_form').parsley().whenValidate({
group: 'block-' + curIndex()
}).done(function() {
navigateTo(curIndex() + 1);
});
if ($('.part1').val() == 'option1') {
$('.group2,.group3,.group5').hide();
}
if ($('.part2').val() == 'option2') {
$('.group1,.group2,.group5').hide();
}

//Prepare sections by setting the data-parsley-group attribute to 'block-0', 'block-1', etc.
$sections.each(function(index, section) {
$(section).find(':input').attr('data-parsley-group', 'block-' + index);
});
navigateTo(0); //Start at the beginning
});
`

[Weedpacket]

So at the end there you attach a handler to the form submit button's "click" event, and the handler returns a falsy value (undefined, because there is no return statement). It's been too long since I've done jQuery to know if that cancels event propagation and stops the event from reaching the submit button's submit handler.

Also this part:

            $('.form_navigation2 .previous').click(function() {			
		navigateTo(curIndex() - 1);
                    $('#the_form').reset;

looks incomplete. the last line doesn't look like it does anything (should it be reset()?) and there's no closing }); to separate it from the next part.

[ke-jo]

Weedpacket
Thanks for your help. The reset works fine. The issue is either:

1. Make the form "submit" with .show()/.hide() functions being used. or
2. Find a way to remove HTML blocks of code and REPLACE them completely on click if user decides to go back by pressing reset.

Both directions can fix the problem if a solution is found for either of these two issues.

The last parenthesis and curly braces are missing here. I am unable to add them in the code here, but they are present and working in original code.

 Thanks

[Weedpacket]

What about the first part of what I wrote?

[ke-jo]

Weedpacket
Yes, thanks. Even if I use a "return true;" statement it does not correct the issues of removing and replacing the HTML code blocks. Nor does it submit the form if I am using "show()/hide() functions. The form will only submit if there are no hidden inputs in the chunks of code that are hidden. It still appears to need a fix for the hidden HTML. I even tried to ".clone()" the chunk of HTML before it was remove to restore it later. However, it appears that if the original chunk of code is ".removed()" the clone does not work.

I have a third option of using the ".remove()" to remove all the HTML blocks then replacing it as a very long single string using innerHTML. But I need a way to place some <?php echo something?> into the very long string without the HTML block having issues. Do you know how to place <?php?> into an HTML string without issues?
Thanks