Using a Button to fill a field

[kpcollier]

Hello. 

I have created a simple button using HTML and CSS. I was wondering if I can incorporate this into my DataPage. My Idea is that if the button, named Bulk,  is clicked, it will automatically fill the "Quantities" field.

I am not too sure what to fill the Quantities field with yet, as the datatype set for it is a Number. Most orders have a quantity number ordered, but if it is a ton, I would like it so the user can just click "Bulk" so that the receiving department is aware.

[Aether]

Hello @kpcollier,

If you just want to add a value in your "Quantities field" when "Bulk button" is clicked, you can add this code in the footer of your DataPage:

Quote

<script>
document.getElementsByName('Bulk')[0].onclick = function(){ 

document.getElementById('InsertRecordQuantites').value = "The value you want to automatically fill the field";
};
</script>

Note: Make sure that you unchecked the "Enabled HTML Editor" in your footer.

I hope this helps 

[kpcollier]

Hey @WatashiwaJin, I appreciate the reply. I have put this in my footer section. The quantities field is named "Qty_Ordered", would I replace InsertRecordQuantities with InsertRecordQty_Ordered? I have tried it like this an was unable to get a response in my app. 

Here is how I built the button. Maybe its because I used a hyperlink instead of input=button?

https://codepen.io/kpcollier/pen/PydqKq

[Aether]

Hello @kpcollier,

Yes, you should replace it to your own field ID and add the button code to a HTML Block (Make sure that you unchecked the "Enabled HTML Editor").

And yes I highly recomend that you use button for this process, because you'll need the name of the button to call in the code. 

 

[kpcollier]

Alright, @WatashiwaJin. I was able to get it to function. But, when I click bulk, it automatically submits the page, even if the rest of the submission form isn't filled out yet. Is there a way around this? I will be searching for a fix in the meantime!

 

 

[kpcollier]

Actually, I still can't get it to actually fill the quantity field. When I click it, it submits the form. But, when I go to the table, the Quantity field is still empty. I did rename my field "Qty_Ordered" to just "Quantity" and did the same for the JS.

In my debugger I am getting an Uncaught TypeError "Cannot set property 'onclick' of undefined".

I thought onclick was an inherited function from JS, so I am confused as to why this is happening.

Edited October 23, 2018 by kpcollier
Uncaught TypeError

[Aether]

Hello @kpcollier,

If the "Bulk" button is different to your Submit button in the submission form, that should be working.

Just note that don't use "Submit" in the value, name or id in your "Bulk" button to avoid confusion in the form.

[kpcollier]

Hey @WatashiwaJin. Sorry, I forgot to mention that I had fixed the submit issue. I never actually defined the button type. Peculiar HTML5. 

Now, my issue is the one stated above. The onclick function is throwing an error.

[kpcollier]

Hi @WatashiwaJin

I've been messing with this to try to get it to work. 

document.getElementsByName('Bulk').onclick = function(){myFunction()};

function myFunction() {document.getElementById('InsertQuantity').value = "100";
};

This removed the onclick error. But it still doesn't fill Quantity to 100.

*Edit

I might've done too much. Putting [0] after 'Bulk' creates the onclick error. Taking it out prevents the error but still does not work. I tried to log a message through the console in the function and didn't get any response... so my function does not work lol.

*Edit #2

https://howto.caspio.com/datapages/ajax-loading/

Found this in the online help article listed above.

• onload(), onsubmit() and other loading events are no longer supported. You must use the Caspio built-in event handlers, as described below on this page.

Working on trying to use a Caspio event handler to substitute the onclick function.

Edited October 25, 2018 by kpcollier