Custom javascript code on submit button press

karmacomposer · Post by **karmacomposer** » Fri Sep 13, 2024 2:22 pm

I have a finished form and need to calculate custom fields and send the results to a results page.

How do I add an entire code chunk to a button? I see the javascript event but it has pre-defined brief code fragments. I have more of an entire script to run. How do I do this?

The user needs to fill out the form and then, once they submit the form, the variables need to be calculated and the results sent to another page. I have global session variables turned on and working.

How and where do I attach this script? I assume the onclick button event, but if I am wrong, please tell me where. Also, this is not a one liner but an entire javascript script.

Thank you.

Mike

Post by **Pablo** » Fri Sep 13, 2024 5:04 pm

I have more of an entire script to run. How do I do this?

- Add the function between the <head> tag.
- Make a reference to the function in the event.

karmacomposer · Post by **karmacomposer** » Mon Sep 16, 2024 2:38 pm

Where do I add this to the <Head> - page or form dialog?

Do I add an event and where?

Thank you so much.

Mike

Post by **Pablo** » Mon Sep 16, 2024 3:19 pm

You can add the code in Page HTML.
https://wysiwygwebbuilder.com/add_html.html

The event can be added to the button.
https://wysiwygwebbuilder.com/events.html

karmacomposer · Post by **karmacomposer** » Mon Sep 16, 2024 3:24 pm

Perfect. I had found the page html in a google search and now that part is done.

I will try adding events and see how it goes.

Thank you.

Mike

karmacomposer · Post by **karmacomposer** » Mon Sep 16, 2024 3:31 pm

On the SUBMIT button, I went to the EVENTS tab and added a event.

I chose javascript as the type and entered one of the function names of my script, validate()

Do I need to set a target?

The next function to call is calculate()

Do I simply add another event, choose javascript and then use the function call, calculate()

Do I need to do anything after that? I need to go to the results.php page after to show the calculated results.

Is there any other event I need to call? I do have the submit action in the form set to go to the results.php page and it already displays some global variables from the form fields.

I need to then display the calculation results from the javascript in the <HEAD></HEAD> section that I added.

Am I on the right track?

Mike

Post by **Pablo** » Mon Sep 16, 2024 3:38 pm

Do I need to set a target?

No

The event will call your function. if you need extra functionality then you will need to implement this in your code.
For example, by placing the result of the calculation in a (hidden) field of the form via JavaScript and then submit the form from your script.

karmacomposer · Post by **karmacomposer** » Mon Sep 16, 2024 4:04 pm

Thank you.

Right now, I have named the fields of the form elements the same as my script so that the script should take the values and calculate them properly.

On the results page, I want to display the resulting calculations.

If I need further help with hidden fields, I may ask you a few more questions.

I did create a function to add all calculated variables to global variables:

Code: Select all

function myFegliFunction() {

$GLOBALS["name"] = name.value;
$GLOBALS["current_age"] = current_age.value;
$GLOBALS["retirement_age"] = retirement_age.value;
$GLOBALS["base_salary"] = base_salary.value;
$GLOBALS["emailid"] = emailid.value;

$GLOBALS["FEGLI_BASIC_LIFETIME_COST"] = "$"+total_FEGLI_BASIC_LIFETIME_COST;
$GLOBALS["fegli_opa_cost"] = "$"+total_fegli_opa_cost;
$GLOBALS["UB_PERMANENT_LIFETIME_COST"] = "$"+total_UB_PERMANENT_LIFETIME_COST;
$GLOBALS["fegli_opb_cost"] = "$"+total_fegli_opb_cost;
$GLOBALS["UB_TERM_COST"] = "$"+total_UB_TERM_COST;
$GLOBALS["Estimated_Total_FEGLI_Lifetime_Cost"] = "$"+total_Estimated_Total_FEGLI_Lifetime_Cost;

$GLOBALS["total_savings"] = "$"+total_savings_final;
$GLOBALS["regular_finalresult"] = "$"+regular_total_savings_final;
$GLOBALS["regular_fegli_basic_coverage"] =  "$"+FEGLI_BASIC_COVERAGE_AMT_report_final;
$GLOBALS["regular_fegli_opa"] = "$"+FEGLI_OPA_AMT_report_final;
$GLOBALS["regular_fegli_opb"] = "$"+FEGLI_OPB_AMT_report_final;

}

Those are the variables I will want to display in the results.php page. I have a form on that page and all fields are named identically so that they SHOULD just show the results.

Mike

Post by **Pablo** » Mon Sep 16, 2024 5:00 pm

I'm sorry, I cannot help you with custom coding. For me, this may also take a lot of time to figure out.

I am not sure about this code though, it looks like a mix of PHP and JavaScript?

karmacomposer · Post by **karmacomposer** » Mon Sep 16, 2024 9:00 pm

This particular function (MyFEGLIFunction one) may be php but the rest of the script is most certainly javascript.

Since I need these variables to be global, where do I place this php function?

Mike

Post by **Pablo** » Tue Sep 17, 2024 5:46 am

You cannot mix PHP and JavaScript.
PHP is executed on the server
JavaScript is executed on the client side within the browser.

If you want to execute PHP code and use the result in JavaScript then you will need to use AJAX.

Note this is not specific to WWB.

jerryco · Post by **jerryco** » Tue Sep 17, 2024 9:29 am

JavaScript is executed on the on the server

