I have this following problem because I don't have expertise in Javascript
I'm testing a Facebook login at
http://goo.gl/3R3owa
After the user is logged in Facebook an alert windows with the birthday and location comes up. So far so good.
Rather than show that window i will like to autopopulate the day, month and year input boxes in that page.
Is there any way to do that?
Here is my code
http://goo.gl/IFhJdu
Thanks in advance!
Assuming that you have all the data in the response object and element_id# is a valid id of an element present on the HTML page. You can simply use following JS code do set the value of an input field in JS:
document.getElementById('element_id1').value = response.gender;
document.getElementById('element_id2').value = response.birthday;
document.getElementById('element_id3').value = response.location.name;
Similarly, for feeding the data to an HTML element, you can use innerHTML, for example:
document.getElementById('element_id1').innerHTML= response.gender;
(You can use the above code to replace the alert() method in you JS code.)
Related
I have a task where I need to automate Sign in form authentication. For this example, I'll show you Tiktok authentication form (Mobile interface, not desktop. E-mail and password option)
If I enter text values into the fields programmatically, the Login button won't become active, and if I manually focus on the fields with a mouse click, the value disappears. These are two lines of code I run to put the value in:
let email_input = document.getElementsByName("email")[0];
email_input.value = 'sample#email.com';
I understand it needs to trigger a certain event to assign a value into it's JS model, but I can't figure out how to do it. I have tried sending change or input events onto this text field with no luck using this code:
let email_input = document.getElementsByName("email");
email_input[0].value = 'sample#email.com';
custom_event = new Event('input');
email_input[0].dispatchEvent(custom_event);
// tried also change, textInput like so:
custom_event = new Event('change');
email_input[0].dispatchEvent(custom_event);
But this does not seem to help.
So my goal is to put values into both fields Email and Password in the way it will be detected and Log in button would become active.
Any suggestion would be much appreciated
You should first focus needed input element and then execute document.execCommand with insertText command:
let email_input = document.getElementsByName("email");
email_input[0].focus();
document.execCommand('insertText', false, 'sample#email.com');
With this method input\textarea value modification should be captured by all major frameworks including Angular and Vuejs. This modification will be processed by frameworks the same way as if user pressed "Paste" option in browser main menu.
It all depends...
Who/what are you? A normal browser user? A bot? The browser author?
Because code like this is useless...
let email_input = document.getElementsByName("email")[0];
What document are you referring to? Who's document? Did you inject this instruction into the page and executed it?
You're not telling us where you're coming from, but anyway...
If you are the browser author, or you can run JavaScript macros from your browser (ie: the Classic browser) then you can do something like this...
var Z=W.contentWindow.document.querySelectorAll('input[type="password"]');
if(Z.length>0){
Z[0].value='password123';
Z=W.contentWindow.document.querySelectorAll('input[type="email"]');
if(Z.length>0){Z[0].value='email#abc.com';}
}
To automatically populate such fields, and if you also want you can SubmitButtonID.click() the submit button for as long as the isTrusted property is not tested by the website.
Continued...
Test if normal (non-custom) submit button exists and click...
Z=W.contentWindow.document.querySelectorAll('input[type="submit"]');
if(Z.length>0){
if(Z[0].hasAttribute('disabled')){Z[0].removeAttribute('disabled');} <--- Enable it if disabled
Z[0].click(); <--- automate click
}
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.
I want to make a page like this
http://agprotective.com.au/invoice/invoice.htm
There someone can add multiple date,site,start time, end time, hours amount by click the button + or can remove the row using - sign button. How can I get the value of that input in php? Normarlly we use $_POST['here-is-the-value-of-name-attribute-of-the-input-tag'];
But in the case http://agprotective.com.au/invoice/invoice.htm , I do not know what will be the value of the name attribute of the tag.
Can anyone tell me how to get the values of the dynamically generated (button generated) input tags and then send them to database.
The correct way to do this is simple:
<input name="myinput[]" />
PHP will then have:
$_POST['myinput'][0], $_POST['myinput'][1]...
The page you linked does it in a stupid manner, if I'm honest.
I have a form which is using a select list to jump around my site. This is currently using onclick window.location so user selects the page and presses go and it goes to that page.
I now need to add a small text box for the user to type in a code (say 123456) and then when they click go, it should go to the url selected, but with the [CODE] being the number entered in the box. I discovered jquery replaceAll so it gave me the idea to have this in the select html:
http ://jumptothispage.com/parts/p[CODE]/edit
http ://jumptothispage.com/jobs/j[CODE]/edit
When you press go, it would replace all [CODE] in that html with the code entered and then jump to that page selected, e.g.
http ://jumptothispage.com/parts/p123456/edit
http ://jumptothispage.com/jobs/j123456/edit
I am already using jquery on my site so makes sense to try and utilize that again. I'd appreciate a pointer and or other suggestions instead.
Thanks,
Paul.
A workaround: Store the code in a cookie, so at least it's not visible to every person who looks at the URL bar. Then in every onclick, fit it into the URL to send the user to the "right" page.
Or, have your select option's value literally read CODE, which your onclick interprets to mean "The user hasn't set the code yet." When the user types in the code, store it in a variable (in the example below, realcode), and you can then do this:
$('select#navigation option').each(function(idx, el) {
$(el).attr('value', $(el).attr('value').replace(/CODE/, realcode));
});
I am wondering if there's a good way to take a variable built in Javascript and then insert it into a form that's on another page.
My application is a survey: I've got it so that at the end of the survey, all the results are displayed so they can look over their answers. Now I want to have the user click a link and have the answers of the survey show up automatically in the body of the form where they'll then add their email and contact info and click "send."
Any ideas?
Knowing that this ISN'T possible is fine too...if not, what alternate methods might I accomplish the end result?
You can create a hidden field in first page and change that value from javascript variable. When you post that page it can be another page where you need to display in form element.
EDIT
If you need without form in first page you need to link with hyperlink like below.
<a href='#' onClick='OpenPage()'> Go To Result </a>
<script>
var val=20 ; // say this is the value you want to pass to second page
function OpenPage ()
{
window.location.href = "resultpage.php?param=" + val;
}
</script>
After you need to read that param in resultpage either with javascript through URL string or from server side (in PHP $_GET).
Hope it helps.