get request from form in HTML by using query parameters - javascript

I am new to this whole concept, so I am sorry if I am asking a basic question.
My HTML page has following form element,
<form method="POST" action="/:user">
<label>user :<label>
<input type="text" id="user" name="user">
<label>password :</label>
<input type="password" id="password" name="password">
<button> Submit <button>
</form>
My part of nodejs code from server side when calling this post method is:
app.post('/:user',(req,res)=>{
console.log(req.params.user);
})
All excluding this HTML element are working fine.
In the above HTML code, let's say if I give user input some name as " john", my idea is that it should call the router mentioned in the below nodejs code on the server-side.
But the way it is working is, it is calling the '/:user' rather than calling the '/'.Please help me how to change the action in the form element in HTML above, so as to have the desired output. By the way, I'm using ejs framework for HTML.

Related

Using closest for getting form object

Recently, I am reviewing client side code written by another programmer. I am surprised with code which is used for getting form object.
HTML for Login Form
<form id="frm_login" action="">
<input type="text" name="username" id="username">
<input type="password" name="pwd" id="pwd">
</form>
He has used following code to get form object
$frm = $("input[type='password']").closest("form");
But there is simple code for getting form object which I prefer:
$frm = $("#frm_login");
Is there any reason to use closest to get form object in above scenario?
I would really like to know if there is any performance issues.
The id of element is supposed to be unique. If there is single form on page then there is no need to relate it to its parent using closest. It would have more sense if the form does not have id. Getting form through id seem more straight forward and fast.
If there are multiple forms and one have to get the form in which the element exists then using closest make sense. This could be understood with the following example.
Live Demo
Html
<form id="frm_login1" action="">
<input type="text" name="username" id="username1" />
<input type="password" name="pwd" id="pwd1">
<table>
<tr>
<td>
<input type="text" class="myInputClass" />
</td>
</tr>
</table>
</form>
<form id="frm_login2" action="">
<input type="text" name="username" id="username2">
<input type="password" name="pwd" id="pwd2">
<table>
<tr>
<td>
<input type="text" class="myInputClass" />
</td>
</tr>
</table>
</form>
Javascript
$("input[type='password']").closest("form").each(function(){
alert($(this).find('.myInputClass').val());
});
If there is single form on page then there is no need to relate it to its parent using closest. It would have more sense if the form does not have id. Getting form through id seem more straight forward and fast.
But The Closest() method is very cool and very useful, especially when you start to deal with event delegation in which events are trapped at a higher level in the node tree than are the elements that triggered the event.
the closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.
as others said, if you have id, no need to use closest to get parent form. and using id is faster.
HOWEVER, in some cases you need to use closest to get form, for example, if you write a universal function for validating every password input in every form, in this case you don't like to get forms by ids and search for its childes passwordfields to prevent auto submitting, so i guess the guy who wrote the code, is doing this(a function which validates passwords before submit)
$("input[type='password']").each(function(){
$frm = .closest("form");
$frm.submit(function(event){
if( not valid password){
......
return false;
}
});
});

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

How can I fill the action parameter of a form with values from the form's input?

I know I can pass query parameters from a form and expect them in the query string:
<form method="GET">
<input type="text" name="param" value="value" />
<input type="submit" value="submit" />
</form>
This results in
http://blah-blah-blah/blah?param=value
However, in my webapp, I'm using path parameters. To access a single book, #459, in the library, you'd visit
/books/459
and to check one out, POST to
/books/459/checkout
where 459 is a path parameter. When I try
<form action="/books/{book_id}">...</form>
it takes me to
/books/%7Bbook_id%7D
rather than
/books/459
Do I need javascript or something to build the URI?
Thanks to RobG
I have used the same thing in calling WhatsApp from mobile application
It works beautifully
<form action="https://wa.me/"
onsubmit="this.action = this.action + this.mobile.value; this.submit();">
<input type="tel" name="mobile" size="10" value="91xxxxxxxxxx"/>
<input type="text" name="text" value="Thanks Vijayan!" />
<input type="submit" value="WhatsApp" />
</form>
You may need something like:
<form onsubmit="this.action = this.action + this.book_id.value;" ...>
However, making the action dependent on scripting is poor design. It is much more robust for your server to deal with the URI ...?book_id=value, which does not require any client script at all.
If you are generating your HTML with PHP, the code below should work (untested).
$book_id = 459;
<form action="/books/{$book_id}">...</form>
Alternatively, you could dynamically modify the html using JavaScript. It is better not to do it this way because some users may disable JavaScript. (untested)
$('form').attr('action','/books/' + book_id);

Form is not submitting via javascript on a button

My website has been created with a CSS/HTML frame work that has been integrated into an ASP.NET website.
Inside of a ContentPlaceHolder, I have a simple login form. The catch is that I am using the onclick event of an image to submit the form. It normally works pretty straight forward, but this time I am having an issue.
<div id="login">
<form action="index.aspx" method="post" id="nothingForm" name="nothingForm">
</form>
<form action="https://google.com.au" method="post" id="loginform" name="loginform">
<input type="text" name="uname" value="username" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
<input type="password" name="pword" value="password" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
</form>
<br /><img src="images/login.gif" alt="" onclick="document['loginform'].submit()" /> </div>
I have to stick another form before the real form to make onclick="document['loginform'].submit()" actually work. This should not be the case, of course, but I was unable to find any solutions to it on the web.
Has anyone else come across this before?
Did you try out document.getElementById("loginform").submit()? I would think this is better, since I have never seen anyone access elements on the document itself like that before. May be some kind of strange side effect.
Your problem is that the page already has a form around all the code. Forms can not be nested, so your first form tag will be ignored, and it's end tag will end the outer form.
You have to place your form outside the already existing form.

Is it possible to use JavaScript to submit an unnamed form from outside an iFrame?

I know that may sound silly, but I'm trying to submit a form on a page inside an iFrame, from the parent site.
Here's an example of the form:
<form action="/add_email" method="post">
<div class="field">
<label for="newEmailAddress" style="width: auto">Add new email address</label>
<input type="text" id="newEmailAddress" name="email" value="null" class="text-field" />
<input type="hidden" name="__app_key" value="null"/>
<input type="submit" value="Add address and send activation email">
</div>
</form>
As you can see, the Submit button, and the form itself both lack a proper name or id, this is not something I have control over. (It's on an external website.)
Any suggestions?
When no name is given to the form then form has the default form name in a form of array
ie form[]
hence one can create as many forms in script, the default name's index will increase.
Hence one can use it accordingly.
Since it is an external website — no. The Same Origin Policy prevents it.
If it was the same website then you could communicate across frames and then access the form via its numerical index in the forms object (but you would also likely be able to give it an id and use that instead).

Categories

Resources