How can I save the value from radio input as boolean? - ajax

I need to save the value selected from the input as a boolean to the database. In this way, the other button I use registers as 0 1 in the yield database. How can I save true as false. Note: it saves false no matter what you choose to the database. It has not changed before or after this procedure.
"showinrow": $(".message_sh:checked").val(),
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" class="message_sh" name="options1" value="True"> True
</label>
<label class="btn btn-primary">
<input type="radio" class="message_sh" name="options1" value="False" checked=""> False
</label>
</div>

As i say in the comment you can compare value with the string 'True';
$(".message_sh:checked").val() === 'True
Demonstration
$('.submit').on('click', function(){
const isTrue = $(".message_sh:checked").val() === 'True'
if(isTrue){
alert('This is true')
}else{
alert('This is false')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" class="message_sh" name="options1" value="True"> True
</label>
<label class="btn btn-primary">
<input type="radio" class="message_sh" name="options1" value="False" checked=""> False
</label>
<button class="submit">submit</button>
</div>

Related

I am using vform in vue.js to get data from a row for editing but this is the error i get. Cannot read property 'fill' of undefined

this is the variable that holds the form data
userForm: new Form({
last_name: '',
first_name: '',
other_name: '',
email: '',
dob: '',
gender: '',
phone_number: '',
}),
on click of the edit button, i use the row id to fetch the data from backend and am using vform method fill to fill the userForm variable with the response data
'click .edit': function (e, value, row){
axios
.get('/data/admin/'+row.id)
.then(response => {
this.loading = false;
//let data = response;
this.userForm.fill(response.data);
$('#adminEditModal').modal('show');
}).catch(error => {
this.loading = false;
this.error = error.response.data.message || error.message;
});
},
this is my form
<form #submit.prevent="UpdateUser" ref="userForm">
<div class="modal-body">
<div class="login-logo">
<img src="" width="100" height="auto" alt="user">
</div>
<div class="form-group">
<label>Last Name</label>
<input v-model="userForm.last_name" type="text" name="last_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('last_name') }">
<has-error :form="userForm" field="last_name"></has-error>
</div>
<div class="form-group">
<label>Firat Name</label>
<input v-model="userForm.first_name" type="text" name="first_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('first_name') }">
<has-error :form="userForm" field="first_name"></has-error>
</div>
<div class="form-group">
<label>Other Name</label>
<input v-model="userForm.other_name" type="text" name="other_name"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('other_name') }">
<has-error :form="userForm" field="other_name"></has-error>
</div>
<div class="form-group">
<label>Email</label>
<input v-model="userForm.email" type="email" name="email"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('email') }">
<has-error :form="userForm" field="email"></has-error>
</div>
<div class="form-group">
<label>Date Of Birth</label>
<input v-model="userForm.dob" type="date" name="dob"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('dob') }">
<has-error :form="userForm" field="dob"></has-error>
</div>
<div class="form-group">
<label>Gender</label>
<select v-model="userForm.gender" type="text" name="gender"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('gender') }" >
<option>Male</option>
<option>Female</option>
</select>
<has-error :form="userForm" field="gender"></has-error>
</div>
<div class="form-group">
<label>Phone Number</label>
<input v-model="userForm.phone_number" type="text" name="phone_number"
class="form-control" :class="{ 'is-invalid': userForm.errors.has('phone_number') }">
<has-error :form="userForm" field="phone_number"></has-error>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Update <i class="fas fa-upload"></i></button>
</div>
</form>

how to manage the conflict between the Ajax handler and the form's action on octobercms

