Passing HTML input values to JavaScript to Backendless table

Data Service
1

Hello. I have a .js file that stores a data object in the “Request” table with properties “apiEndpoint”, “apiSecretkey”, and “emailAddress”. I am able to successfully save data using fixed values and executing the script upon HTML page load.

However, I would like to store user-input values from HTML text fields only upon button click. I have created a very simple HTML form:

<head>
<script src="libs/backendless.js"></script>
<script src="js/app.js"></script>
</head>


<body>

<form>
<input type="text" name="endpoint"><br>
<input type="text" name="secretkey"><br>
<input type="text" name="email"><br><br>
<input type="button" value="Submit" onclick="____________">
</form>
</body>

The problem is I am not sure what goes after onclick. I have tried Request() and Backendless.Persistence.of( Request ).save( requestObject), with no success. Here is my JavaScript code, minus the initialization:

function Request(args) {
     args = args || {};
     this.apiEndpoint = args.apiEndpoint || "";
     this.apiSecretkey = args.apiSecretkey || "";
     this.emailAddress = args.emailAddress || "";
}


var endpoint = document.getElementsByName("endpoint").value,
     secretkey = document.getElementsByName("secretkey").value,
     email = document.getelementsByName("email").value;


var requestObject = new Request( {
     apiEndpoint: endpoint,
     apiSecretkey: secretkey,
     emailAddress: email,
});


var savedRequest = Backendless.Persistence.of( Request ).save( requestObject );

When I click Submit, nothing happens. I would appreciate some guidance. Thanks in advance!

2

Hi Eric,

You should be able to do something like this:

<input type="button" value="Submit" onclick="javascript:foo()">

Make sure to declare method foo() and it will be invoked when the button is clicked. In that method you can put the logic which should be executed at that time.

Regards,
Mark

3

Hi Mark,

Thanks for the prompt answer. What function would I be declaring exactly? I don’t see anything in the script that isn’t already declared.

Thanks. Beginner here.

Eric

4

It will be a function that contains code that you would want to be executed upon user clicking the button.

Can you describe what should happen then?

5

Upon clicking Submit, the input values (apiEndpoint, apiSecretkey, emailAddress) should be stored to the Request table. It seems that this is already declared in app.js:

var savedRequest = Backendless.Persistence.of( Request ).save( requestObject );

How can I trigger this on button click?

6

Looks like you have all the right pieces already in place:

This is your form ( I added “id” to the elements):

<body>
<form>
<input type="text" name="endpoint" id="endpoint"><br>
<input type="text" name="secretkey" id="secretkey"><br>
<input type="text" name="email" id="email"><br><br>
<input type="button" value="Submit" onclick="javascript:handleClick()">
</form>
</body>

And then the function (changed getElementsByName to getElementsById):

function handleClick()
{
var endpoint = document.getElementById("endpoint").value,
secretkey = document.getElementById("secretkey").value,
email = document.getelementById("email").value;


var requestObject = new Request( {
apiEndpoint: endpoint,
apiSecretkey: secretkey,
emailAddress: email,
});


var savedRequest = Backendless.Persistence.of( Request ).save( requestObject );
}

Keep in mind I am not a JS guy and there may be some little things I missed here, but in general that’s a way to wire it up.

7

I tried it with “id” instead of “name” and defined the function but no luck :\ I’m stumped.

8

Did you change the call to get the element value to “document.getElementById” ?

9

Yes I changed “document.getElementByNames” to “document.getElementById”.

10

Hi, Eric,
Do you see any output in developer’s console (click F12 to see it in your browser) after clicking the button?

11

Mark, someone helped me figure it out. We were on the right track. As you suggested:

  1. Use “getElementById” instead of “getElementsByName”.
  2. Wrap the call in a function “sendData()”

Apparently, it’s not a good idea to use “onclick”.

  1. Use “<form onsubmit=“sendData()”>” instead of “<input type=“button” onclick=“foo()”>”.

Thanks for your help!

12

I am glad you got it worked out!