<div class="tiktok-j5tm11-DivCodeInputContainer e2oypfg0"><div class="code-input e2oypfg1 tiktok-1ng3k1k-DivInputContainer-StyledBaseInput etcs7ny0"><input type="text" placeholder="Enter 6-digit code" class="tiktok-11to27l-InputContainer etcs7ny1" value=""><div class="tiktok-txpjn9-DivIconContainer etcs7ny2"></div></div><button type="button" data-e2e="send-code-button" class="tiktok-1y4en69-ButtonSendCode e1gzcpl10" disabled="">Resend code: 50s</button></div>
I tried with //button[#data-e2e='send-code-button']
but when request to send code "disabled" will appear, so i want to select it to determine when request to get code has been sent
If you need to select button after #disabled added try
//button[#data-e2e='send-code-button' and #disabled]
Related
I'm working in a recovery password form with Spring Boot and Thymeleaf, the process is that the backend sends a link to the user with a token, this token is saved in a DB with the user information. The user clicks the link and the backend validate the token, if it's correct it redirects with the user information to the "new pass" form where the user has to introduce a new password and repeat it. When the user introduces the passwords and press save, it sends the information to the back end, with the userId it searches the register and changes the password.
In the controller where I validate the token when the user presses the link, I search the users' information and I build and usersRecoverPassDto with the userId and the passwords null and organize the model object to send it to the "new pass" form like this:
PasswordManagmentPostDto passManagment = new PasswordManagmentPostDto();
passManagment.setUserId(userId);
model.addAttribute ("passInfo", passManagment);
In the "new pass" form I received the correct information:
passInfo={
userId: 123456,
newPassword: null,
repeatePassword: null
}
The "new pass" form I code is like this:
<form action="#" th:action="#{/password/recovery}" th:object="${passInfo}" method="post">
<div class="mb-2 mr-sm-2 mb-sm-0 position-reNew pass:</label>
<input type="password" th:field="*{newPassword}" placeholder="Contraseña" class="form-control">
</div>
<div class="mb-2 mr-sm-2 mb-sm-0 position-relative form-group">
<label for="repeatePass" class="mr-sm-2">Repeat pass:</label>
<input type="password" th:field="*{repeatNewPassword}" placeholder="Repita contraseña" class="form-control"/>
</div>
<div class="mb-2 mr-sm-2 mb-sm-0 mt-3 position-relative form-group">
<input name="submit" type="submit" value="Save" class="inputButton btn btn-success "/>
</div>
</form>
I enter the two passwords and press the button Save but in the controller, I receive the next object:
passInfo={
userId: null,
newPassword: password,
repeatePassword: password
}
The userId parameter is just a parameter that passes without any modification and without being shown but I don't know how to persist this value from the controller to the view and then to the other controller.
I trayed adding another input to the new pass form:
<input type="text" th:field="*{userId}" th:value="*{userId}" placeholder="userId" class="form-control"/>
And I did nothing with this input, just put the two passwords and press the save button and it worked, I received the object with the correct information.
Of course, the userId parameter must not be shown in the form or modified.
Can someone help me, please?
Thank you very much in advance
OLD ANSWER
Use a hidden input:
<input type="hidden" id="userId" name="userId" th:value="*{userId}" />
This is part of what hidden inputs are for, to maintain data that should be sent back to the controller, but isn't something for the user to see / change.
NEW ANSWER
Per our discussion in the comments, it sounds like the appropriate approach is to retain the user's token on the front end. Pass that token to the controller when submitting the form, then look up the user by that token to reset the password.
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
We have a web application which has a list of reports, which I am trying to automate.
There is an option to view all these reports. When I open a report to view, there are some values I need to select to view it, which is where I am stuck.
The id used for these reports are generic. If the id for <label>Application<lable> is <select id="id1" name="id[1]" class="valid">, the same label in a different report will have a different id. How do I proceed from here?
Giving the tags of two sample reports:
First report:
<div>
<label id="PackageID">
Package ID <span class="required">*</span></label>
<input id="id_1__Name" name="id[1].Name" type="hidden" value="PackageID">
<select id="id_1__SelectedValues" name="id[1].SelectedValues" class="valid">
</div>
Second report:
<div>
<label id="PackageID">
Package ID <span class="required">*</span></label>
<input id="id_5__Name" name="id[5].Name" type="hidden" value="PackageID">
<select id="id_5__SelectedValues" name="id[5].SelectedValues" class="valid">
</div>
Not sure if this suggestion is suitable for your scenario, but you could get the id with jQuery and store it in a hidden field:
var id = $('.className').attr('id');
or use control's ClientID property.
Anyway, to select proper value you just need
#browser.select_list(:id, "id_5__SelectedValues").set("3")
I have this simple kendo-template script:
<!-- popup editor template -->
<script id="userEditor" type="text/x-kendo-template">
<div id="popServerErrorSummaryPlaceholder" style="display:none"></div>
<div class="control-row">
<label class="span2" for="FirstName">Vorname</label>
<input Id="FirstName" class="span4" data-bind="value:FirstName" maxlength="50" name="FirstName" required="true" type="text" />
<span class="k-invalid-msg" data-for="FirstName"></span>
</div>
<div class="control-row">
<label class="span2" for="LastName">Nachname</label>
<input Id="LastName" class="span4" data-bind="value:LastName" maxlength="50" name="LastName" required="true" type="text" />
<span class="k-invalid-msg" data-for="LastName"></span>
</div>
</script>
Which is used while editing a single row within the Kend-UI grid.
I have got right now two issues:
a) The documentation states that I can control the position for validation messages via a "span" element that has a class "k-invalid-msg".
The behaviour right now is that this span Element gets replaced with a div element and it is positioned below the label element. I would like to get the message next to the input.
b) The validation is triggered immediately when the pop up is displayed.The validation should be trigger either when leaving the input or clicking the "update" button.
Someone out there who can help me here?
Things I am not quite sure how to handle:
c) Some validations are performed at the server. I get them back to the browser via the DataSource error event (custom JSON which is basically a list of field name and associated error messages). I would like to display the error messages within the validation span. I can create custom validation rules as documented here.
How do I get the validator that is associated with the pop up editor window? Or is there foreach input a validator created?
Anyone did this before?
Thanks for any help!
Updates:
regarding to point a)
OnaBai pointed me to the right direction. Thanks for that.
I am trying to invoke a form submit using javascript (jquery) to invoke a webflow transition. It works and the submit invokes the desired transition. But, the updated radio button values is not reflected on the model object which is posted.
Here is the code:
<form:form method="post" action="#" commandName="infoModel" name="pageForm">
<form:input type="input" path="testMsg" id="success" />
<input type="button" id="clearSelections" value="Clear Selections">
<div class="question">
<h4><c:out value="${infoModel.questionInfo.description}"/> </h4>
<form:radiobuttons path="infoModel.answerId"
itemValue="answerId" itemLabel="answerDescription" items="${infoModel.answers}" delimiter="<br/>" />
</div>
<input type="submit" name="_eventId_saveQualitativeInput" value="Save" id="save" />
$(document).ready(function() {
$('#tabs').tabs();
//Clear selections (copy is server-side)
$('#clearSelections').click(function() {
//$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr('checked');
$('#save').trigger('click');
});
});
</form:form>
The form:radiobutton, generates the below html:
<div class="question">
<h4>Is this a general obligation of the entity representing a full faith and credit pledge? </h4>
<span>
<input type="radio" checked="checked" value="273" name="infoModel.answerId" id="infoModel.answerId1">
<label for="infoModel.answerId1">Yes</label>
</span>
<span><br>
<input type="radio" value="274" name="infoModel.answerId" id="infoModel.answerId2">
<label for="infoModel.answerId2">No</label>
</span>
<br>
<span class="error"></span>
</div>
The input id= "success" value is registered and when the control goes to the server, the value of input id= "success" is updated in the "infoModel" object. But the value of answerId is not updated on the "infoModel" object.
Thoughts if i am missing something in the form:radiobutton element or if there is something else wrong?
Thanks in advance!
EDIT:::::::
Thanks mico! that makes sense. I stripped of some of the code first time to make it precise, but i have a list which is being used for building the radio-buttons, below is the code:
<c:forEach items="${infoModel.list["index"]}" var="qa" varStatus="rowCount">
<div class="question">
<h4><c:out value="${question.questionInfo.description}"/> </h4>
<form:radiobuttons path="list["index"][${rowCount.index}].answerId" itemValue="answerId" itemLabel="answerDescription" items="${question.answers}" delimiter="<br/>" />
<br>
</div>
</c:forEach>
Could you please suggest how i could try this one out?
NOTE: The same code works on a regular form submit on click of a button of type submit. Its the javascript form submit which is not working. I also tried to do whatever i want to do in javascript and then invoke the button.trigger('click'); form got submitted but the changes made on form in my javascript didnt reflect.
With commandName inside a form:form tag you set "Name of the model attribute under which the form object is exposed" (see Spring Documentation). Then in path you should tell the continuation of the path inside the model attribute.
With this said I would only drop the extra word infoModel from path="infoModel.answerId" and have it rewritten as path="answerId" there under the form:radiobutton.