B4J Question how to get webpage attributes of a html5 element

rbirago

Active Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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.)
 
Upvote 0

rbirago

Active Member
Licensed User
Longtime User
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?
 
Upvote 0

drgottjr

Expert
Licensed User
Longtime User
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.
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
$("#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
 
Upvote 0

rbirago

Active Member
Licensed User
Longtime User
Very interesting solution. Trying it I realize that req.InputStream has no content. Why? (the req.GetParameter("username") has its correct value)
 
Upvote 0
Top