I wanted to fix my html/bootstrap style,but at the moment when I clicked the event all my imputs are out of range as picture number 1 at the moment when I get some input wrong . however I want to fix my inputs and when I click my event and get error from jquery stay on the same place as the picture 2
html
<form id="new_product">
<div class="form-group">
<label for="description">Name: </label>
<input type="text" class="form-control" id="description" name="description" title="product description" required>
</div>
<div class="form-group form-inline">
<div class="form-group">
<div class="col-md-5">
<label for="cost_price">Cost Price: </label>
<input type="text" class="form-control" id="cost_price" name="cost_price" title="cost_price" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="selling_price">Selling price: </label>
<input type="text" class="form-control" id="selling_price" name="selling_price" title="selling_price" required>
</div>
</div>
</div>
<div class="form-group form-inline">
<div class="form-group">
<div class="col-md-5">
<label for="wprice">Wholeprice: </label>
<input type="text" class="form-control" id="wprice" name="wprice" title="wprice" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="min_stock">Min stock: </label>
<input type="text" class="form-control" id="min_stock" name="min_stock" title="min_stock" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="stock">Stock: </label>
<input type="text" class="form-control" id="stock" name="stock" title="stock" required>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<label for="max_stock">Max stock: </label>
<input type="text" class="form-control" id="max_stock" name="max_stock" title="max_stock" required>
</div>
</div>
</div>
</form>
form_view
form_view2
jquery validation
$('#add').on('click',function(){
$("#description").mask("(999) 999-9999");
$("#new_product").validate();
BootstrapDialog.show({
type: BootstrapDialog.TYPE_PRIMARY,
message: function(dialog) {
var $message = $('<div></div>');
var pageToLoad = dialog.getData('pageToLoad');
$message.load(pageToLoad);
return $message;
},
data: {
'pageToLoad': URL_GET_VIEW_PRODUCT
},
closable: false,
buttons:[{
id: 'btn-ok',
cssClass: 'btn-primary',
icon: 'glyphicon glyphicon-send',
label: ' Save',
action: function (e) {
var description = $('#description').val();
var cost_price = $('#cost_price').val();
var selling_price = $('#selling_price').val();
var wprice = $('#wprice').val();
var min_stock = $('#min_stock').val();
var stock = $('#stock').val();
var max_stock = $('#max_stock').val();
if($("#new_product").valid()){
$.ajax({
url: URL_GET_ADD_PRODUCT,
type: 'POST',
data: {description: description, cost_price: cost_price, selling_price: selling_price, wprice: wprice, min_stock: min_stock, stock: stock, max_stock: max_stock}
}).done(function (data) {
console.log(data);
if (data.msg == 'successfully added') {
$('#new_product')[0].reset();
table.ajax.reload();
}else if(data.min_stock == 'el stock no puede ser mayor al min'){
BootstrapDialog.show({
type: BootstrapDialog.TYPE_WARNING,
message: 'el stock no puede ser mayor al min'
});
}
});
return false;
}
}
},{
id: 'btn-cancel',
cssClass: 'btn-danger',
icon: 'glyphicon glyphicon-remove',
label: ' Cancel',
action: function (e) {
e.close();
}
}]
});
});
Related
I'm new to react and I need to display a value on an input (disabled) when this value is selected from an event (handleChange). when "article" is selected, I want to display "ctd_article_code" on the next input (disabled).
Here's my state :
state = {
articles:[
{id:0, ctd_article_code:"", ctd_article_libelle: "",
ctd_titre:{
id: '',
ctd_titre_code: "",
ctd_titre_libelle: ""
},
ctd_chapitre:{
id: '',
ctd_chapitre_libelle: "",
ctd_chapitre_code: "",
ctd_titre: {
id: 1,
ctd_titre_code: "",
ctd_titre_libelle: ""
}
}
}
],
ctd_paragraphe_code: '',
ctd_paragraphe_libelle: '',
}
Here's my handleChange :
handleChangearticles = (event) => {
this.setState({
paragraphe_article: event.target.value,
});
}
here's my render :
<div class="form-group row">
<label for="exampleInputUsername2" class="col-sm-3 col-form-label">Article </label>
<div class="col-sm-9">
<select class="col-sm-5" onChange={this.handleChangearticles} className="form-control" required>
<option value="">Sélectionner une valeur</option>
{this.state.articles.map((ctd_article) =>{return <option value={ctd_article.id} > {ctd_article.ctd_article_code}-{ctd_article.ctd_article_libelle}</option>
})}
</select>
</div>
</div>
<div class="form-group row">
<label for="exampleInputUsername2" class="col-sm-3 col-form-label">Code </label>
<div class="col-sm-3">
<input type="number" disabled class="form-control" id="exampleInputUsername2"/>
</div>
<div class="col-sm-6">
<input type="number" min="100" max="999" onChange={this.handleCompte_code} class="form-control" id="exampleInputUsername2" placeholder="" required />
</div>
</div>
I tried setting the defautValue as :
defaultValue={this.state.articles.ctd_article_code}
yet, i had no clue. I really want to learn this trick. Please help!!!
I have this form:
<form id="formUpload" action="/php/upload.php" name="formUpload" method="post" enctype="multipart/form-data">
<div class="row mb-3">
<label for="target" class="col-sm-3 col-md-2 col-form-label">Type</label>
<div class="col-sm-4">
<select class="form-select" name="target" aria-label="Target" required>
<option value="config" selected>Configuration</option>
<option value="app">Application</option>
<option value="media">Content</option>
<option value="sys">System</option>
</select>
</div>
<div class="col-auto">
<div class="col-form-label form-check">
<input class="form-check-input" type="checkbox" name="incremental" value="true" checked >
<label class="form-check-label" for="incremental">Incremental</label>
</div>
</div>
</div>
<div class="row mb-3">
<label for="id-type" class="col-sm-3 col-md-2 col-form-label">Target ID</label>
<div class="col-sm-4">
<select class="form-select" name="id-type" aria-label="Mode">
<option value="broadcast" selected>Broadcast</option>
<option value="target">Target</option>
</select>
</div>
<div class="col-sm-4 col-lg-3">
<input type="text" class="form-control" name="id" disabled required>
</div>
</div>
<div class="row mb-3">
<label for="id" class="col-sm-3 col-md-2 col-form-label">Revision</label>
<div class="col-sm-4 col-md-3 col-lg-2">
<input type="number" class="form-control" name="revision" min="1" max="999" value="1" required>
</div>
</div>
<div class="row mb-3">
<label for="upload_file" class="col-sm-3 col-md-2 col-form-label">Package</label>
<div class="col-sm-9 col-md-10">
<input type="file" class="form-control" name="file" accept=".zip" required>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Upload"/>
</form>
and this JavaScript:
function uploadFile() {
const action = $("#formUpload").attr("action");
const bar = $("#progressUpload");
const dialog = $("#modalUpload");
const alertOk = $("#alertUploadOk");
const btnClose = $("#btnClose");
const btnAbort = $("#btnAbort");
dialog.modal("show");
btnClose.prop("disabled", true);
btnAbort.prop("disabled", false);
const formData = new FormData($("#formUpload")[0]);
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
$.ajax({
xhr: function() {
window.xhr = xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
console.log("progress");
const percentComplete = Math.floor(e.loaded / e.total) * 100;
const percentVal = percentComplete + '%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
}
}, false);
xhr.addEventListener('abort', function(e){
btnClose.prop("disabled", false);
btnAbort.prop("disabled", true);
}, false);
return xhr;
},
type: 'POST',
url: action,
data: formData,
contentType: false,
processData: false,
cache: false,
beforeSend: function() {
let percentVal = '0%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
},
success: function(data, status, xhr) {
let percentVal = '100%';
bar.width(percentVal)
bar.html(percentVal).attr('aria-valuenow', percentVal);
alertOk.show();
},
complete: function(xhr) {
if (xhr.status !== 200) {
alert(xhr.status + xhr.responseText);
dialog.modal("hide");
} else {
btnClose.prop("disabled", false);
btnAbort.prop("disabled", true);
reloadTable();
}
}
});
}
I get an error "400 Bad Request".
But if I remove this line:
<input class="form-check-input" type="checkbox" name="incremental" value="true" checked />
I can submit my form successfully.
What's wrong in my code?
Here the content of the formData:
target config
incremental true
id-type broadcast
revision 1
file File { name: "generic_config_0001.zip", lastModified: 1651224479000, webkitRelativePath: "", size: 755, type: "application/zip" }
I am taking a Vue.js course and I just learned about forms and managing them(the code is down below). I don't understand how does the tag work. It's value is determined by the option value and the selected text is the text of that specific option? Also, I am confused when it comes to checkboxes and Vue. Why do the checkboxes need different "value"s when you use v-model on that checkbox? Why would I want to create a checkbox group (inputs with the same value for the name attribute)? I don't really understand how v-model works with forms and I would love to. Thanks in advance for the person that's taking time to help me.
The Code
<template>
<form #submit.prevent="submitForm">
<div class="form-control">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model="userName" />
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" v-model.number="userAge" />
</div>
<div class="form-control">
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer" v-model="referrer">
<option value="google">Google</option>
<option value="wom">Word of mouth</option>
<option value="newspaper">Newspaper</option>
</select>
{{ referrer }}
</div>
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
<input id="interest-news" name="interest" value="news" type="checkbox" v-model="interests"/>
<label for="interest-news">News</label>
</div>
<div>
<input id="interest-tutorials" name="interest" value="tutorials" type="checkbox" v-model="interests"/>
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
<input id="interest-nothing" name="interest" value="nothing" type="checkbox" v-model="interests"/>
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
<input id="how-video" name="how" value="video" type="radio" v-model="how"/>
<label for="how-video">Video Courses</label>
</div>
<div>
<input id="how-blogs" name="how" value="blogs" type="radio" v-model="how"/>
<label for="how-blogs">Blogs</label>
</div>
<div>
<input id="how-other" name="how" value="other" type="radio" v-model="how"/>
<label for="how-other">Other</label>
</div>
</div>
<div class="form-control">
<input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
<label for="confirm-terms">Agree to terms of use?</label>
</div>
<div>
<button>Save Data</button>
</div>
<div class="form-control">
<select></select>
</div>
</form>
</template>
<script>
export default {
data() {
return {
userName: "",
userAge: null,
referrer: "newspaper",
interests: [],
how: null,
confirm: false
};
},
methods: {
submitForm() {
// console.log("Username: " + this.userName);
// this.userName = "";
// console.log("User age: ");
// console.log(this.userAge);
// console.log(31);
// this.userAge = null;
// console.log("Referrer: " + this.referrer);
// this.referrer = "wom";
// console.log("Checkboxes: ");
// console.log(this.interests);
console.log("Radio Buttons");
console.log(this.how);
this.interests = [];
this.how = null;
// console.log('Confirm? ');
// console.log(this.confirm);
// this.confirm = false;
},
},
};
</script>
v-model is syntactical sugar for :value and #change
Instead of <input v-model="name">, you could use
<input :value="name" #update:model-value="v => name=v"> which would have the same result.
Here is an example that perhaps belabors it a bit.
const app = Vue.createApp({
data() {
return {
name: ""
}
}
})
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)"
>
`
})
app.mount("#app")
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<custom-input :value="name" #update:model-value="v => name=v"></custom-input><br />
<custom-input v-model="name"></custom-input><br />
<input :value="name" #update:model-value="v => name=v"><br />
<input v-model="name"><br />
Name: {{name}}
</div>
More info in v3 docs here
This section contains HTML side to show how I am iterating over an array of object
<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}"
disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [(ngModel)]="modules[i].action.read" name="access" [value]="modules[i].action.read">
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [(ngModel)]="modules[i].action.write" name="access" [value]="modules[i].action.write">
</div>
<div class="col-md-2">
<input type="checkbox" class="form-control" [(ngModel)]="modules[i].flag">
</div>
</div>
Here is the object for refrence i am using some array of objects
modules = [{
company_id: '0',
role_id: 'xyz',
module_name: 'xyz',
action: {
write: false,
read: false
},
flag:false
},{
company_id: '0',
role_id: 'xyz',
module_name: 'xyt',
action: {
write: false,
read: false
},
flag:false
}];
Use Unique name for checkboxes:
Refer: https://stackblitz.com/edit/angular-cymeqg?file=src%2Fapp%2Fapp.component.html
<div class="row" *ngFor="let item of modules; let i = index;">
<div class="col-md-1 align-center">{{i+1}}</div>
<div class="col-md-5">
<input type="text" class="form-control" [(ngModel)]="modules[i].module_name" value="{{modules[i].module_name}}" disabled>
</div>
<div class="col-md-2">
<input type="radio" class="form-control" [checked]="modules[i].action.read" (change)="modules[i].action.read" name="access_{{modules[i].company_id}}">
</div>
<div class="col-md-2">
<input type="radio" [checked]="modules[i].action.write" (change)="modules[i].action.write" class="form-control" name="access_{{modules[i].company_id}}">
</div>
<div class="col-md-2">
<input type="checkbox" class="form-control" [(ngModel)]="modules[i].flag">
</div>
</div>
modules = [{
company_id: '0',
role_id: 'xyz',
module_name: 'xyz',
action: {
write: false,
read: false
},
flag:false
},{
company_id: '1',
role_id: 'xyz',
module_name: 'xyt',
action: {
write: false,
read: false
},
flag:false
}];
I can record data in my db but ajax loading doesn't inter in success method. What's the problem?
error: "SyntaxError: Unexpected end of JSON input
at Object.parse (native)
at n.parseJSON "
record_data.php
<?php
$type=getPar_empty("type",$_GET,"");
$new_nome=$_GET['new_nome'];
$new_cognome=$_GET['new_cognome'];
$new_email=$_GET['new_email'];
$new_lingua=$_GET['new_lingua'];
if ($type=="add_user"){
$stmt=null;
$stmt=$db->prepare("INSERT INTO newsletter_utenti(email,abilitato,nome,cognome,lingua,lista,data_creazione,unsubscribe) VALUES('$new_email',1,'$new_nome','$new_cognome','$new_lingua','manual',now(),0)");
if (!$stmt) {
log_msg($db->error);
die();
}
$stmt->execute();
$stmt->close();
$db->close();
}
?>
script
$("#salvaBtn").click(function(){
var nome = $('#nome').val();
var cognome = $('#cognome').val();
var email = $('#email').val();
var lingua = $('#lingua').val();
var dataString = 'nome='+nome+'&cognome='+cognome+'&email='+email+'&lingua='+lingua+'&type=add_user';
$.ajax({
type:'GET',
data:dataString,
url:"record_data.php",
success:function(result) {
$("#status_text").html(result);
$('#nome').val('');
$('#cognome').val('');
$('#email').val('');
},
error:function(xhr,status,error) {
console.log(error);
}
});
});
$('#adduser').submit(function (){
return false;
});
form
<form name="adduser" id="adduser" method="GET" action="#">
<div class="col-md-3">
<div class="form-group m-b-30">
<p>E-mail</p>
<input class="form-control" type="email" id="email" name="email" placeholder="indirizzo e-mail" email required>
</div>
</div>
<div class="col-md-3">
<div class="form-group m-b-30">
<p>Nome</p>
<input class="form-control" type="text" id="nome" name="nome" placeholder="nome">
</div>
</div>
<div class="col-md-3">
<div class="form-group m-b-30">
<p>Cognome</p>
<input class="form-control" type="text" id="cognome" name="cognome" placeholder="cognome">
</div>
</div>
<div class="col-md-3">
<div class="form-group m-b-30">
<p>Lingua</p>
<select class="form-control" id="lingua" name="lingua">
<option value="it">IT</option>
<option value="en">EN</option>
</select>
</div>
<input type="submit" class="btn btn-embossed btn-primary m-r-20" id="salvaBtn" value="Aggiungi utente"></input>
<div id="status_text" /></div>
</div>
</form>
Your ajax method is POST, but you try to recive values from GET, could be this.
Another way is to use json_decode, from PHP.
$vars = json_decode($_POST['data']);
tell us, these changes will clear your code input.
thanks