the event.preventDefault() doesn't work
<script type="text/javascript" src="vue.js"></script>
<div id="app">
<form v-on:submit.prevent="saveData">
<input type="text" name="test">
<button type="submit">Go</button>
</form>
</div>
<script type="text/javascript">
new Vue({
'el': '#app',
'methods':{
'saveData': function(event){
event.preventDefault();
}
}
});
</script>
.prevent modifier is sufficient. You don't have to call event.preventDefault() inside the handler.
See demo below. There are two forms, one with .prevent and one without. Notice the first just logs. The second logs and goes to another page (the form submits).
<script src="https://unpkg.com/vue"></script>
<div id="app">
<form v-on:submit.prevent="saveData">
<input type="text" name="test">
<button type="submit">Go</button>
</form>
<hr>
<form v-on:submit="saveData">
<input type="text" name="test">
<button type="submit">I WONT PREVENT</button>
</form>
</div>
<script type="text/javascript">
new Vue({
'el': '#app',
'methods': {
'saveData': function(event) {
console.log('I was called');
}
}
});
</script>
Related
I have problems accessing my form from the JS file, and I don't know how to access it. Here's my code:
$("#my-form").submit(function(e) {
e.preventDefault();
var textInput = $("#my-input").val();
$("#container").html(textInput);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<script id="view-contact" type="text/html">
<form id="my-form" class="form">
<input id="my-input" type="text">
<input type="submit">
</form>
</script>
Don't put your html inside the <script> tag. Put your JavaScript / JQuery inside the script tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" class="container-fluid"></div>
<form id="my-form" class="form">
<input id="my-input" type="text">
<input type="submit">
</form>
<script>
$("#my-form").submit(function(e) {
e.preventDefault();
var textInput = $("#my-input").val();
$("#container").html(textInput);
});
</script>
I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.
How am I getting the error: errors not defined.
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<div id="app">
<h1>asdfasd</h1>
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script>
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
You seems to use veevalidate 3 instead of veeValidate 2. I have updated the veevalidate to version 2 in my answer as well as adding v-model="email_primary"
Since you have a template already, I have removed template: '#app',. Kindly see below
<!DOCTYPE html>
<html>
<head>
<head>
<body>
<div id="app">
<h1>asdfasd</h1>
<form action='#' method='POST'>
<input v-model="email_primary" v-validate="'required|email'"
:class="{'input': true, 'is-danger': errors.has('email_primary') }"
name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.15/vee-validate.min.js"></script>
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
Here is a working fiddle. I hope my answer will help.
I have three pages new.html, somepage.html, and someotherpage.html
new.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">Some page</div>
<div id="content">show the stuff</div>
When clicking on the somepage.html link, it is displayed in div having id content.
somepage.html
<form id="form" action="someotherpage.html" method="post">
<input type="submit" value="test"/>
</form>
The action of the form goes to a new page, whereas I want it to be in the same div only where the actual form was.
You will have to do something very similar as you the first page, load someotherpage.html in a sibling of your form :
somepage.html :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script>
$('#form').submit(function(e) {
e.preventDefault();
$('#target').load($(this).attr('action'));
});
</script>
<div id="formWrapper">
<form id="form" action="someotherpage.html" method="post">
<input type="submit" value="test"/>
</form>
<div id="target"></div>
</div>
I have an input inside a popover content like so:
JSFiddle
HTML:
<div id="vue-app">
<div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data-content='<input v-model="message"/>'>
Click Me!
</div>
<hr>
<input v-model="message"> {{ message }}
</div>
And here is JS :
new Vue({
el: '#vue-app',
data: {
message: 'I am a Text'
}
});
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
As you can see the input out of data-content binds well, but the one inside doesn't bind!
Any idea would be great appreciated.
You can use like this:
Here is the working demo: https://output.jsbin.com/mokoka
https://jsbin.com/mokoka/edit?html,js,output
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue#2.4.2"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="vue-app">
<div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true">
Click Me!
</div>
<hr>
<input type="text" v-model="message"> {{ message }}
<div id="popper-content" class="hide popper-content">
<input type="text" v-model="message">
</div>
</div>
</body>
</html>
JavaScript:
new Vue({
el:'#vue-app',
data: {
message: 'I am a Text!'
}
})
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
html: true,
content: $('#popper-content')
}).on('show.bs.popover', function() {
$('#popper-content').addClass('show')
}).on('hide.bs.popover', function() {
$('#popper-content').addClass('hide')
})
});
Vue cannot just know of html-element you dynamically create, hence your created input-element cannot be bound. If you really want to solve it this way, I think the render function can help you: https://v2.vuejs.org/v2/guide/render-function.html
However, a more elegant solution (imho) is to create the basic Vue v-if function
Html:
<div id="vue-app">
<div class="btn btn-primary" v-on:click="showPop = !showPop">Click Me!</div>
<div class="mypopover" v-if="showPop">
<p>Title</p>
<input v-model="message">
</div>
<hr>
<input v-model="message">
{{ message }}
</div>
Js:
new Vue({
el:'#vue-app',
data: {
message: 'I am a Text',
showPop: false
}
});
Just apply the bootstrap css class for styling
I found a useful Vue Package(vue-popper).
It do the same thing without using Bootstrap!
JSFiddle
<popper trigger="click" :options="{placement: 'bottom'}">
<div class="popper">
<input type="text" v-model="message">
</div>
<div slot="reference" class="btn">
Click Me!
</div>
</popper>
Cheers!
You can simply use this component, that does not destroy the popped element https://www.npmjs.com/package/#soldeplata/popper-vue
My code:
<html> <body>
<p>When you submit the form, a function is triggered which alerts sometext.</p>
<form id="abc" action="https://www.w3schools.com/action_page.php"
onsubmit="myFunction()"> Enter name: <input type="text"
name="fname"> <input type="submit" value="Submit"> </form>
<script> function myFunction() {
alert("The form was submitted"); } </script>
</body> </html>
It run ok, but i want after submit will show thankyou change form id, don't alert, it display text "thank you" like picture: result
My jsfiddle: https://jsfiddle.net/nguoicovan/adpjq8bc/
Use Ajax Jquery
<html> <body>
<p>When you submit the form, a function is triggered which alerts sometext.</p>
<form id="abc" action="https://www.w3schools.com/action_page.php"
onsubmit="myFunction()"> Enter name: <input type="text"
name="fname"> <input type="submit" value="Submit"> </form>
<script> function myFunction() {
alert("The form was submitted"); } </script>
</body>
<script> $("#abc").submit(function(e){
e.preventDefault();
$.get("https://www.w3schools.com/action_page.php",$("#abc").serialize(),function(data){alert("Thank you for submitting ")})
})</script> </html>
don't forget to include jquery before you use it
<html>
<body>
<div id="app">
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form id="abc" action="https://www.w3schools.com/action_page.php">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$('form#abc').on('submit', function(event){
event.preventDefault();
var formData = $("form#abc").serializeArray();
console.log(formData);
$.ajax({
url: "https://www.w3schools.com/action_page.php",
type: "POST",
data: formData,
dataType: 'jsonp',
crossDomain: true,
success:function(json){
$('#app').html('<h1>Thank You</h1>');
},
error:function(){
$('#app').html('<h1>Thank You</h1>');
}
});
});
</script>
</body>
</html>
You can change your "action" to your thank you page
<form action="thankyou.php">
So that when you trigger the the submit button it will go to thankyou.php you can do also your backend functionality on that page.