Auto Submit Dropdown

[hctr1]

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?

[MayMusic]

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

[MayMusic]

Replace DropDownID with the actual ID and also THISOPTION with the selected option that should submit the form

[hctr1]

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?

[TsiBiRu]

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

[hctr1]

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.

[TsiBiRu]

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
 

[hctr1]

@TsiBiRu

This looks like it would work.

Tried it but nothing happened. I am guessing I don't have the right 'dropdownID'.

Where would I find this?

[TsiBiRu]

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.

 

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

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

[hctr1]

@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?

[TsiBiRu]

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. 

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

[hctr1]

@TsiBiRu,

Yes it it a submission form.

I did try disabling AJAX loading but the ID is still random.

Here is the deployed URL: https://c5esh804.caspio.com/dp/b1c76000b16b1c0bcbb643b38c67

Test login: test@test.loc
Test password: temp4321

[TsiBiRu]

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'

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.

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

[kpcollier]

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. 

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

[hctr1]

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 March 20, 2019 by hctr1
additional info

[kpcollier]

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. 

 

[hctr1]

@TsiBiRu & @kpcollier

 

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

Does this make it easier to provide a solution?

[kpcollier]

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>

 

[TsiBiRu]

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

[hctr1]

@TsiBiRu, @kpcollier & @MayMusic,

It works perfectly.

Thank you for the assistance.

[techguy]

Hello. This solutions works well.. but the entire page refreshes when the submit occurs. I do have ajax enabled. On the same datapage there is also a check box (styled as toggle) and I set the same thing for this..  As a note this is a single record update form.

 

1. I need the screen to NOT refresh entire webpage, either the checkbox or dropdown refreshes

2. I need a script that sets the dropdown to a specific value when the checkbox is unchecked

3. I need a script that set sets the checkbox off/unchecked when the person selects the 'off' from the dropdown

 

 

Thank you for any help  or suggestions!

[techguy]

As a note, I changed the page a little where the check box hides the dropdown if not checked.. I then tried to put these scripts together to make the functionality work. If I change the dropdown, this triggers the submit.. however if I uncheck the checkbox I want the dropdown to change to 'off' and submit, if I check the box, it unhides the dropdown and I want the dropdown to show 'Online' and submit .

 

the actions works with the scripts (I can see that the new value of the dropdown is 'online' for instance, but checking or unchecking does not trigger the submit. I am trying to trigger the submit when the field changes value...

 

<script type="text/javascript">
document.getElementById("EditRecordStatus").addEventListener('change', function(event) {
 
 if (document.getElementById("EditRecordStatus").checked==true){
   document.getElementById("EditRecordStatusLocation").value='Online';
 }

 else if (document.getElementById("EditRecordStatus").checked==false){
   document.getElementById("EditRecordStatusLocation").value='Off';
 }
 
});
</script>
<script type="text/javascript">
 
document.getElementsByName('EditRecordStatusLocation')[0].onchange = function() {myFunction()};

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

}

</script>

 

 

If you have any suggestions I would appreciate it! THANKS

[TellMeWhy]

6 minutes ago, techguy said:

As a note, I changed the page a little where the check box hides the dropdown if not checked.. I then tried to put these scripts together to make the functionality work. If I change the dropdown, this triggers the submit.. however if I uncheck the checkbox I want the dropdown to change to 'off' and submit, if I check the box, it unhides the dropdown and I want the dropdown to show 'Online' and submit .

 

the actions works with the scripts (I can see that the new value of the dropdown is 'online' for instance, but checking or unchecking does not trigger the submit. I am trying to trigger the submit when the field changes value...

 

<script type="text/javascript">
document.getElementById("EditRecordStatus").addEventListener('change', function(event) {
 
 if (document.getElementById("EditRecordStatus").checked==true){
   document.getElementById("EditRecordStatusLocation").value='Online';
 }

 else if (document.getElementById("EditRecordStatus").checked==false){
   document.getElementById("EditRecordStatusLocation").value='Off';
 }
 
});
</script>
<script type="text/javascript">
 
document.getElementsByName('EditRecordStatusLocation')[0].onchange = function() {myFunction()};

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

}

</script>

 

 

If you have any suggestions I would appreciate it! THANKS

Can you try this for the auto submit script?

<script type="text/javascript">
 
document.getElementById("EditRecordStatusLocation").addEventListener('change', function myFunction(event) {


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

});

</script>

 

[techguy]

This did not submit the form.

 

<script type="text/javascript">
document.getElementById("EditRecordStatus").addEventListener('change', function(event) {
 
 if (document.getElementById("EditRecordStatus").checked==true){
   document.getElementById("EditRecordStatusLocation").value='Online';
 }

 else if (document.getElementById("EditRecordStatus").checked==false){
   document.getElementById("EditRecordStatusLocation").value='Off';
 }
 
});
<script type="text/javascript">
 
document.getElementById("EditRecordStatusLocation").addEventListener('change', function myFunction(event) {


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

});

</script>

 

[techguy]

Just tested and when I added that, the dropdown no longer triggers the submit either