B4J Question how to get webpage attributes of a html5 element

rbirago · Apr 21, 2020

I have to read custom attributes of some elements of a web-page form. How to get in the server handler these attributes?
To try to do it I have modified the web page of the ServerExample login web page in this way:

Login example from ServerExample modified:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="windows-1252" />
    <title>B4J - System login example</title>
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  </head>
  <body>
    <form id="registerForm">
      <h1>Register as a new user or <a href="signin.html">sign in</a></h1>
      <div> <label for="name">Name:</label> <input name="username" data-tipo="tipo1"

          type="text" /> </div>
      <div> <label for="password">Password:</label> <input name="password" id="password"

          type="password" /> </div>
      <div> <label for="verify">Verify password:</label> <input id="verify" type="password" />
      </div>
      <br />
      <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LcDKfASAAAAAP4JUE_Lq8D5zUswcviBtocXdvGs"> <!-- change to your public key -->
      </script> <noscript>
         <iframe id="captcha" src="https://www.google.com/recaptcha/api/noscript?k=6LcDKfASAAAAAP4JUE_Lq8D5zUswcviBtocXdvGs"

<!--="" change="" to="" your="" public="" key="" --="">
             height="300" width="500" frameborder="0"></iframe><br />
         <textarea name="recaptcha_challenge_field" rows="3" cols="40">         </textarea>
         <input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
      </noscript> <br />
      <div id="btnRegister"> <button type="submit">Register</button> </div>
    </form>
    <script>
    $( document ).ready(function() {
        
        $("#btnRegister").click(function(e) {
            e.preventDefault();
            if ($("#verify").val() !=  $("#password").val()) {
                alert("Password do not match!");
                return;
            }
            $.ajax({
                type: "POST",
                url: "registerHelper",
                data: $("#registerForm").serialize(),
               success: function(result)
               {
                   if (result.success) {
                        window.location  = 'members/index.html';
                   }
                   else {
                        alert(result.errorMessage);
                        Recaptcha.reload();
                   }
               },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(thrownError);
                    Recaptcha.reload();
                }
            });
            
        });
    });
    </script>
  </body>
</html>

As you can see I added a data-xxx attribute. How can I get this attribute in the Handle sub of the server?
Thanks in advance
Roberto

drgottjr · Apr 21, 2020

do you see this sub in main?:

B4X:

Public Sub PrintAllParameters (req As ServletRequest) As String

all the fields in the page's form are sent to the server, in ServletRequest. if you call this sub, you can see all the various fields and values received from the form.

to access an individual field, you use

B4X:

     dim thisfield as string = req.getParameter("somefield")
     dim thatfield as string = req.getParameter("someotherfield")
     dim evenanotherfield as string = req.getParameter("whatever")

then you can do what you want with them. (not sure what you meant by data-xxx. i didn't see anything like that in what you posted.)

rbirago · Apr 21, 2020

by req.getparameter you can get the value of the parameter. My target is different: in html5 you can add infos of the element by attribute data-xxx.
As you can see in my example in row 12 I have added an attribute data-tipo="tipo1".
I want to know how to read the attributes of an element, in this case the value of data-tipo , that is tipo1
How to get the attributes of an element?

drgottjr · Apr 22, 2020

i believe you have to pass data-tipo and its value as a hidden field in the form. it can then be seen by the server as just another parameter.

alwaysbusy · Apr 22, 2020

$("#registerForm").serialize() only passes the values of the inputs, nothing more. You can write your own 'serialize' method to include the data value.

B4X:

 $( document ).ready(function() {        
        $("#btnRegister").click(function(e) {
            e.preventDefault();
            ...            
            $.ajax({
                type: "POST",
                url: "registerHelper",
                data: MySerialize(),   /* <- your own serialize function */
               success: function(result)
               ...
            });
            
        });
    });
    function MySerialize() {
        var map = {};
        map.userName = $('input[name$="username"]').val();
        map.userNameData = $('input[name$="username"]').data('tipo');
        map.password = $('input[name$="password"]').val();
        return JSON.stringify(map);
    }

Then in B4J;

B4X:

Sub Handle(req As ServletRequest, resp As ServletResponse)
    Dim data As TextReader
    data.Initialize(req.InputStream)
                    
    Dim json As JSONParser
    json.Initialize(data.ReadAll)
                        
    Dim m As Map = json.NextObject
    Dim userName as String = m.GetDefault("userName", "")
    Dim userNameData as String = m.GetDefault("userNameData", "")
    Dim password as String = m.GetDefault("password", "")
    ...
End Sub

Alwaysbusy

rbirago · Apr 22, 2020

Very interesting solution. Trying it I realize that req.InputStream has no content. Why? (the req.GetParameter("username") has its correct value)

B4J Question how to get webpage attributes of a html5 element

rbirago

Active Member

drgottjr

Expert

rbirago

Active Member

drgottjr

Expert

alwaysbusy

Expert

rbirago

Active Member

Similar Threads