How to send data from input using asp-route attribute? - forms

I'm using this code to call controller with action.
I want to send data from input tag inside asp-route-data.
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="korisnik" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="lozinka" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin" asp-controller="Members" asp-route-username=a sp-route-password="" asp-action="LoginUser">
So, asp-route-username should be the value from input korisnik.
Is it possible?

If I understood your question correctly (of which I'm not so sure) I think the answer to your problem is it use <form> tag. Then instead of appling the asp-route attributes on <button> tag, apply them on <form> tag:
<form asp-controller="Members" asp-action="LoginUser" asp-route-username="a" asp-route-password="">
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="korisnik" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="lozinka" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin"></button>
</form>
Be sure to check out the official ASP.NET Core documentation on how to work with forms.

If you pass username and password using asp-route-{value}, it will show these information in the url which is not recommended.
If you just want to pass the two input values from view to controller, you need to modify name attribute of input to match the action parameters.For example:
View:
<form method="post" asp-controller="Members" asp-action="LoginUser">
<span><label><b>Korisnik :</b></label></span>
<br />
<input type="text" name="username" id="korisnik" size="40" height="25" />
<br />
<br />
<span><label><b>Lozinka :</b></label></span>
<br />
<input type="password" name="password" id="lozinka" size="40" height="25" />
<br />
<br />
<button type="submit" title="Login" class="btnLogin"></button>
</form>
Action:
[HttpPost]
public async Task<IActionResult> LoginUser(string username,string password)

Related

Data from thymelaf form not saving properly into db

I'm dealing with saving an entity from thymealaf form to database.
My current approach.
Thymeleaf form in register.html
<form action="save" th:method="post" th:action="#{save}" th:object="${customer}">
<input type ="text" th:field="*{firstName}" placeholder="First Name" /><br />
<input type ="text" th:field="*{lastName}" placeholder="Last Name" /><br />
<input type="email" th:field="*{emailAddress}" placeholder="Email" /><br />
<input type="password" th:field="*{password}" placeholder="Password" /><br />
<input style="text-align: center" type="submit" value="Register" /> </form>
Controller methods:
#RequestMapping("/home")
public String home(Model model){
model.addAttribute("customer", new Customer());
return "register";
}
#RequestMapping("save")
public String save(#ModelAttribute(value = "customer") Customer customer) {
customerRepository.save(customer);
return "saved";
}
There is an issue with data binding as you can see in the attached screenshot
Problem solved. Just needed to change dependencies from:
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>
to
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.1.4.RELEASE</version>
</dependency>
as I can see you did not mention the name in the input field thymelaf binds data using the name
so u have to add a name in the input field as follow
<form action="save" th:method="post" action="save" th:object="${customer}">
<input type ="text" name="first_name" placeholder="First Name" /><br />
<input type ="text" name="last_name" placeholder="Last Name" /><br />
<input type="email" name="email_address" placeholder="Email" /><br />
<input type="password" name="password" placeholder="Password" /><br />
<input style="text-align: center" type="submit" value="Register" /> </form>
note:- name in the input field is should match with your names from the table

Contact form position

I'm trying to get the 'contact' form on my page in the middle of the webpage.
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Uw naam:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Uw e-mail:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="message">Uw vraag:</label><br />
<textarea id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Verstuur bericht" />
</ul>
</form>
use css:
#contact_form {width:400px;display:block;margin:0 auto;}
contact_form {position:absolute; top:50px;left:10px;width:500px;display:block;margin:0 auto;}

IE9/8 Form issue

I am having issues with a form in IE9 and IE8.
I have put the code into JS Fiddle (http://jsfiddle.net/EV3N5/) and it comes up with the error '< / FORM >' in red.
<FORM NAME="myform" ACTION="" METHOD="GET">
<p>Window Width
<br />
<input name="inputWidth" />
</p>
<p>Window Height
<br />
<input name="inputHeight" />
</p>
<p>Glass Thickness
<br />
<input name="inputGlass" />
</p>
<p>Sash Density
<br />
<input name="inputDensity" />
</p>
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
</FORM>
Could someone go over it and point out my stupid mistake?
Thank you.
The red form is because the input tag is not closed:
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
To
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)"/>
As to why it is not working in IE, you need to be more specific about what is not working.

onfocus on Form isn't working

I was just checking my newest website creation today & was making sure the form was ok & for some reason the onfocus of the street address is not working, the onblur works fine and all the other text inputs work with the onfocus & onblur. I have looked at the code for 30 minutes and for the life of my cannot figure out what is wrong. I need a fresh pair of eyes to check and see what I did wrong. Below is the code, the Street Address is the one that wont work. (onfocus)
<h2>Contact Form</h2>
<label for="name"></label><input type="text" name="name" size="26" value="Name" style="color: #775594;" onblur="if(this.value==''){this.value='Name'}" onfocus="if(this.value=='Name'){this.value=''}" /><br />
<label for="email"></label><input type="text" name="email" size="26" value="Email" style="color: #775594;" onblur="if(this.value==''){this.value='Email'}" onfocus="if(this.value=='Email'){this.value=''}" /><br />
<label for="phone"></label><input type="text" name="phone" maxlength="13" size="26" value="Phone" style="color: #775594;" onblur="if(this.value==''){this.value='Phone'}" onfocus="if(this.value=='Phone'){this.value=''}" /><br />
<label for="street"></label><input type="text" name="street" size="26" value="Street Address" style="color: #775594;" onblur="if(this.value==''){this.value='Street Address'}" onfocus="if(this.value=='Street Adress'){this.value=''}" /><br />
<label for="city"></label><input type="text" name="city" size="10" value="City" style="color: #775594;" onblur="if(this.value==''){this.value='City'}" onfocus="if(this.value=='City'){this.value=''}" />
<label for="zip"></label><input type="text" name="zip" maxlength="5" size="10" value="Zip Code" style="color: #775594;" onblur="if(this.value==''){this.value='Zip Code'}" onfocus="if(this.value=='Zip Code'){this.value=''}" /><br />
<p class="center"><input type="submit" value="Send" /></p>
</fieldset></form>
I see a typo:
onfocus="if(this.value=='Street Adress')
Address is missing a d.

Form GET and redirect possible?

I am having trouble figuring out how to set the form to submit a string to an affiliate but also redirecting the user to my own hosted thank you page. I am using the GET method to submit the string.
this is a very dumbed down version of my form
<form action="http://xxxxx.com/api/post.ashx" method="get">
<div>
<label ><span>First Name <font style="color: red;">*</font></span></label>
<input type="text" name="First" value="" maxlength="128" class="form-text required" />
</div>
<div >
<label ><span>Last Name <font style="color: red;">*</font></span></label>
<input type="text" name="Last" value="" size="60" maxlength="128" class="form-text required" />
</div>
<div >
<label ><span>Phone Number <font style="color: red;">*</font></span></label>
<input class="form-text" type="text" maxlength="14" name="phone1" id="phone1" value="">
</div>
</div>
<input class="form-submit" type="submit" id="edit-submit" name="op" value="Submit" />
</div></form>
If I understand your problem right, iframe is a kinda solution here.