I have a bootstrap-vue code with a form. The form doesnt show up in the browser.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap-Vue + CodeIgniter Example</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css">
</head>
<body>
<div id="app">
<b-container>
<b-row>
<b-col>
<h1>Bootstrap-Vue + CodeIgniter Example</h1>
<b-form @submit.prevent="submitForm">
<b-form-group label="Name" label-for="name-input">
<b-form-input id="name-input" v-model="form.name"></b-form-input>
</b-form-group>
<b-form-group label="Email" label-for="email-input">
<b-form-input id="email-input" type="email" v-model="form.email"></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</b-col>
</b-row>
</b-container>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
form: {
name: '',
email: ''
}
}
},
methods: {
submitForm() {
axios.post('<?php echo base_url('submit-form'); ?>', this.form)
.then(response => {
console.log(response.data);
// Handle successful response here
})
.catch(error => {
console.error(error);
// Handle error response here
});
}
}
});
</script>
</body>
</html>
I have generated the code from ChatGPT. Please help to fix the problem in my code so that the form renders properly. Please tell why the form is not shown in the browser.
The error is in the string interpolation
'<?php echo base_url('submit-form'); ?>'
You should use different types of quotes
'<?php echo base_url("submit-form"); ?>'
or
"<?php echo base_url('submit-form'); ?>"
or
`<?php echo base_url('submit-form'); ?>`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap-Vue + CodeIgniter Example</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
</head>
<body>
<div id="app">
<b-container>
<b-row>
<b-col>
<h1>Bootstrap-Vue + CodeIgniter Example</h1>
<b-form @submit.prevent="submitForm">
<b-form-group label="Name" label-for="name-input">
<b-form-input id="name-input" v-model="form.name"></b-form-input>
</b-form-group>
<b-form-group label="Email" label-for="email-input">
<b-form-input id="email-input" type="email" v-model="form.email"></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</b-col>
</b-row>
</b-container>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
form: {
name: '',
email: ''
}
}
},
methods: {
submitForm() {
axios.post(`<?php echo base_url('submit-form'); ?>`, this.form)
.then(response => {
console.log(response.data);
// Handle successful response here
})
.catch(error => {
console.error(error);
// Handle error response here
});
}
}
});
</script>
</body>
</html>