change input field data in vue js - vue.js

I've signup form. In input field when I used to write previous username then it gives me available username list which is coming from API.
My question is that how to change input field data when I used to click available username in vue js?

I'm thinking you want to do something like...
User types in a username, somewhere in the UI you show a list of available usernames, user clicks preferred username, input box is updated with selected username.
Without seeing any of your code it's difficult to give you an specific answer, however, what I would do is:
Create the input box. Bind this to an object in your script:
HTML:
<input v-model="username"/>
Script: username: string = ""; availableUsernames: [""];
Create a button next to the input box, when it's pressed it calls your API and returns the available usernames and applies to to availableUsernames.
The available usernames are returned as an array and the array is displayed on your UI as a list.
When you click on an object in the list on your UI, this calls a function which updates the username property. e.g.:
<li v-for="u in usernames"><a #click="applyUsername(u.description)">
applyUsername(description: String){ this.username = description }

Related

Form reset for all fields except one Vue.js

I'm trying to find a way to to exclude one field input in my form that is disabled and contains the value of a users ID number
I would like to know how I can tweak this.$refs.form.reset(); because it works perfectly but it clears EVERYTHING and I wish to contain the ID value and resets the rest of the fields like name surname age income etc
The reason why I the ID is important is that the user gives this in a sign-up step at the start and this form that I am talking about is located somewhere else to complete his profile I don't want to ask the user again to type his ID in again.
If anyone knows how to accomplish this it would be a great help
The reset method of the form simply looks at all the inputs bound to it and resets each one within a loop then empties the error bag, observe:
reset (): void {
this.inputs.forEach(input => input.reset())
this.resetErrorBag()
},
There's no reason you can't do the same, except for when they're disabled:
resetForm() {
this.$refs.form.inputs.forEach(input => {
if (!input.disabled) {
input.reset()
}
})
this.$refs.form.resetErrorBag() // necessary to remove validation errors after the field values are removed
}
Then you can call that function (against your Vue instance, not your VForm) with this.resetForm() and it should work out the way you want.
Disclaimer: Can't test it at the moment. input.disabled may not be readily available and may require further inspection of the input element.

Passing apex page items via button click

