Can't retrieve any element from inside leg correctly...

[Julia Cristina]

Hello, I'm trying to create and submit a form from inside an basic implementation of tourbus-legs class.

Here is my code:

HTML

<ol class='tourbus-legs' id='formulario-inscricao<?php echo $unidade->id?>'>
	<li data-orientation='centered' data-width='900'>
	        <!-- some pre-form info here -->
	        <a href='javascript:void(0);' class='blog_readmore tourbus-next'>Got it!</a>
	</li>

	<li data-orientation='centered' data-width='700'>
	 <form method="post" name="inscricao-minicurso<?php echo $unidade->id?> " id="inscricao-minicurso<?php echo $unidade->id?>">
	        <!--some inputs here -->
		<button type="submit" name="bsubmit<?php echo $unidade->id?>" value="Submit!" class='wpcf7-submit'>Submit!</button>
         </form>

	<a href='javascript:void(0);' class='blog_readmore tourbus-stop'>Close form!</a>
		</li>
	</ol>

JS

<script type="text/javascript">
$("#inscricao-minicurso<?php echo $unidade->id?>").on('submit',function(e){
	alert('event found!');
	e.preventDefault();
});

</script>

Here is how I trigger the tourbus (it's a click event):

<script type="text/javascript">

$(document).ready(function(){
	$("#altinscreve<?php echo $unidade->id?>").on('click',function(evt) {
		var tour = $('#formulario-inscricao<?php echo $unidade->id?>').off().on().tourbus( {} );
		tour.trigger('depart.tourbus');
		tour.trigger('destroy.tourbus');

	});
	$("#inscreve<?php echo $unidade->id?>").on('click',function(evt) {
		var tour = $('#formulario-inscricao<?php echo $unidade->id?>').off().on().tourbus( {} );
		tour.trigger('depart.tourbus');
		tour.trigger('destroy.tourbus');

	});

});

</script>

The event found! alert always works if I delete the class='tourbus-legs' parameter from the <ol> tag. This seems to be a conflict of event listeners in the code. Any ideas in how can I harmonize the two?

small edit: the echo can be replaced by any number.

[Ryan Funduk]

Hm so I don't think I've ever tested forms in tour legs... the tour legs 'definition' isn't actually used directly, it's more like a template which is used to create the actual elements. So your id properties are going to cause problems. What you need to do is remove the ids, use classes instead, then wire up/tear down your submit event for only the appropriate leg in callbacks: onLegStart and onLegEnd. Each leg is lazy loaded so it doesn't even exist until then. Finally, you're triggering depart and then immediately destroy for some reason, which is bound to be not what you want 😉

I hope that helps!

[Julia Cristina]

Hi, I'm going to try and implement what you sugested. The tourbus.destroy was me getting desperate xD
In the moment I am using the action parameter for the form in the most basic way possible, since it's the most reliable method.
It seems I'll have a little bit to study so this might take some time...

[Ryan Funduk]

👍