I'm making a form that have a group selected dropdown that consist of string stored from database (i did a #foreach loop through database via eloquent model to assign the dropdown value lists), on the below of the dropdown i have 3 disable inputs that are the column from database that have a correlation with the value of dropdown. I want that placeholder of disable input automatically change the value to be same as the record with the dropdown value's record from database once i select a value from dropdown. What should i do? What JS script should i use for?
blade.php
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="selectError2">Plat Nomor</label>
<div class="controls">
<select data-placeholder="Pilih Nomor Polisi" id="selectError2" data-rel="chosen">
<option value=""></option>
#foreach ($park as $p)
<option value="{{$p->id}}">{{$p->nopol}}</option>
#endforeach
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Jenis Kendaraan</label>
<div class="controls">
<input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->jenis}}" disabled="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Kategori Kendaraan</label>
<div class="controls">
<input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->kategori}}" disabled="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="disabledInput">Waktu Masuk</label>
<div class="controls">
<input class="input-large disabled" id="disabledInput" type="text" placeholder="{{$p->created_at}}" disabled="">
</div>
</div>
You refer my sample code:
http://jsfiddle.net/18pa7m0q/11/
function change(select)
{
var value=select.options[select.selectedIndex].value;
$(".input-large").attr("placeholder",value);
}
Huh finally i got the answer from one of my friend.
First, add attribute id="your_id" on every input that corresponds with dropdown's record.
After that, add this line of <script>
`
// Transform PHP variable into json, so it can be cached into js variable
// Adjust the param with #json($your_table_name)
const park = #json($park);
function change(select) {
// Get the id (which is in the value) of the selected option
let id = select.options[select.selectedIndex].value
// Find the data in the cached json
let parkData = park.find(function (p) {
// Find it by id
return p.id == id
})
// For each fields to be shown in the page...
// Each member of array are the same id from the <input> tag
// In this case i want three columns to be shown in the page..
for (let field of ["jenis", "kategori", "created_at"]) {
// Put the data to the corresponding element
document.getElementById(field).value = parkData[field]
}
}
`
Voila! It changed the value of disabled input each time i select the value of dropdown.
It does only need the Plain JS with no jQuery or any other JS framework. So simple :D
Related
Creating a resume builder website in which there could be multiple or no values for fields like skills, education..etc. I have made a '+' sign which increments the name of the div tag by 1 (using javascript). so on pressing the '+' sign, the name becomes 'skills1'. There could be variable quantity for these. How to add all these skills (skill1,skill2,skill3......) into the same field in sql table (skill)
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute1" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute2" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute3" class="form-control">
</div>
The problem is that we dont know how many institutes are going to be added. What PHP code should be used here?
Tried to concatenate but to concatenate, the value should be there in the sql server.
you can use a loop to iterate through the form fields and concatenate the values to a single variable before inserting it into the database.
try this:
// Assuming the form field names are 'institute1', 'institute2', 'institute3', etc.
// You can use an array in the HTML name attribute like this: name="institute[]"
$institutes = '';
// Loop through the $_POST array to concatenate all the institute values
foreach ($_POST['institute'] as $value) {
$institutes .= $value . ', '; // Concatenate values with a separator
}
// Remove the trailing separator
$institutes = rtrim($institutes, ', ');
// Insert the concatenated value into the 'skill' field in the SQL table
$sql = "INSERT INTO table_name (skill) VALUES ('$institutes')";
// Execute the SQL query
In the HTML form, you can use an array in the name attribute for the institute fields, like this:
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute[]" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute[]" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute[]" class="form-control">
</div>
I want to create a form with HTML with different types of inputs (such as name, surname, dates, and radio-button options), and when I want to print the object with the data inputted in the form on the console, the value from the radio-buttons is not stored correctly.
First of all, this is my first project on this area and also my first posted question on stackoverflow, so I would appreciate some suggestions on how to pose the question better if I'm forgetting some crucial data.
I have been following help from different resources (mostly youtube videos such as: https://www.youtube.com/watch?v=GrycH6F-ksY ) to create this form and submit the data with AJAX, and the code of my javascript application comes mainly from that video.
All the data is stored correctly and I can see it in the console, except from the data comming from the radio-buttons. No matter what option is selected (either "male" or "female"), the console always shows the value of the last button, which in this case is "female". I suppose I am doing something wrong when defining these buttons, and why they are not being "selected" (I suppose that's what is happening since the data shown is always the last default value) but I haven't been able to find out where I am doing something wrong.
I'm including the part of the code that I think might be relevant
<form action="ajax/contact.php" method="post" class="ajax">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="inputName" required>
</div>
<div class="form-group col-md-6">
<label>Surname</label>
<input type="text" class="form-control" name="inputSurname" required>
</div>
</div>
<div class="form-group">
<label>Date of birth</label>
<input type="date" class="form-control" name="inputDate">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="inputEmail" required>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Gender</label>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="male">Male</div>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="female">Female</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of children</label>
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control" name="inputNumber">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Javascript function
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
method = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data);
return false;
});
PHP file
<?php
if (isset($_POST['inputName'],$_POST['inputSurname'],$_POST['inputDate'],$_POST['inputEmail'],$_POST['inputGender'],$_POST['inputNumber'])) {
print_r($_POST);
}
In the console I'm getting this:
${inputName: "myName", inputSurname: "mySurname", inputDate: "2019-12-13",
$inputEmail: "myMail#gmail.com", inputGender: "female", …}
$inputDate: "2019-12-13"
$inputEmail: "myMail#gmail.com"
$inputGender: "female"
$inputName: "myName"
$inputNumber: "1"
$inputSurname: "mySurname"
$_proto_: Object
but I thought it would be showing:
$...
$inputGender: "male"
$...
when the male option is selected.
Thank you very much
The problem is in your JS. You're looping through everything with a name attribute, in order, and adding its value to your submit data. In the case of radio buttons, you have to check if they're selected and only add if so, otherwise, the last one always wins, as you're seeing.
And since you appear to be using jQuery, you can probably just let its serialize helper do this work for you.
I'm fetching products from database, they are populating my dropdown.
I have ability to choose a product from dropdown, that product contains unit of measure (liter, kilo, oz etc). So basically when I choose a product from a dropdown I would like to display unit of measure in control below dropdown, like in example above.
Here is my html:
<div class="form-horizontal" action="">
<div class="form-group">
<label class="control-label dash-control-label col-sm-3">Title:</label>
<div class="col-sm-6">
<select class="form-control dash-form-control select2" style="width: 100%;">
<option selected disabled>Search...</option>
<option *ngFor="let ingredient of ingredients;" [value]="ingredient.id">{{ingredient.title}}</option>
</select>
</div>
<div class="col-sm-3">
<button type="button"
class="btn main-content-button mini-add-button"
data-toggle="modal"
data-target="#modal-3">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<!--Unit of measure-->
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="user-lastname">Unit of measure:</label>
<div class="col-sm-4">
<input type="text" class="form-control dash-form-control read-only" placeholder="" value="Liter (L)" readonly>
</div>
</div>
<!--Quantity-->
<div class="form-group">
<label class="control-label dash-control-label col-sm-3" for="user-password">Quantity:</label>
<div class="col-sm-4">
<input type="text" class="form-control dash-form-control" id="user-password" placeholder="">
</div>
</div>
</div><!--End of form horizontal-->
So basically in my input which holds Unit of measure I would like to get unit of measure of selected product and display it there, it's just read only field :)
And here is my typescript code where I'm getting product from DB:
export class ProductIngredientNewComponent implements OnInit {
#Input() ProductId: string;
// Array that will holds all Products which represent ingredients
ingredients: Product[];
id: string;
constructor(public _productsService: ProductService) {
}
ngOnInit() {
// Here I'm getting values from DB and this values are source to dropdown
this._productsService.getAll().subscribe(ing => this.ingredients = ing);
}
}
Do I need to attach event when value in dropdown is selected, to manually set value to some property in typescript and display it in unit of measure, of there is some another more nice and more angular way?
Thanks guys
Cheers
Can you try using the following code and check if your problem is solved. I had the same situation just I had radio buttons in my case. Idea is save your object in value of Option. and assign a model to it which will contain the selected value from select box and bind the same ngmodel to your input.
Hoping it to work for you!
<div class="col-sm-6">
<select class="form-control dash-form-control select2" style="width: 100%;" [(ngModel)]="ingredient.title">
<option selected disabled>Search...</option>
<option *ngFor="let ingredient of ingredients;" [value]="ingredient">{{ingredient.title}}</option>
</select>
</div>
<input type="text" class="form-control dash-form-control read-only" placeholder="" value="Liter (L)" readonly [(ngModel)]="ingredient.title">
With Angular you have the possibility to use the two-way data binding for the selected dropdown item. First declare a property which holds the selected item in the component:
export class ProductIngredientNewComponent implements OnInit {
selectedIngredient: Product;
/* */
}
Then add the ngModel directive to your dropdown and also change the value to be the ingredient itself, instead of ingredient.id:
<select [(ngModel)]="selectedIngredient">
<option selected disabled>Search...</option>
<option *ngFor="let ingredient of ingredients;" [value]="ingredient">
{{ingredient.title}}
</option>
</select>
Then you can easily display the unit in the input field. I also added a check to avoid errors, when the selectedIngredient is not set.
<input type="text" placeholder="Unit" [value]="selectedIngredient && selectedIngredient.unitOfMeasure" readonly>
I have a form that allows a user to create custom questions.
The user needs to insert the title for the question and then choose the type of the question.
If the type of question is radio button, checkbox or a select menu it should appear a div "availableOptions" that shows by default two input texts so the user can insert some option values.
Doubt:
When this "availableOptions" div appears there is also a button "add new option" that when is clicked it should appear another input text so the user can insert a new option value. Each option should also have always a remove button associated that when is clicked the user can remove that input text, but it should be always a minimum of one input text.
Do you know how to do this properly? I have the working example below but it's working neither the append nor the remove.
Example: https://jsfiddle.net/udx6pp8u/15/
HTML:
<form id="" method="post" class="clearfix" action="">
<div class="form-group">
<label for="inputName">Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Type of Field</label>
<select class="form-control" id="customQuestionType">
<option>Text</option>
<option>Long text</option>
<option id="optionQuestion">Checkboxes</option>
<option id="optionQuestion">Radiobuttons</option>
<option id="optionQuestion">Select Menu </option>
</select>
</div>
<div class="form-group" id="availableOptions">
<label for="inputName">Available Options </label>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
</div>
</div>
<input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>
</form>
CSS:
#availableOptions{display:none;}
jQuery:
var selected_option = $('#customQuestionType option:selected').attr('id');
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
if ($('#addNewOption').click(function() {
$('#availableOptions')
.append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
}));
if ($('#removeOption').click(function() {
$('#availableOptions') // how to remove the clicked otpion?
}));
}
Try this:
Note: Don't use id. Use class instead. One document should only have one unique id. Using multiple id="removeOption" will coz your script to behave incorrectly and also choose the first found and ignore the rest having the same id
$('#customQuestionType').change(function(){
var selected_option = $('option:selected', this).val();
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
$('#addNewOption').click(function() {
$('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
});
}
});
$(document).on('click', '.removeOption', function(e) {
e.preventDefault();
$(this).closest('.option').remove();
})
DEMO:
https://jsfiddle.net/dL7opvak/21/
EDITED
Is there a way to check which like option is selected for which text box when submitted.
As shown below user may select like only for some text values. The html tags are dynamically generated based on the object parameters
for(int i = 0 ; i < object ; i++)
{
if(obj.textbox)
<input type="tex" id="obj.id"/> <input type="checkbox" id="obj.id"+"#"/>
else
<select> ... </select>
}
Right now what I do is assign a text "#" as shown above to the check box and after the form is submitted iterate all the checkbox items and get the selected value and split it and get the text value and append both value and like if selected, with | symbol and send the request.
Is there a better way to get the entered text values and check if the like option is selected for that.
This is my View Code.
<div ng-repeat="filter in filters">
<div class="content-pad">
<fieldset>
<label for="textinputID1"><p class="lead">
{{filter.dsply_name}} :
</p>
</label>
<div class="field-group" nowrap>
<input ng-if="!filter.listFlag" type="text" id='filter.atrbt_name' class="span3">
<button type="button" class="reset-field hide-text">Reset field</button>
<label class="checkbox" ng-if="!filter.listFlag">
<input id='filter.atrbt_name' type="checkbox">
<i class="skin"></i> <span>Like</span>
</label>
</div>
<div class="form-row">
<div class="row-fluid-nowrap">
<div class="span12">
<select ng-if="filter.listFlag" class="mod-select span12" ng-model="filterSelectOption" ng-options="value.displayValue as value.displayValue for value in filter.listValues">
<option value="" selected="selected">Select an Option</option>
</select>
</div>
</div>
</div>
</fieldset>
</div>
Bind the click event to submit button, in js callback function, get values & do check.