Is it possible to have overlapping buttons and be able to click both of them when the button on top is clicked?

Ask the community
,
1

I have a slideshow with an html element that shows an aWeber contact form on one slide. It has a submit button. When I click Submit, it works and adds the contact to aWeber but it does not move to the next slide. The JS code to change slide is:

$w(“#fullWidthSlides1”).changeSlide(12)

I am unable to figure out how to change the slide on click since the submit button is created by HTML. If I could add a Wix button overlapping the submit button, it would solve the issue but the click should pass to both the buttons. This doesn’t seem to happen.

2

You can’t have a button on top of another button and expect them both to work as one would be blocking out the other.

You could change one of the buttons from being an onClick event to a onKeyPress event so that the button would not have to be clicked on to work and nor would you need the button either.

The easiest way to do it would be to have the next slide call included with the submit function code, so that it happens all at the same time.

However, as your form is in a iframe, then you can look at sending data from the iframe to the page so that the next slide code can be called.

https://www.wix.com/corvid/reference/$w.HtmlComponent.html

3

Thank you for your quick reply. I tried sending data from the iframe to the page but it does not seem to work. Here is what I did:

1) On the Page Code

857×472 28.1 KB

Added onMessage, I believe this is a listener.


Called a function to change the slide.

2) HTML code on iFrame

//This is the button that calls sendReturnMessage function
<input name=“submit” id=“af-submit-image-791644328” type=“image” class=“image” style=“background: none; max-width: 150%;” alt=“Submit Form” src=“https://static.wixstatic.com/media/d692ae_850dd981e79845529ede4596a2224d5b~mv2.png” tabindex=“502” onclick="sendReturnMessage() " />

//This is the function that send message to the Page code

Unfortunately this does not seem to work.

4

@givemeawhisky Problem Solved! I was calling the function wrong this whole time.
postMessage passes 2 values!

Here’s what I did to solve the problem:
<input name=“submit” id=“af-submit-image-791644328” type=“image” class=“image” style=“background: none; max-width: 150%;” alt=“Submit Form” src=" https://static.wixstatic.com/media/d692ae_850dd981e79845529ede4596a2224d5b~mv2.png " tabindex=“502” onclick=" window.parent.postMessage(‘message’,'')* " />