I use jquery to show hidden form. I want to know how I can automatically show form when user click Submit and then press back button. I don't want user to click New Account again to show form after they click back button.
I have these working code currently:
<head>
<script src="https://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(function() {
$('#register_link').click(function() {
$('#show_form').toggle();
return false;
});
});
</script>
</head>
Google
|
New Account
<div id="show_form" style="display: none;">
<form id="register_form" method="post" action="verify.php">
Username
<inputname="username" id="username" type="text">
<br>
Email
<input name="email" id="email" type="email">
<br>
<input class="button_register" type="submit" value="Create New Account"
/>
</form>
</div>
Example: http://jsfiddle.net/n9uGH/17/
Is it actually possible? Thanks in advance
There are various ways that this could be achieved, however this depends on your server-side language and or hosting environment. Here is a fairly simple widely accepted methodology that should serve your purpose.
This is based on this cookie library for jQuery https://github.com/carhartl/jquery-cookie
Using cookies you can persist the information between the two page loads.
So on your form page you would do something like this
$(function() {
$('#register_link').click(function() {
$('#show_form').toggle();
return false;
});
if($.cookie('form_submitted')){
$('#show_form').toggle();
}
});
Then on the page which appears after submitting the form you can do this
$(function() {
$.cookie('form_submitted', 'yes');
});
Related
I am a newbie to VueJs
I would like to use Vue2 to create a validation form
Index.html
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm">
<label for="username">Name</label>
<input type="text" name="username" v-model="username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
but When I click the previous or next page, then back to index.html form page.
The input field's data is auto-remove.
How to using keep-alive in vuejs to save user input?
Is there any simple example?
Thank you very much
When you click on the previous or next page (I think you mean the browser's arrows) the page it's reloaded, so the javascript (and vue) too. To keep the data, you must "save" the form's state. A simple solution can be to save the form object in sessionStorage and check if there is a sessionStorage Item (let's say with a key 'formData') and fill the form object with these values.
Example:
<html>
...
<body>
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm" v-on:change="saveFormDataState">
<label for="username">Name</label>
<input type="text" name="username" v-model="formData.username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
<script>
new Vue({
el: '#app',
data: () => ({
formData: {
username: ''
}
}),
methods: {
initFormDataState(){
const formData = JSON.parse(sessionStorage.getItem('formData') || '');
if(formData){
this.formData = formData;
}
},
saveFormDataState(){
const formData = JSON.stringify(this.formData);
sessionStorage.setItem('formData', formData);
}
},
created(){
this.initFormDataState();
}
});
</script>
</body>
</html>
Note that I have added the on-change listener to the form to save the form's state when the user focuses on another input element or presses the submit button.
When my form is submitted I wish to get an input value:
<input type="text" id="name">
I know I can use form input bindings to update the values to a variable, but how can I just do this on submit. I currently have:
<form v-on:submit.prevent="getFormValues">
But how can I get the value inside of the getFormValues method?
Also, side question, is there any benefit to doing it on submit rather than updating variable when user enters the data via binding?
The form submit action emits a submit event, which provides you with the event target, among other things.
The submit event's target is an HTMLFormElement, which has an elements property. See this MDN link for how to iterate over, or access specific elements by name or index.
If you add a name property to your input, you can access the field like this in your form submit handler:
<form #submit.prevent="getFormValues">
<input type="text" name="name">
</form>
new Vue({
el: '#app',
data: {
name: ''
},
methods: {
getFormValues (submitEvent) {
this.name = submitEvent.target.elements.name.value
}
}
}
As to why you'd want to do this: HTML forms already provide helpful logic like disabling the submit action when a form is not valid, which I prefer not to re-implement in Javascript. So, if I find myself generating a list of items that require a small amount of input before performing an action (like selecting the number of items you'd like to add to a cart), I can put a form in each item, use the native form validation, and then grab the value off of the target form coming in from the submit action.
You should use model binding, especially here as mentioned by Schlangguru in his response.
However, there are other techniques that you can use, like normal Javascript or references. But I really don't see why you would want to do that instead of model binding, it makes no sense to me:
<div id="app">
<form>
<input type="text" ref="my_input">
<button #click.prevent="getFormValues()">Get values</button>
</form>
Output: {{ output }}
</div>
As you see, I put ref="my_input" to get the input DOM element:
new Vue({
el: '#app',
data: {
output: ''
},
methods: {
getFormValues () {
this.output = this.$refs.my_input.value
}
}
})
I made a small jsFiddle if you want to try it out: https://jsfiddle.net/sh70oe4n/
But once again, my response is far from something you could call "good practice"
You have to define a model for your input.
<input type="text" id="name" v-model="name">
Then you you can access the value with
this.name inside your getFormValues method.
This is at least how they do it in the official TodoMVC example: https://v2.vuejs.org/v2/examples/todomvc.html (See v-model="newTodo" in HTML and addTodo() in JS)
Please see below for sample solution, I combined the use of v-model and "submitEvent" i.e. <input type="submit" value="Submit">. Used submitEvent to benefit from the built in form validation.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<form #submit.prevent="getFormValues">
<div class="form-group">
<input type="email" class="form-control form-control-user"
v-model="exampleInputEmail"
placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" class="form-control"
v-model="exampleInputPassword" placeholder="Password"> </div>
<input type="submit" value="Submit">
</form>
</div>
<script>
const vm = new Vue({
el: '#app',
methods: {
getFormValues (submitEvent) {
alert("Email: "+this.exampleInputEmail+" "+"Password: "+this.exampleInputPassword);
}
}
});
</script>
</body>
</html>
The other answers suggest assembling your json POST body from input or model values, one by one. This is fine, but you also have the option of grabbing the whole FormData of your form and whopping it off to the server in one hit. The following working example uses Vue 3 with Axios, typescript, the composition API and setup, but the same trick will work anywhere.
I like this method because there's less handling. If you're old skool, you can specify the endpoint and the encoding type directly on the form tag.
You'll note that we grab the form from the submit event, so there's no ref, and no document.getElementById(), the horror.
I've left the console.log() there to show that you need the spread operator to see what's inside your FormData before you send it.
<template>
<form #submit.prevent="formOnSubmit">
<input type="file" name="aGrid" />
<input type="text" name="aMessage" />
<input type="submit" />
</form>
</template>
<script setup lang="ts">
import axiosClient from '../../stores/http-common';
const formOnSubmit = (event: SubmitEvent) => {
const formData = new FormData(event.target as HTMLFormElement);
console.log({...formData});
axiosClient.post(`api/my-endpoint`, formData, {
headers: {
"Content-Type": "multipart/form-data",
}
})
}
</script>
I use parse.com with their expressjs framework.
I have this html form which calls my /login url with post but for some reason it gets redirected(with status code 301) to a get request to that url.
This is my html form
<html>
<head></head>
<body>
<form method="post" action="/login">
<label>Username</label>
<input name="username"></input>
<label>Password</label>
<input name="password" type="password"></input>
<input class="button" type="submit" value="Log In">
</form>
</body>
To make the question more clear i use express js with parse.com and here are the two routing defined
app.get('/login', function(req, res) {
res.send('get is called');
});
app.post('/login', function(req, res) {
res.send('post is called');
});
Now no matter what i provide in my form method i always get "get is called" in the browser on submitting the button.
I also tried to debug what is happening in by the developer console and this is what i get
I think you are using ejs template try adding all the attributes in your form as without double quotes, something like this and try
<html>
<head></head>
<body>
<form method=post action=/login>
<label>Username</label>
<input name="username"></input>
<label>Password</label>
<input name="password" type="password"></input>
<input class="button" type="submit" value="Log In">
</form>
</body>
</html>
I checked in the console and the form attributes when double quotes were added was something of this sort
<form action=""/login"" method=""POST"">
so by default the form was getting submitted as a GET request instead of a POST. I am still not sure why this is happening, just started learning express, will add more details when I get them.
I am writing a very simple MVC4 test page and unobtrusive Ajax does not seem to be working. When I click my submit Button the page is not submitted.
I have a breakpoint is VS and can tell there is no request.
I am using Firefox and when I click the submit button the Web Console shows this JavaScript error:
--- Empty string passed to getElementById()
Which occurs at line 16 in.--- jquery.unobtrusive-ajax.js
I setup ajax Options as follows:
AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "officeList", Confirm = "Are you sure?", Url = Url.Action("GetOfficeData") };
Here is my AjaxForm:
#using (Ajax.BeginForm("GetOfficeData", ajaxOpts))
{
<div>
#Html.DropDownList("orgList", new SelectList(Model.Organizations, "ORGID", "ORGNAME"));
<button type="submit" id="btnSubmit">Submit</button>
</div>
}
I do get the 'Are you sure prompt' when I click the submit button (as defined in the ajax options).
If I change Ajax.BeginForm to:
#using (Html.BeginForm())
...
Then there is a request, my breakpoints get hit, and there as no JS errors.
I have used NuGet to get the latest version of both jQuery and unobtrusive-ajax. Here are
my script tags from view source (all of them – in order):
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
Here is the form that gets rendered:
<form action="/Selectee/GetOfficeData" data-ajax="true" data-ajax-confirm="Are you sure?" data-ajax-mode="replace" data-ajax-update="#officeList" data-ajax-url="/Selectee/GetOfficeData" id="form0" method="post">
<div>
/*--my drop down .....
<br />
<button type="submit" id="btnSubmit">Submit</button>
</div>
</form>
Any ideas?
I have it working.
I did not have an Html.BeginForm(), only the Ajax.BeginForm(). Is that valid?
I added an Html.BeginForm() with an Ajax.BeginForm() and all my controls inside that form and it started working.
I thought Ajax.BeginForm() took the place of Html.BeginForm, but it appears I need both. Is that correct?
I have one form of user name and password fields followed by submit button. How do I stay in current page after clicking submit button without reloding page?
Any help is appreciated.
Try tis if you need a sumit button.
<input type="submit" onclick="return false" />
But you may want to use a simple clickable button if you don't wan't to sumbit your form on click... in this case, this should do the trick:
<input type="button" />
There are a couple of options. First of all in the markup for the submit button you can return false:
<input type="submit" onclick="return false;" />
The problem with the approach above is that it will cancel the submit, not sure if that's desired or not. Another approach you can take is to use something like jQuery to do an ajax request.
To do that you'd need to include jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Then change your submit button to a regular button:
<input type="button" onclick="doAjaxCall();" />
The javascript function doAjaxCall would then be something like:
<script type="text/javascript">
function doAjaxCall() {
$.ajax({ url: "destinationurl.aspx", success: function(){
alert('success! insert success javascript code here');
}});
}
</script>