Jump to content
hctr1

Auto Submit Dropdown

Recommended Posts

I have a simple dropdown menu functioning as part of the navigation for my application.

I have managed to hide the submit button with CSS.

How would I make the dropdown auto submit when an option is selected...since there is now no submit button to click?

2019-03-20 09_22_08-Window.png

Share this post


Link to post
Share on other sites
<script type="text/javascript">
  document.addEventListener("DataPageReady", function(event) {
  var dropdownvalue = document.getElementById("DropDownID").value;
  if (dropdownvalue == "THISOPTION")
  document.forms["caspioform"].submit(); )} ;
</script>

Share this post


Link to post
Share on other sites

Thank you MayMusic.

Seems your script is setup to submit on a specific option, THISOPTION.

Anyway to simplify the script so it submits on any selected option and not just one specific option? (sorry if that was not clear in the original post)

Each of the options in the dropdown is already programmed to redirect to a specific page.

 

Also, where would this script go?...I imagine I would add a header/footer block to the datapage and insert the script in the footer?

Share this post


Link to post
Share on other sites

Hi @hctr1

You can try to use the code below, this will detect if a value is selected on your dropdown.  
Just put the code in the footer of your DataPage, and don't forget to update the code below and put the ID of your dropdown.

<script type="text/javascript">
/* Detect if a value is selected in your Dropdown and call a function, just don't forget to put the ID of your dropdown in the code below */
document.getElementById('dropdownID').onchange = function() {myFunction()};

function myFunction() {
// submit the form if an value is selected
setTimeout('document.forms["caspioform"].submit()',1000);  

}

</script>

I hope this helps.

Regards,

TsiBiRu

Share this post


Link to post
Share on other sites

TsiBiRu and MayMusic, appreciate the time you are taking to assist.

TsiBiRu, this is much more than I need.

My dropdown is already setup to redirect using the existing functionality of Caspio and it already works just fine to redirect after I select an option and CLICK the submit button...so none of this needs to be done in javascript.

All I am trying to accomplish is to get rid of the submit button (already done with CSS) and make the dropdown automatically proceed with the redirect it is suppose to do when I select an option, any option.

Unfortunately, my knowledge of javascript is inadequate that is why I am here seeking help. I think MayMusic's script is close but can be simplified for what I need.

Any help greatly appreciated.

Share this post


Link to post
Share on other sites
1 minute ago, hctr1 said:

TsiBiRu and MayMusic, appreciate the time you are taking to assist.

TsiBiRu, this is much more than I need.

My dropdown is already setup to redirect using the existing functionality of Caspio and it already works just fine to redirect after I select an option and CLICK the submit button...so none of this needs to be done in javascript.

All I am trying to accomplish is to get rid of the submit button (already done with CSS) and make the dropdown automatically proceed with the redirect it is suppose to do when I select an option, any option.

Unfortunately, my knowledge of javascript is inadequate that is why I am here seeking help. I think MayMusic's script is close but can be simplified for what I need.

Any help greatly appreciated.

Hi @hctr1,

I've updated my code above and made it simple. The code above will submit the form if any value in your dropdown is selected.

Regards,

TsiBiRu
 

Share this post


Link to post
Share on other sites

Hi @hctr1

To find the ID of your dropdown just follow the steps below.

1. On the preview or deploy mode of your Datapage press F12 on your keyboard to open the Dev Tools in your browser

2. Then press Ctrl+Shift+C on your keyboard, or simply click on this Icon, just make sure that it is highlighted.

image.png.f4e5ccf46808e66a835fc1890cee56bc.png 

3.  Click on your Dropdown, the element attribute of your dropdown should be highlighted 

image.thumb.png.d778d23e04109cdd8680598cead6d1cc.png

Just double click on the 'id' (cbParamVirtual1 in this example), then copy and paste it to our code in my previous comment.

I hope this help.

Regards,

TsiBiRu

Share this post


Link to post
Share on other sites

@TsiBiRu,

I figured that is how you get the ID. Did all of that already but still does not work.

I do see the ID cbParamVirtual1 but it is follow by an _ then a bunch of random letters and numbers like this: cbParamVirtual1_6a88102a3ff0a1

The sequence of letters and numbers also seems to be different from the preview and deployed datapage and changes on refresh.

Any thoughts?

Share this post


Link to post
Share on other sites
1 minute ago, hctr1 said:

@TsiBiRu,

I figured that is how you get the ID. Did all of that already but still does not work.

I do see the ID cbParamVirtual1 but it is follow by an _ then a bunch of random letters and numbers like this: cbParamVirtual1_6a88102a3ff0a1

The sequence of letters and numbers also seems to be different from the preview and deployed datapage and changes on refresh.

Any thoughts?

Hi @hctr1,

You are using a Submission Form/DataPage, right?
You can just try to disable the Ajax loading in your DataPage, just click on this button. 

