I am new to vite. I am trying to store data from checkbox. now I am defining data property like this--
const fromInputs = reactive({
name: '',
guard_name: '',
permissions: reactive({})
});
and one of my checkbox is --
<input type="checkbox" v-model="fromInputs.permissions.newUser" />
Now when I click on checkbox, it' showing an error. which is---
Cannot create property 'newUser' on string ''
what is wrong in my code
Related
I was woundering how to forward user selected html (radios and checkboxes) that is posted by a user as is to a newly rendered website using nodejs
That means user selected radio buttons and checkboxes, as well as unselected buttons and radios would be as per user selection and with the html tags
Assuming you are using Express with Pug, here's an example.
form
input(type="checkbox" value="checked" name="checkbox" checked)
input(type="radio" value="checked" name="radio" checked)
input(type="submit", value="Submit")
When this form submits, the express handler will receive the form data, an example handler:
router.use(bodyParser().urlencoded({ extended: true }));
router.post('/form',(req,res) => {
//req.body: { checkbox: 'checked', radio: 'checked' }
res.render('anotherPage', {radio: req.body.radio, checkbox: req.body.checkbox});
})
Then in anotherPage.pug
form
input(type="checkbox" value="checked" name="checkbox" checked=checkbox)
input(type="radio" value="checked" name="radio" checked=radio)
input(type="submit", value="Submit")
This way, the data can be passed on to the anotherPage.pug while maintaining the fields from the original page. You can also do this with other input types, such as text, by simply taking their value and passing it to the pug renderer.
I am trying to check if a checkbox is ticked but when the checkbox is not ticked it wont work and gives the error: "TypeError: Cannot read property 'PrivateCheck' of undefined" and points to the line with this code:
let isprivare = req.body['PrivateCheck'];
This is the check box I am trying to get input from
<form class="fileupload" action="upload" method="post" enctype="multipart/form-data">
<input type="checkbox" id="PrivateCheck" name="PrivateCheck" />
</form>
Thank you.
According to the HTML documentation the value of a checkbox is sent with the form only if it is checked. Otherwise nothing is sent for that checkbox.
In your particular case you can fix it like this:
let isprivate = req.body && req.body['PrivateCheck'];
Basically I am trying to make a permalink from an event name. When I get the value from the event name using v-model it works but how do I put the converted permalink back in another input box in pug?
This works:
"P {{message}}",textarea(rows="2") {{message}}
but when i try the following:
input(value="{{message}}"),input(value={{message}}),input(value=#{{message}}),input(value=#{{message}}),input(value=#{message})
Pug does not render it & shows an indent error.
My question is how do I bind or reference data from Vue in input values ?
Pug template:
.col-md-12(style="padding:0px;")
.col-md-2.labelcont
label.labeltext Event Name :
.col-md-10
input(
type="text"
class="form-control"
placeholder="Event Name"
v-model="eventname"
)
.col-md-12(style="padding:0px;")
.col-md-2.labelcont
label.labeltext Permalink :
.col-md-10
textarea(
type="text"
class="form-control"
placeholder="Event Permalink"
) {{eventpermalink}}
Vue.js code:
var basicinfo = new Vue({
el: '#basic',
data: {
eventname: '',
eventpermalink: '',
}
})
basicinfo.$watch('eventname', function (newValue, oldValue) {
basicinfo.eventpermalink = basicinfo.eventname.replace(/[^a-zA-Z0-9 ]/g,'').replace(/ +/g,'-').toLowerCase();
})
You can use the v-bind directive. This way, you can bind any HTML element's attribute to a value whether it's calculated or a reference to your props or data.
In your case, it would be something like this:
input(type="text" class="form-control" placeholder="Event Name"
v-model="eventname" v-bind:value="YOUR-DATA-OR-WHATEVER")
Look the official documentation for further reading:
https://v2.vuejs.org/v2/guide/syntax.html
I have a submit button, with the following HTML:
<button type="submit" class="back-button" data-direction="back">Back</button>
The controller method is defined like this:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Index(SearchModel searchModel, string SearchBy, string dataDirection)
{
// Code removed for simplicity...
}
When I click the button, my Model is populated, but the dataDirection property is not populated.
What is the correct way to access those data attributes?
This is not a ASP .NET MVC issue.For submit buttons, browsers only send the value of the "value" attribute when the form is submitted. The button's name is used as the parameter name and the value is used as the parameter value.
If you want to send additional parameters with the form based on which button is clicked, you have to use Javascript to listen for the 'click' event of the button and add your custom parameters to the post data or set some hidden field values before submission.
Easiest way is to put a hidden field in your form with name "Direction", listen button click set its value to 'back' or 'next'. And if you have a default value for the direction or you want the last direction value to be set to the hidden field after a postback, you may put a "Direction" property on your model.
Below code shows how you do it with jQuery:
<input type="hidden" name="Direction" value="#Model.Direction" id="fldDirection" />
<script type="text/javascript">
$("[type='submit']").on('click', function() {
if ($(this).data('direction')) {
$("#fldDirection").val($(this).data('direction'));
}
}
</script>
I would like to have a nice interactive grid view in an HTML page. I am using nodejs, express, twitterbootstrap, knockoutjs, for my technology stack. I am trying to use KOGrid to display various data points with some nice built in column sorting and other grid functionality.
My issue is trying to fire an event when a button is clicked in a row. And pass to that event, some of the various data fields from that specific row. So in KOGrid specifics, I am using cellTemplates and I need to call some function in the onclick event, but pass that function some KOGRID data bounded values. So, in my input element I would have
data-bind="onclick: [Name of my function]( [name of some data bounded variable], [name of some other data bounded variable])
Can someone show me how to do this?
Here is a sample of my code...the input/onclick in the CBTemplate is where I am having issues.
CBTEMPLATE:
<script type="text/html" id="actionTemplate">
<div data-bind="kgCell: $cell">
<input type="checkbox" value="1" class="checkbox" checked="checked" data-bind="onclick: 'MyOnClickFunction( siteId(), status() )'"/>
</div>
</script>
DIV TAG:
<div data-bind="koGrid: { data: offer.siteCounts,
columnDefs: [ { field: 'templateField0', displayName: 'Site', cellTemplate: 'siteTemplate', width: 150},
{ field: 'status', displayName: 'Current Status', cellClass: 'site', cellTemplate: 'statusTemplate', width: 115},
{ field: 'details', displayName: 'Details', width: 175},
{ field: 'actionField0', displayName: 'Action', cellTemplate: 'cbTemplate', width: 200}],
autogenerateColumns: false,
displaySelectionCheckbox: false,
isMultiSelect: false }">
</div>
The click event binding should look like this with KO:
data-bind="click: function(data,event) { MyOnClickFunction(siteId(), status()) }"
Here is a working JSFiddle where you can play with it.
Some sidenotes:
In my sample I have used the $root binding context property to access the sample function: $root.offer.MyOnClickFunction. You will need to adjust this depending on which level you have defined the MyOnClickFunction on your viewmodels.
You need to return true from the click binding handler if you do want to let the default click action proceed (e.g checking the checkbox etc.)