I have this "Log in" page.
I wanted to make it so that, if the user clicks "Log In" and all the input fields aren't filled or error or something that it would change the input border color red and shadow.
I'm using nodejs express ig. and its in a form I'm using method post. I tried getting stuff with "document.." but that doesn't work. any solutions?
JavaScript running in the browser can manipulate the DOM via the API provided through the document object.
On the server there is no document. The browser makes an HTTP request. The server generates an HTTP response. When the response is HTML it is usually generated from either a static file or a template.
If you want to dynamically modify the document, a template is the best way to do this.
You could do something along the lines of:
<input name="something" class="<%= fields_with_errors.includes('something') ? 'errors' : '' %>" value="<%= user_input.something %>">
Where fields_with_errors is an array and user_input is an object holding the values the user entered when they submitted the form.
The specifics depend on the template language you pick.
There are numerous template languages you can use with Node.js. Pick one and integrate it with the code you use to process and response to HTTP requests. Many people use Express to do this. MDN has a tutorial. There are lots of middlewares to add template support to Express and the MDN tutorial covers them.
Related
I am new to Java EE. In my application, I have a HTML page containing a text area filled with some information.
I also have a form for the user. Once he submits the form, I use a servlet to process the information.
Finally I need to forward the Result from the servlet to the same HTML page and update it in the existing textarea.
I have done creation of HTML page, submitted the form to servlet.
I am now stuck on how to access the textarea in the HTML page to update my result.
I googled a lot but everywhere people forward the result of servlet to JSP page and create a fresh HTML page using "out" object.
I need to use the same textarea of my HTML page to update the result. Please help me on achieving this.
Thanks in advance.
There are two ways to do this.
Server-side rendering. You can re-draw the whole page, with a normal form submit. In this case you would put something in request scope in the servlet and then access that in the JSP when you draw the textarea. Note that you are not accessing the HTML textarea in the JSP - the JSP runs server-side code to generate HTML markup, but you are not accessing the browser DOM directly.
This might look like:
servlet: request.setAttribute("textareaContent", varWithTextareaContent)
JSP: <textarea>${textareaContent}</textarea>
Client-side rendering Instead, you could make an AJAX post request with jQuery (there are some plugins to help with this). In this case, your servlet would not forward to a JSP for HTML rendering - it would directly return a JSON object like {"textareaContent": ...} , and you would handle that client-side in your AJAX callback. In this case you would be accessing the textarea in the browser DOM directly, in Javascript (not JSP).
I have the following html code:
<input type="text" value="test value" readonly/>
This input element is non-editable since it has the readonly attribute. But it's still possible to make this field editable by inspecting the element using the Firebug tool in Firefox. Is there any way to make this attribute non-editable?
This is really not possible. Someone will find a way around it because your code is executed on the client. Even if you secured the client (web browser) there is still a way to post back and tamper with read-only fields using a proxy server like Fiddler. You have two choices.
1)Remove the item from the field list and make it a text element. This is only a valid solution if you don't need the information back in the POST.
2) Keep the item read only (or hidden) but check the content has not changed on the server side. This is a best security practice anyway. You should always validate on the server even if you validate on the client. The reason is that people can work aound client side validation. There are different approaches for server side validation according to your back end language. In this case, if you are using PHP or ASP.NET, then you can stick the value in a session variable before you serve the page and check the POSTED value against the session value when the form is submitted.
I need to know how to fill an web form using Delphi XE3? I have a web form with user name and password, so how to fill it programmatically?
The page is http://batelco.com/portal see only two inputs user name and pass so how to fill and pass them ?
Using Internet Direct (Indy) HTTP client class, you can submit form values to the server using HTTP POST.
The Indy HTTP client will also receive and store cookies which the server sends with its response, if an instance of the TIdCookieManager class has been assigned to the IdHTTP client component.
HTTP cookies are required by many secure web applications when the client makes further HTTP requests to other secured URL on the server. The Indy HTTP client then will send the cookies with the request (if a TIdCookieManager has been assigned to the IdHTTP client component).
So you could send a login POST request on the login URL, providing needed authentication information, and then send a GET request to the download statistics URL to retrieve its HTML.
Regarding your specific login form, which uses ASP, here is a question about programmatically sending POST requests: HowTo deal with cryptic hidden values for ASP Net (__VIEWSTATE)
This article shows how to get and set properties of named elements.
You should get and set value properties. What ID's would form elements have depends upon your page.
Check if Element with ID has a value
This article while asked "how to read" also describes both how to get values and how to set them. Afterall if you can do A := B (read value), then you probably can also do B := A (set value).
read content in webbrowser input field
Now, that the page URL is given in the question we can click on the right top corner login-form elements in WWW browser with right button, and choose "Inspect element" to see its sources. Or, if browser is not modern and does not have Inspect command on menu, we can use another commend, like View page source and find form in the sources of the whole page. For example one of those elements is
<input name="txtUsername" type="text" maxlength="15"
id="txtUsername" tabindex="1" class="inpu-field" onfocus="txtfocus();"
onblur="txtblur();" style="color: gray; background-image: none;">
Thus we know know the ID of 1st element of form, whose "value" attribute we need to get(read) or set(write).
Links above show how to do it, given the known ID.
BTW, you given your page wrong, the real page is https://www.e-services.com.bh/Eservices/login_batelco.aspx
What about your original page, it just does not work with MSIE6 that is TWebBrowser in default mode - for compatibility with all the written applications using Microsoft ActiveX component. See http://imgur.com/ad4wbOI
If can use Google Chrome instead of TWebBrowser.
Or you can reach the ActiveX interface as one of TWebBrowser properties, and acquire new interface and turn off MSIE6-compatibility http://msdn.microsoft.com/en-us/library/aa752510.aspx
However, "how to make this page render in twebbrowser" is another, new question, not the question you asked here.
Actually, the only reason why i do not vote for closing this question as duplicate, is because none of articles above have "set" or "write" or "fill" in their title, so finding them was a bit harder than trivial.
But if the page is not mutating on load and does not have some one-time protection like CAPTCHA or unique form hash-codes, then you can post all the values with single HTTP request without even loading the form.
I'm sure I'm missing something basic here, but I just can't get my finger behind it..
If I land on a url that is say domain.com?key=123 and there is a form on domain.com that has a field called key. I thought it would fill in that field with the value 123 by itself, since it's been passed. Am I missing something here?...
thank you!
The webmaster may decide to pass the variable inside of the html form, but that may also be not the case. Most often, GET requests are used to send data from a form to a php script but it's more rare to see the an html form compiled with a php script.
If you want a form field that pulls in your URL parameters then do something like this:
PHP
<label>Key:</label>
<input type="text" value="<?php echo $_GET["key"]; ?>">
Coldfusion
<label>Key:</label>
<input type="text" value="<cfoutput>#URL.key#</cfoutput>">
What language are you using? Normally you start with a question mark...
domain.com/?key=123
If you have other variables you use an ampersand.
domain.com/?key=123&anotherKey=456&lastKey=789
UPDATED: Here is a link to parse the query string using Javascript:
How can I get query string values in JavaScript?
Something else happens on that page - you fill the form, and when posted, server GETs your variable KEY for use for whatever page author saw fit. It is a whole other story, whether you will see this variable on the form when it is reloaded after posting
What you see in the browser address bar is an HTTP URL which is just indicative of the HTTP Request being made.To see the complete HTTP Request - use Chrome - Developer tools. (HTTP Request /Response / Body / Cookie)
Your HTML page is formed by the Server you send the HTTP Request to. This HTML page is send back to the Browser in HTTP Response Body. Your browser which has layout (HTML) Engine running "just parses/renders the HTML in the HTTP Response".
The engine would - Parse to check for any HTML inconsistencies , to build DOM tree, to load scripts/images/css
Its purely you and only you who would decide as how to use the data. This data can either be used by JavaScript or Server Side code like JSP.
Other users have already suggested to you the way this can be achieved like running some script.
You need to print the value from the GET array into the value attribute of the input element. (ie. if you are using php use <input name="key" value="<?php echo $_GET["key"]; ?>" />)
the site addres: http://www.ynet.co.il/YediothPortal/Ext/TalkBack/CdaTalkBack/1,2497,L-3650194-0-68-544-0--,00.html
fill the form with rubbish.
Hit 'Send'
the form post the data to another HTML without any parsing of the data i've just added
How do they do it?
A likely option is that they are using a content management system where "html" on the URL doesn't actually mean it's a static html file.
This may be out of left field, but I've certainly used the occasional JS function to grab everything in the header and either parse it or pass it to another script using AJAX.
I'll sometimes use this method in a 404.html page to grab the headers of the previous page, parse them out to see where someone was trying to go and redirect them.
That is, as annakata said, one of the numerous options available.
Edit based on clarified question:
Numerous frameworks can be configured to intercept an html request - for instance asp.net can be set to handle any given extension and an HTTPModule could do anything with that. It's really up to web server configuration what it decides to do with any request.
also: you don't really want to be saying "hijack"