This is wrong information. JavaScript is executed by the browser.

Right?

BaconFries · Post by **BaconFries** » Tue Sep 17, 2024 9:50 am

Pablo changed your reply to what jerryco has written..

karmacomposer · Post by **karmacomposer** » Tue Sep 17, 2024 1:49 pm

Thank you for your help. Regardless of the language I have to use, how do I make the Javascript function results visible in WYSIWYG Web Builder on a separate page?

Mike

karmacomposer · Post by **karmacomposer** » Tue Sep 17, 2024 2:44 pm

So I used the localstorage command. Here is the storeGlobals function within the <head></head> on the index.php page. I have events on the submit button that call the various functions (not shown). Does this look correct to you?

Code: Select all

<script type="text/javascript">

function storeGlobals() {

localstorage.setItem("name", name.value)
localstorage.setItem("current_age", current_age.value)
localstorage.setItem("retirement_age", retirement_age.value)
localstorage.setItem("base_salary", base_salary.value)
localstorage.setItem("emailid", emailid.value)

localstorage.setItem("FEGLI_BASIC_LIFETIME_COST", "$"+total_FEGLI_BASIC_LIFETIME_COST)
localstorage.setItem("fegli_opa_cost", "$"+total_fegli_opa_cost)
localstorage.setItem("UB_PERMANENT_LIFETIME_COST", "$"+total_UB_PERMANENT_LIFETIME_COST)
localstorage.setItem("fegli_opb_cost", "$"+total_fegli_opb_cost)
localstorage.setItem("UB_TERM_COST", "$"+total_UB_TERM_COST)
localstorage.setItem("Estimated_Total_FEGLI_Lifetime_Cost", "$"+total_Estimated_Total_FEGLI_Lifetime_Cost)

localstorage.setItem("total_savings", "$"+total_savings_final)
localstorage.setItem("regular_finalresult", "$"+regular_total_savings_final)
localstorage.setItem("regular_fegli_basic_coverage", "$"+FEGLI_BASIC_COVERAGE_AMT_report_final)
localstorage.setItem("regular_fegli_opa", "$"+FEGLI_OPA_AMT_report_final)
localstorage.setItem("regular_fegli_opb", "$"+"$"+FEGLI_OPB_AMT_report_final)

}
</script>

Then, on the results.php page, I have the readGlobals function and have put this in the <head></head> on the main page:

Code: Select all

<script type="text/javascript">

function readGlobals() {

localstorage.getItem("name")
localstorage.getItem("current_age")
localstorage.getItem("retirement_age")
localstorage.getItem("base_salary")
localstorage.getItem("emailid")

localstorage.getItem("FEGLI_BASIC_LIFETIME_COST")
localstorage.getItem("fegli_opa_cost")
localstorage.getItem("UB_PERMANENT_LIFETIME_COST")
localstorage.getItem("fegli_opb_cost")
localstorage.getItem("UB_TERM_COST")
localstorage.getItem("Estimated_Total_FEGLI_Lifetime_Cost")

localstorage.getItem("total_savings")
localstorage.getItem("regular_finalresult")
localstorage.getItem("regular_fegli_basic_coverage")
localstorage.getItem("regular_fegli_opa")
localstorage.getItem("regular_fegli_opb")

}
</script>

I use a onload event to call this function.

Does all this look about right?

Mike

Post by **Pablo** » Tue Sep 17, 2024 5:18 pm

If the code works in any other editor then it will also work in WWB.
The code will be inserted "AS IS".

Of source you will still have to process the data somehow, because there is no way for the internal script to know that you want to use these values in the forms results. You will need to implement this logic yourself.
But again, this is not specific to WWB. All programming logic related to HTML / PHP also applies to WWB pages.

karmacomposer · Post by **karmacomposer** » Tue Sep 17, 2024 7:53 pm

The code works perfectly as a static html page but I need to split it up to use forms for input and then process the rest of the javascript and then load the results page to show the results.

It all works as one page currently.

Mike

Post by **Pablo** » Wed Sep 18, 2024 6:07 am

What information are you missing to be able to implement this ?

karmacomposer · Post by **karmacomposer** » Wed Sep 18, 2024 12:25 pm

If I could send you the code or the project, would you be able to at least advise me on what I am doing wrong.

If I have to pay, so be it. I need to finish this.

Mike

Post by **Pablo** » Wed Sep 18, 2024 1:20 pm

I'm sorry, I cannot help you with programming related question.

BaconFries · Post by **BaconFries** » Wed Sep 18, 2024 9:12 pm

If I have to pay, so be it. I need to finish this

I know I am going to be seen as the Internet police here...but it reads like you expect to be given the solution because you need it!
See the following
viewtopic.php?t=1901
8. In general, we do not provide support for custom code or custom scripts....

wwonderfull · Post by **wwonderfull** » Thu Sep 19, 2024 3:59 am

well said @baconfries.

WWB Support does not provide services on custom codes.

@mike I think you might be working with a custom project for someone. In that case I do know that you get the liability of finishing it. If you think you need accompany on this, you may have to team up with other expert who may be able to work with you with paid services for their time value.

On Professionals for hire section you can post and wait for others if they would be interested or would want to collaborate with you on helping you finish this project.

Professionals for hire Section:
viewforum.php?f=126

www.wysiwygwebbuilder.com

Custom javascript code on submit button press

Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press

Re: Custom javascript code on submit button press