image.png.25a0efcd86f53ce14d7e0eb7e51a1d1c.png

If you are still having an issue making the solution above work, please provide me the deployed URL of your DataPage, and I will try to fix this for you.

Regards,

TsiBIRu

Share this post


Link to post
Share on other sites

Hi @hctr1

Thank you for providing the deployed URL of your DataPage and a login credential.

I had a hard time making this solution work on your webpage as well. When I access your DataPage directly using your deployed URL (https://c5esh804.caspio.com/dp/b1c76000b16b1c0bcbb643b38c67) this code works, which will submit your submission DataPage. Kindly try this on your end as well

<script type="text/javascript">
  
document.getElementsByName('cbParamVirtual1')[0].onchange = function() {myFunction()};

function myFunction() {
// submit the form if an value is selected
setTimeout('document.forms["caspioform"].submit()',1000);  

}

 </script>

However, if we are accessing your DataPage on your web page (https://pablo.agronosotros.com/dashboard/) the code above will no longer work. That is because the form 'id' and the form 'action' will be gone when your DataPage is deployed on your web page.

In the direct URL, the form ID of your DataPage is set to 'caspioform'

image.thumb.png.fb8cf373552f29366b54e7fa508809f1.png

However, on your web page, the form 'ID' and the 'action' of your DataPage will be will be gone that is why the code will no longer be working.

image.thumb.png.f602346f94b48b532706791d6ca48373.png

I think this has something to do with your CMS/site builder. Which is beyond Caspio, may I know what CMS are you using? Is it possible for you to manually change the form element/properties in your CMS?

Regards,

TsiBiRu

Share this post


Link to post
Share on other sites

Would like to point out that if you are using any kind of "Special Elements" from the Form Element dropdown in the Configure Fields Wizard on Caspio, the element is given a randomID. Every 'Special Element' on the list will generate a different randomID at the end of the ID every single time the page is loaded.  Calculated Value was the only Special Element that did not receive a randomID when I was testing this, for some reason. When I first found this out a couple months ago, it seemed as if Live Support didn't know about this happening, either. In my experience, there is no way around this.

The ID that is showing up for your field in this case looks nearly identical to the ID of the fields I tested this with before, leading me to believe you are using a Special Element. Sorry I'm not much help with a solution, but I'm almost positive this is what is keeping you from getting the workflow you want.

KPC

Share this post


Link to post
Share on other sites

Hi @TsiBiRu,

No CMS present. Just a static HTML template.

I don't quite follow you on "Special Elements".

This submission form doesn't actually submit any data to tables. It is two virtual fields. One to receive the logged in user ID and another pulling items for the dropdown menu from a lookup table.

Looks like the datapage was nested in another form. I have moved it into another div and now "caspioform" does show up on the deployed page.

However, after adding you new suggestion, now as soon as the page loads, it redirects to the deployment URL instead of my application and continually loads and refreshes without any click.

I think it is trying to load the default or placeholder which doesn't have any URL to redirect to

Edited by hctr1
additional info

Share this post


Link to post
Share on other sites

Any of these in the blue square. If you're using any of these it will throw a randomID. I'm not sure if this is the only case where randomID is appended to an element, I just know the Special Elements do. I previously had a query string that would not pass a parameter due to the randomID, which caused me to dig a little, finding this. 

If you're using a standard dropdown, I'm not too sure where its getting it from. 

Screenshot (102).png

Share this post


Link to post
Share on other sites
2 minutes ago, hctr1 said:

@TsiBiRu & @kpcollier

 

Thanks, I have changed the element to a standard Dropbox and the elementID is not random anymore.

Does this make it easier to provide a solution?

Nice. That should definitely help. Now, go back to your DevTools like TsiBiRu showed you and get the new ID of the element. Then, try TsiBiRu's code that he provided earlier in this thread. Make sure to put this script in the Header, and make sure to uncheck 'Enable HTML Editor'. Also make sure to switch out Your_Dropdown_ID with the ID you got from DevTools.

<script type="text/javascript">
/* Detect if a value is selected in your Dropdown and call a function, just don't forget to put the ID of your dropdown in the code below */
document.getElementById('Your_Dropdown_ID').onchange = function() {myFunction()};

function myFunction() {
// submit the form if an value is selected
setTimeout('document.forms["caspioform"].submit()',1000);  

}

</script>

 

Share this post


Link to post
Share on other sites

Hi @ hctr1

I've just tested the code below directly on your web site using the Dev Tools, and I can confirm that the code below is now working.

You just need to copy and paste this code on the footer of your DataPage and that should do it.

<script type="text/javascript">
  
document.getElementsByName('cbParamVirtual1')[0].onchange = function() {myFunction()};

function myFunction() {
// submit the form if an value is selected
setTimeout('document.forms["caspioform"].submit()',1000);  

}

 </script>

Let me know if you will still encounter some issue.

Regards,

TsiBiRu

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...