I'm baffled by this and hoping someone can explain this behavior to me.
I have a sample apex app here https://apex.oracle.com/pls/apex/f?p=126734:2 (admin credentials: username: guest pw: cubsarechamps).
I just want to enter a value on page 2 in text field P2_SOURCE and then click the button and be redirected to page 3 and have the value from P2_SOURCE populate P3_TARGET. I know that I need to set the value of P2_SOURCE in session and so I created a 'lose focus' dynamic action with a plsql process of null that also submits P2_SOURCE.
After I enter '123' in P2_SOURCE I tab out of the field to trigger the DA, and then I click session in my developer toolbar and I can see that the value of P2_SOURCE is indeed '123'. Then I click my button to go to page 3 but nothing is passed to P3_TARGET (unless I actually submit my page first, which I shouldn't have to do, right?).
So my question is why P2_SOURCE isn't being passed to P3_TARGET. The item is set in session state so why is &P2_SOURCE. passing a null value when there is a value set in session? Can I not use page item substitutions unless I actually submit my page? The documentation seems to indicate this is supported functionality.
My button setup is like this:
Substitution Strings are evaluated when the page is loaded and so, it is NULL in your case as the page item contains no value in the beginning. I would either use Dynamic Action with JavaScript Expression or Branch Process.

How to find value of email field using Selenium2Library

I am writing regression tests for a web application using robot framework and the Selenium2Library library. I have a simple test which changes all of the fields of an "account settings" type form (think username, password, email, etc.), then revisits the page and makes sure all of the data was saved. Like so:
*** Test Cases ***
Sample Test
Change All Account Details
New Account Details Should Be Saved
*** Keywords ***
Change All Account Details
Navigate to Account Page
Input Text accountSettingFrom_firstname Test
Input Text accountSettingFrom_lastname Dummy
Input Text accountSettingFrom_email new_email#example.com
# etc etc, eventually save the form
New Account Details Should Be Saved
Go To ${ACCOUNT_URL}
Textfield Value Should Be accountSettingFrom_firstname Test
Textfield Value Should Be accountSettingFrom_lastname Dummy
Textfield Value Should Be accountSettingFrom_email new_email#example.com
I get the following error on the final step (Textfield Value Should Be accountSettingFrom_email new_email#example.com) when running this test: Value of text field 'accountSettingFrom_email' should have been 'new_email#example.com' but was 'None'
I have taken screenshots the moment before that step runs, and I have added a pause and manually confirmed that the value attribute of 'accountSettingFrom_email' is indeed 'new_email#example.com'. HTML of the element at time the check occurs:
<input type="email" name="accountSettingFrom[email]" value="new_email#example.com" class="foo bar" required="required" tabindex="3" maxlength="128" url="/foo/bar" userid="foobar" id="accountSettingFrom_email">
You'll notice that the first two Textfield Value Should Be keywords pass. The only difference I can discern between the three elements is that 'accountSettingFrom_email' is type="email" instead of type="text", but if the the keyword is successfully locating the element, then why can't it grab the value of the value attribute?
So am I doing something wrong? I feel like this or some similar keyword must exist to test this, without having to resort to writing a custom library.
You have hit some bugs in Selenium2Library. When Selenium2Library was created, HTML5 was not ratified. Internally the library is filtering out your element because it has a type other than 'text' (made sense before HTML5). Textfield Value Should Be can only find your element if it has tag name input and attribute value 'text' for type.
See https://github.com/robotframework/Selenium2Library/issues/546
Also due to how Textfield Value Should Be is implemented, the error you are getting makes you think the element was found when in fact it was not because it was filtered out.
See https://github.com/robotframework/Selenium2Library/issues/547
In contrast, Input Text and Input Password have never filtered on element tag or attribute.
I would try Get Element Attribute instead to get the attribute named value instead. According to the API it should be
accountSettingFrom_email#value

Variable in html code

I'm super new to html
All I need is the code for a field where a User can type his Staff Number and then a button which takes him to a URL that is made up of his Staff Number somewhere in the path.
Eg:
The User enters '123' in the text field and when clicking the 'Submit' button must be taken to this document:
www.mysite.com/Staff123.pdf
Not sure about the syntax but with an example I would be able to edit to suit what I need if I can get the code to create both the text field as well as the button.
Thanks a lot
You need to create a form in html. Basically, a form is a block which let user input some values (text, password, email, date, integer, file, ...) and that send these values, once submitted through a submit button, to a certain file that will process these datas.
A classic example is the login form that you can see on nearly each site you know.
It could be like that:
<form action="processing_script.php" method="post">
<input type="email" name="user_mail" placeholder="Please enter your mail here">
<input type="password" name="user_password" placeholder="Please enter your password here">
<input type="submit" value="Click here to send the form">
</form>
You can see some attributes used in this example, I will describe each of them:
action attribute for form tag: it's the script that will receive and process the values from this form.
method attribute for form tag: it's the way that values will be sended to the destination script. It can be etheir "post" or "get". The post method will send the values through http headers, so it's hidden for users (but it can be seen with tools like Wireshark). The get method will send values through the adress bar like this (this is the url you see once you submitted the form): http://yourWebsite.com/processing_script.php?user_mail=johndoe#liamg.com&user_password=mYp#$$W0rD
type attribute for form tag: it depends on the type of data you want the user to inquire. Your web browser will use this attribute to determine which way he will show the input to the user. For example, user will see a little calendar widget if you wrote type="date". The browser will also do some basic verification on the data type when the user will click the submit button (in fact, the browser will not let someone validate the form if for example the input type is "email" and the value entered by the user is "zertredfgt#" or "erfthrefbgthre", but it will pass if the mail is "johndoe#liamg.com"). Type can be email, text, date, password, file, submit, and some others.
name attribute for input tag: it's the name of the variable that will be used in the destination script to access to the value entered by user in the field of the form.
placeholder attribute for input tag: it's the text shown in the fields when they're still empty. The text is not in black, it's some kind of grey.
The last thing to explain is the :
it's displayed as a button, and the text on it comes from the value attribute.
In your case, I think you only need to use some JavaScript:
Create a JavaScript method that will redirect you to the right pdf url based on what is entered in a text input.
Create a small form, without action or method fields.
Create an input type text (for the staff number) with a good attribute name like this: name="staffNumber".
Create a button (not a submit button) like this:
To redirect to a specific url in JavaScript, you want to read this: How do I redirect to another webpage?
To read the value from an input in JavaScript, you can proceed like that:
...
var staff_number = getElementsByName("staffNumber")[0].value;
...
To create the full url of the right PDF, just use the concatenation operator (it's + in JavaScript), so something like that should work:
...
var base_url = "http://youWebsite.com/Staff";
var file_extension = ".pdf";
var full_url = base_url + staff_number.toString() + file_extension;
...
(the .toString() is a method that ensure it's processed as a string, to concatenate and avoid some strange addition that could occur I guess)
I think you've got everything you need to create exactly what you need.
Please keep us up to date when you've tried !

OpenErp: Update form fields

I would like to update form fields "on-fly" after button press that triggers python function.
Something like onchange that allows to return field values, but I need to do it after button press.
The situation is, to create module, that will allow to search for company information in public company register based on entered company registration ID.
The best would be, to show up some popup window with updated fields list and user has to confirm, wether to update fields values or not.
Thank you.
You can create a wizard (osv.osv_memory class) to simulate a dynamic popup window.
To populate this wizard, you can use the returned action descriptor of your python function, like this :
return {'res_model':'your.osv.memory',
'view_mode':'form',
'view_type':'form',
'target':'new',
'context':{...},
}
Thanks to your algorythm that get public company information, you just have to put you're fields values on the context, like you would do in a write() method.
Override your default_get() method of your osv_memory, which receives your context, and populate your wizard like you want.
I think a simple text fields on your wizard will be efficient to display fields updated values, and 2 buttons : cancel and OK (which will call the write method to apply fields values, always using your context).