I would like to put the data of a form into a session
The action of the form depends on the choice made in the buttons .bien especially in the onclick() function .
for that I made this code:
title = "formulaire_commun_1"
url = "/formulaire_commun_1"
layout = "sidebar_layout"
is_hidden = 0
==
<?php
function onStart()
{
$this['transaction'] = Session::get('transaction');
$this['bien'] = Session::get('type_bien');
}
function onTest()
{
Session::put('transaction', input('TYPE_transaction'));
Session::put('type_bien', input('radio_type_bien'));
}
function onRedirectMe()
{
return Redirect::to('http://google.com');
}
?>
==
<ul class="progressbar">
<li class="active">transaction</li>
<li>details</li>
<li>confirmation</li>
</ul>
<br><br><br><br>
<form method="POST" data-request="onTest" data-request-success="onRedirectMe" name="formu" accept-charset="UTF8" enctype="multipart/form-data">
<input type="hidden" name="_handler" value="onUpdate">
{{form_token()}}
{{form_sessionkey()}}
<div class="form-group">
<label for="TYPE_transaction" class="col-sm-3">type de transaction:</label>
<div class="col-sm-9">
<select class="form-control" id="TYPE_transaction" name="TYPE_transaction">
<option>vendre</option>
<option>louer</option>
</select>
</div>
<br><br><br>
<p>choisissez un type de bien:</p>
<br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(0)" >
<img src="{{ 'assets/img/icones/icone_maison.png'|theme }}">
</button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(1)"><img src="{{ 'assets/img/icones/icone_villa.jpg'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(2)"><img src="{{ 'assets/img/icones/icone_riad.jpg'|theme }}"></button>
</div>
<br><br><br><br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(3)"><img src="{{ 'assets/img/icones/icone_appartement.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default bien" onclick="type_bien(4)"><img src="{{ 'assets/img/icones/icone_ferme.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-defaul bien" onclick="type_bien(5)"><img src="{{ 'assets/img/icones/icone_magasin.jpg'|theme }}"></button>
</div>
<br><br><br><br>
<div style="display: none;">
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=0 value="maison" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=1 value="villa"></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=2 value="riad" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=3 value="appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=4 value="formulaire_appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=5 value="magasin" ></label>
</div>
</div>
<br><br><br><br><br><br
<div class=" col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Register</button>
</div></div>
</form>
<script type = "text/javascript">
$(function() {
var $buttonBien = $('.bien');
$buttonBien.on('click',function (event) {
event.preventDefault();
});
});
function type_bien(x){
switch( x) {
case 0:
document.getElementById(0).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 1:
document.getElementById(1).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 2:
document.getElementById(2).checked="true";
document.forms["formu"].action="formulaie_riad";
break;
case 3:
document.getElementById(3).checked="true";
document.forms["formu"].action="formulaire_appartement";
break;
case 4:
document.getElementById(4).checked="true";
break;
case 5:
document.getElementById(5).checked="true";
break;
default:
alert('local_commerce est selected');
}
}
</script>
_____________
but unfortunately there is a conflict between ajax and the form
if i put data-request = "onTest" action = "" for example
I have no redirection
so I need a way to redirect the form to another page after the submit:
please help me
thank you in advance

how and where to record data in a session on octobercms

I would like to record the data of a form in a session
I find in the documentation that I have to use: Session::put('key', 'value');
but I do not know where to place this piece of code.
knowing that my form is located in the form_commun_1.htm page.
this is all the page :
title = "formulaire_commun_1"
url = "/formulaire_commun_1"
layout = "sidebar_layout"
is_hidden = 0
==
<ul class="progressbar">
<li class="active">transaction</li>
<li>details</li>
<li>confirmation</li>
</ul>
<br><br><br><br>
<form method="POST" action="" name="formu" accept-charset="UTF8" enctype="multipart/form-data">
<input type="hidden" name="_handler" value="onUpdate">
{{form_token()}}
{{form_sessionkey()}}
<div class="form-group">
<label for="TYPE_transaction" class="col-sm-3">type de transaction:</label>
<div class="col-sm-9">
<select class="form-control" id="TYPE_transaction">
<option>vendre</option>
<option>louer</option>
</select>
</div>
<br><br><br>
<p>choisissez un type de bien:</p>
<br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(0)"><img src="{{ 'assets/img/icones/icone_maison.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(1)"><img src="{{ 'assets/img/icones/icone_villa.jpg'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(2)"><img src="{{ 'assets/img/icones/icone_riad.jpg'|theme }}"></button>
</div>
<br><br><br><br><br>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(3)"><img src="{{ 'assets/img/icones/icone_appartement.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(4)"><img src="{{ 'assets/img/icones/icone_ferme.png'|theme }}"></button>
</div>
<div class="col-sm-offset-2 col-sm-2">
<button class="btn btn-default" onclick="type_bien(5)"><img src="{{ 'assets/img/icones/icone_magasin.jpg'|theme }}"></button>
</div>
<br><br><br><br>
<div class="radio" style="display: none;" >
<label><input type="radio" name="radio_type_bien" id=0 value="maison" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=1 value="villa"></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=2 value="riad" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=3 value="appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=4 value="formulaire_appartement" ></label>
</div>
<div class="radio" >
<label><input type="radio" name="radio_type_bien" id=5 value="magasin" ></label>
</div>
<br><br><br><br><br><br
<div class=" col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default">Register</button>
</div></div>
</form>
<script type = "text/javascript">
function type_bien(x){
switch( x) {
case 0:
document.getElementById(0).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 1:
document.getElementById(1).checked="true";
document.forms["formu"].action="formulaire_villa";
break;
case 2:
document.getElementById(2).checked="true";
document.forms["formu"].action="formulaie_riad";
break;
case 3:
document.getElementById(3).checked="true";
document.forms["formu"].action="formulaire_appartement";
break;
case 4:
document.getElementById(4).checked="true";
break;
case 5:
document.getElementById(5).checked="true";
break;
default:
alert('local_commerce est selected');
}
}
</script>
do I have to go through creating a plugin or component ?
and where to put the session and how to use it?
please help?thank you
I would recommend creating a plugin and component, but this isn't 100% necessary in your case.
Here would be a basic self-contained page that would do what you are requesting:
title = "test"
url = "/test"
layout = "default"
is_hidden = 0
==
<?php
function onStart()
{
$this['example'] = Session::get('example-key');
}
function onTest()
{
Session::put('example-key', input('my-input'));
}
?>
==
<form data-request="onTest" data-request-success="location.reload();">
<input type="text" name="my-input">
<button type="submit">Submit</button>
</form>
{% if example %}
<strong>Example: {{ example }}</strong>
{% endif %}
I would recommend reading through the OctoberCMS documentation, it is excellent.

how to set and get checked or unchecked values in single checkbox using another form

i want to set value and retrieved value in the checkbox field when submitting a value from another form hidden filed.
<form action="store" method="post">
<div class="form-group">
<div class="row">
<label class="control-label col-lg-3"><b>Enable/Disable App</b>
</label>
<label class="Sg-switch">
<input type="checkbox" name="is_active" value="<?php $_POST['enable']; ?>"<?php if (isset($setting['is_active'])==1) { ?> checked="checked" <?php } ?>><span class="Sg-slider round"></span>
</label>
</div>
<div class="clearfix"></div>
<div class="form-group">
<button type="submit" class="sg-main-btn sg-primary-tn">Save</button>
My submit form is:-
<div class="modal-body">
<form class="form-horizontal" method="post" action="#" name="enable">
<div class="modal-footer" style="text-align:center;">
<input type="text" name="is_active" value="1" hidden>
<button type="submit" name="enable" class="sg-main-btn sg-success-btn dis_btn"><i class="fa fa-check"></i><i class="fa fa-spin fa-spinner" style="display: none;"></i>Yes</button>
<i class="fa fa-times"></i>No
</div>
</form>
you can use jquery.
Give your input id like id = "input".
<input type="text" name="is_active" value="1" hidden id = 'input'>
<input type="checkbox" id="input_new" name="is_active" value="<?php $_POST['enable']; ?>"<?php if (isset($setting['is_active'])==1) { ?> checked="checked" <?php } ?>>
<span class="Sg-slider round"></span>
<button id="button1">also add yourclass and type etc</button>
$('#button1').click( function() {
var active = $('#input').val();
if(active == 1){
$('#input_new').attr('checked');
}});

how to stop form submition on enter key?

I don't want to submit form.
When I press enter on textbox my form is submited and reloaded automatically.
How to stop submiting form?
My code is.
<form class="cart" id="cart-frm" style="margin-bottom: 10px; ">
<div class="row">
<div class="quantity col-md-6 col-sm-6 col-xs-6" style="width:auto;" >
<label style="float: left; margin-top: 10px" for="quantity">Quantity : </label>
<span> </span>
<input style="float: right;" type="text" class="input-text qty" id='qty' title="Qty" value="1" name="quantity" min="1" step="1">
</div>
<div class="quantity col-md-6 col-sm-6 col-xs-6 pull-right">
<button type="button" style="float: right;" id ='<?php echo $product['id']; ?>' class="btn btn-primary btn-icon add-to-cart-product"> Add to cart</button>
</div><br>
</div>
<span class="clearfix"></span>
</form>
<script type="text/javascript">
document.getElementById("cart-frm").onsubmit = function(){
// if needs to be submited - return true
// else - return false
return false;
};
</script>

Resources