DEV Community

Gerardo Cárdenas
Gerardo Cárdenas

Posted on

1

Submit button

What I built

A demo of a functionality that should be included in a web page that have a button of submit. The submit button will only work if the browser supports Web Monetization.

Submission Category:

The category of this project is: Foundational Technology

Demo

JUST COPY THE NEXT IN A FILE WITH .HTML EXTENSION.
<html>
<head><title>Submit only if it supports Web Monetization</title>
<SCRIPT LANGUAGE="JavaScript">

<!-- Oculto código a navegadores que no soportan JavaScript

function submitAllclearinFields(){
document.Datos.Vo.value="";
document.Datos.Vf.value="";
document.Datos.A.value="";
document.Datos.D.value="";
document.Datos.T.value="";
}

function resuelve(){
doc=open('','Processed',"width=350,height=400,resizable,scrollbars");
doc.document.write('<html><head> <meta name="monetization" content="$ilp.uphold.com/3L3ZYG97kmMk"><title>Submission</title></head><body>');
if (document.monetization) {
doc.document.write('<b>Your data was submitted.</b>');
submitAllclearinFields();
}//if (document.monetization) {
else {
doc.document.write('<b>Your data was NOT submitted.</b>');
doc.document.write('<b>Your browser should support web monetization.</b>');
}//else from if document.monetization
doc.document.write('</body></html>');
doc.document.close();
}
// Termino de ocultar código-->

</SCRIPT>

</head>
<body bgcolor="#000000" leftmargin="50" topmargin="50" marginwidth="50" marginheight="50">
<form name="Datos">
<center>
<font color="yellow">
<h1>Your data:</h1>
</font>
<br />

<table>
<tr>
<td><font color="white"><b>FILL THE FIELDS:</b></font></td>
</tr>
<tr>
<td>
<font color="white">
</font>
</td></tr>
</table>
<br>
<TABLE BORDER="10" CELLPADDING="5" CELLSPACING="2" BORDERCOLOR="00FF00" bgcolor="ffffff">
<tr>
<td>
<b>TEMA:</b> Type anything that will be submitted.
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
Name:<input type="text" name="Vo" value=""><br>
Favorite food:<input type="text" name="Vf" value=""><br>
Favorite drink:<input type="text" name="A" value=""><br>
Favorite dessert<input type="text" name="D" value=""><br>
Hobby:<input type="text" name="T" value=""><br>
<center>
<input type="button" name="SUBMIT" value="SUBMIT" onClick="resuelve();">
</center>
</td>
</tr>
</table>

</center>
</form>
</body>
</noscript>
</html>

Link to Code

How I built it

In a notepad i created this web page to illustrate the functionality of the "SUBMIT" button. It will be nice to have a prebuilt button that only will works if the browser supports MONETIZATION. In other words, the function called when the button is pressed will be executed only if the browser supports WEB MONETIZATION.

Additional Resources/Info

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
kewbish profile image
Emilie Ma

Great resource! I'll definitely check this out!

You might want to wrap your HTML in a code block. To do this, you can type three backticks (`) followed by html at the beginning of your code, and three backticks at the end.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay