I have a ejs template rendered with an array (called "operaciones") result of a sql request.
How can I implement that when the user select a register ("unidad de obra") the other inputs show the fields "unidad de medida" and "precio unitario"?
This is my code:
<div class="col-md-6">
<label for="via">Unidad de obra:</label>
<select class="form-control" id="operacion" name="operacion" value="<%= medicion.idope %>" id="medicion">
<% for(var i=0; i < operaciones.length; i++) { %>
<option value=<%= operaciones[i].gid %>><%= operaciones[i].codigo %>-<%= operaciones[i].descr %></option>
<% }%>
</select>
</div>
<div class="col-md-3">
<label>Unidad de medida:</label>
<input type="text" class="form-control" id="unidad" name="unidad" value="" disabled/>
</div>
<div class="col-md-3">
<label>Precio unitario (€):</label>
<input type="text" class="form-control" id="preciou" name="preciou" value="" disabled/>
</div>
You could output these values into the data attribute of the options. Then add some jquery to handle the select and update the values. (Ive replaces ejs with object literals to make it work in a Snippet):
//serverside
var operaciones = [
{gid:1,codigo:2,descr:2,unidad:3,preciou:4},
{gid:5,codigo:6,descr:2,unidad:7,preciou:8},
];
var c = `
<div class="col-md-6">
<label for="via">Unidad de obra:</label>
<select class="form-control" id="operacion" name="operacion">`;
for(var i=0; i < operaciones.length; i++) {
c+=`
<option
value="${ operaciones[i].gid}"
data-unidad="${ operaciones[i].unidad}"
data-preciou="${ operaciones[i].preciou}"
>
${operaciones[i].codigo}-${ operaciones[i].descr}
</option>`;
}
c += `
</select>
</div>
<div class="col-md-3">
<label>Unidad de medida:</label>
<input type="text" class="form-control" id="unidad" name="unidad" value="1" disabled/>
</div>
<div class="col-md-3">
<label>Precio unitario (€):</label>
<input type="text" class="form-control" id="preciou" name="preciou" value="2" disabled/>
</div>`;
document.body.innerHTML = c;
//userside
$(function(){
$("#operacion").on("change",function(){
var selected = $(this).children("option:selected");
$("#unidad").val(selected.data("unidad"));
$("#preciou").val(selected.data("preciou"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I'm trying to insert multiple row data in two DB tables using single click but this code insert only one row at a time. When i try dd($request->all()); i got data in array but insert only one row. What is the problem and how can i fix it?
protected $table = 'biniyojan';
////Modified Controller//////
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojan_details = new BiniyojanDetails();
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details->debit_credit = $request->debit_credit[$i];
//$biniyojan_details->debit_credit_type = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojan_details->save();
}
}
return redirect()->back()->with('status', 'Inserted');
}
/////View Blade////////
<form method="POST" action="{{ route('bbcreate') }}">
#csrf
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<input type="date" placeholder="मिति" value="#php echo $today; #endphp" name="date" class="form-control" id="inputCity" required>
</div>
<div class="form-group col-md-2">
<select id="inputState" placeholder="" name="ab" class="form-control" required>
<option>2079-080</option>
<option>2078-079</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="inputState" name="school" class="form-control" required>
<option selected disabled>स्रोत पाउने संस्था </option>
#foreach ($school_array as $sch)
<option value="{{ $sch -> name }}">{{ $sch -> name}}</option>
#endforeach
</select>
</div>
</div>
<div id="form-field">
<div class="form-row col-x1-3">
<div class="form-group col-md-2">
<select id="source" name="source[]" class="form-control" required>
<option selected disabled value="">स्रोत</option>
<option>केन्द्र</option>
<option>प्रदेश</option>
<option>स्थानीय</option>
<option>अन्य</option>
</select>
</div>
<div class="form-group col-md-2">
<select id="kriyakalap" name="kriyakalap[]" class="form-control" required>
<option selected disabled>क्रियाकलाप</option>
#foreach ($bini as $bi)
<option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option>
#endforeach
</select>
#foreach ($bini as $bi)
#endforeach
</div>
<div class="form-group col-md-2">
<select name="debit_credit[]" id="debit_credit" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट</option>
</select>
</div>
<div class="form-group col-md-2">
<select name="debit_credit_type[]" id="debit_credit_type" class="form-control" >
<option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option>
</select>
</div>
<div class="form-group col-md-2">
<input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required>
</div>
<div class="form-group col-md-2">
<input type="button" class="btn btn-success" name="add" id="add" value="+">
</div>
</div>
</div>
<div class="form-row col-x1-3" style="justify-content:left ;">
<div class="form-group col-md-2">
<input type="text" placeholder="ब्यहोरा" name="behora" class="form-control" id="behora" required>
</div>
<div class="form-group col-md-2">
<input type="submit" id="submit" name="submit" value="राख्नुहोस्" class="btn btn-primary ">
</div>
#if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
{{-- message --}}
{!! Toastr::message() !!}
</div>
#endif
</div>
<div form-row col-x1-3 id="showdata" class="showdata">
<p class="show_data"></p>
<p id="showdata" class="showdata"></p>
</div>
</form>
//////jQuery For Repeat form////////[enter image description here][1]
<!-- form repeat -->
<script type="text/javascript">
$(document).ready(function() {
var html = '<span><div id="form-field"> <div class="form-row col-x1-3"> <div class="form-group col-md-2"> <select id="source" name="source[]" class="form-control" required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div class="form-group col-md-2"> <select id="kriyakalap" name="kriyakalap[]" class="form-control" required> <option selected disabled>क्रियाकलाप</option> #foreach ($bini as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> #endforeach </select> #foreach ($bini as $bi) #endforeach </div> <div class="form-group col-md-2"> <select name="debit_credit[]" id="debit_credit" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट</option> </select> </div> <div class="form-group col-md-2"> <select name="debit_credit_type[]" id="debit_credit_type" class="form-control" required> <option selected="selected" disabled>डेबिट / क्रेडिट प्रकार</option> </select> </div> <div class="form-group col-md-2"> <input type="text" placeholder="रकम" name="cash[]" class="form-control" id="price" required> </div> <div class="form-group col-md-2"> <input type="button" class="btn btn-danger" name="remove" id="remove" value="-"> </div> </div> </div></span>';
var max = 5;
var x = 1;
$("#add").click(function() {
if (x <= max) {
$("#form-field").append(html);
x++;
}
})
$("#form-field").on('click', '#remove', function() {
$(this).closest('span').remove();
x--;
});
});
</script>
<!-- form repeat -->
As #aynber pointed at, you need to move the line $biniyojan_details = new BiniyojanDetails(); inside the loop so it initiate a new object for each iteration.
Another solution would be to insert all the entries in the same time(better performance). For that, we prepare the data to be inserted first
public function bbcreate(Request $request)
{
//dd($request->all());
$biniyojan_details = new BiniyojanDetails();
$biniyojan = new Biniyojan();
$biniyojan->details_id = $biniyojan_details->details_id;
$biniyojan->date = $request->date;
$biniyojan->ab = $request->ab;
$biniyojan->school = $request->school;
$biniyojan->behora = $request->behora;
$biniyojan->save();
$biniyojanDetailsToBeInserted = [];
if (!empty($request->school)) {
for ($i = 0; $i < count((array)$request->school); $i++) {
$biniyojan_details = [];
$biniyojan_details['biniyojan_id'] = $biniyojan->id;
$biniyojan_details['school'] = $request->school[$i];
$biniyojan_details['source'] = $request->source[$i];
$biniyojan_details['kriyakalap'] = $request->kriyakalap[$i];
//$biniyojan_details['debit_credit'] = $request->debit_credit[$i];
//$biniyojan_details['debit_credit_type'] = $request->debit_credit_type[$i];
$biniyojan_details['cash'] = $request->cash[$i];
$biniyojanDetailsToBeInserted[] = $biniyojan_details;
}
}
if ($biniyojanDetailsToBeInserted) {
BiniyojanDetails::insert($biniyojanDetailsToBeInserted);
}
return redirect()->back()->with('status', 'Inserted');
}
Your code create only one row but the noticeable thing is that it create one row but with last data of the array.
Because you are not making object inside the loop it is outside of the loop so the loop runs on the same object and update its properties each time loop runs and save it.
Make object inside the loop so it make new object each time which means it will create new row each time instead of updating the same row.
There is a better way for this if you have same names of your array keys as database table columns.
Biniyojan::insert($request->data);
It works like this.
User::insert([
['name' => 'John', 'email' => 'john#example.com'],
['name' => 'Marina', 'email' => 'marina#example.com'],
]);
I have code below.
When I click the button, the new value is named "name+1"
I want to enter these values into the sql database
Bad Sql query:
$sql = "INSERT INTO bb(numer, ID, numerczesci, iloscczesci, przyczyna,
numerfaktury, data, uwagi)
VALUES ('','','$numerczesci','$iloscczesci',
'$przyczyna', '$numerfaktury', '$data', '$uwagi' )";
I don't know how to declare variables and what sql query to write.
var i =0;
var k =0;
function duplicate() {
var original = document.getElementById('duplic');
var rows = original.parentNode.rows;
i++;
var clone = original.cloneNode(true); // "deep" clone
var InputType = clone.getElementsByTagName("input");
clone.id = "duplic" + (i); // there can only be one element with an ID
original.parentNode.insertBefore(clone, rows[i]);
k=k+1;
document.getElementById("numerczesci").setAttribute("name", "numerczesci" + k );
document.getElementById("iloscczesci").setAttribute("name", "iloscczesci" + k );
document.getElementById("przyczyna").setAttribute("name", "przyczyna" + k );
document.getElementById("numerfaktury").setAttribute("name", "numerfaktury" + k );
document.getElementById("data").setAttribute("name", "data" + k );
document.getElementById("uwagi").setAttribute("name", "uwagi" + k );
}
<table >
<tr id="duplic"> <td>
<div class="form-group required">
<label for="fldNazwa" class="control-label">numer części/symbol</label>
<input type="text" class="form-control" id="numerczesci" name="numerczesci" required>
</div>
<div class="form-group required">
<label for="fldNazwa" class="control-label">ilość części</label>
<input type="number" class="form-control" id="iloscczesci" name="iloscczesci" value="1" min="1" required>
<br>
<div class="form-group required">
<label for="fldNazwa" class="control-label">przyczyna zwrotu</label>
<select name="przyczyna" required id="przyczyna">
<option disabled selected value> -- wybierz opcję -- </option>
<option value="zlaczesc">część źle zamówiona </option>
<option value="bladdostawcy">błąd dostawcy przy wysyłce </option>
<option value="czescuszkodzona">część uszkodzona podczas transportu lub wadliwa</option>
</select>
</div>
<div class="form-group required">
<label for="fldNazwa" class="control-label">numer faktury</label>
<input type="text" class="form-control" id="numerfaktury" name="numerfaktury" required>
</div>
<div class="form-group ">
<label for="fldNazwa" class="control-label">data wystawienia faktury</label>
<input type="date" class="form-control" id="data" name="data">
</div>
</div>
<div class="form-group ">
<label for="fldNazwa" class="control-label">uwagi</label>
<textarea class="form-control" id="uwagi" name="uwagi"></textarea>
</div>
<br> <br>
</td>
<td>
</td>
</tr>
</table>
<button id="addmore" onclick="duplicate()">Dodaj Towar</button>
<br><br>
In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>
I currently have a dropdown field that onchange will input the value.
function CurrentStatusChanged() {
var currentS1 = document.getElementById("currentStatus1").value;
var currentS2 = document.getElementById("currentStatus2").value;
document.getElementById("currentStatusView1").innerHTML = "You selected: " + currentS1;
document.getElementById("currentStatusView2").innerHTML = "You selected: " + currentS2;
}
I have many fieldsets created and then correct fieldset needs to show dependent on the what selected in the dropdown box.
My question is:
What is the best approach? As I don't feel innerHTML then all of the code is good practise.
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
I am trying to add a field set like the one above to a container, however i have at least 12 that change dependent on the drop-down. kindisch answer doesn't allow mt use the complete field set but is on the right track i believe.
Use templates for that. For example:
var storage = [],
select = document.getElementById("selection"),
container = document.getElementById("container");
select.addEventListener("change", function() {
var _id = select.value,
_tpl = document.getElementById(_id);
save();
container.innerHTML = _tpl.innerHTML;
update();
}, false);
// Save current state
function save() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
storage[_fields[i].name] = _fields[i].value;
}
}
// Fill input fields of element
function update() {
var _fields = container.getElementsByClassName("form-control");
for (var i = 0; i < _fields.length; i++) {
if (_fields[i].name in storage) {
_fields[i].value = storage[_fields[i].name];
}
}
}
<select id="selection">
<option value="status-one">One</option>
<option value="status-two">Two</option>
<option value="status-three">Three</option>
</select>
<div id="container"></div>
<script type="text/html" id="status-one">
<fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
<div class="col-md-4">
<textarea class="form-control" id="partTime" name="partTime"></textarea>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
<div class="col-md-4">
<input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
<div class="col-md-4">
<input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
</script>
<script type="text/html" id="status-two">
<p>This is status two.</p>
</script>
<script type="text/html" id="status-three">
<p>This is status three.</p>
</script>
could you use html5 data attributes? https://jsfiddle.net/hj6bbgbd/
<select id="mySelect" onchange="myFunction()">
<option value="1" data-text = "text for choice one">One</option>
<option value="2" data-text = "text for choice two">Two</option>
<option value="3" data-text = "text for choice three">Three</option>
</select>
<fieldset>
<fieldset>
<legend>My Legend:</legend>
<p id="demo"> text for choice one </p>
</fieldset>
<script>
function myFunction() {
var sel = document.getElementById('mySelect');
var opt = sel.options[sel.selectedIndex];
document.getElementById("demo").innerHTML = opt.dataset.text;
}
</script>
<form name="myform" action="#" method="post">
<div class="col-md-4">
<div class="col-md-4 desc">Naziv marke: </div>
<div class="col-md-8">
<select class="form-control" id="brandovi">
<option value="AllBrands" selected>Sve marke</option>
<option value="Dunlop">Dunlop</option>
<option value="Fulda">Fulda</option>
<option value="Goodyear">Goodyear</option>
<option value="Sava">Sava</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<input type="radio" autocomplete="off" name="season" value="Summer"> <img width="20" src="img/ikone/summer.png" />
<input type="radio" autocomplete="off" name="season" value="AllSeason"> <img width="20" src="img/ikone/allSeason.png" />
<input type="radio" autocomplete="off" name="season" value="Winter"> <img width="20" src="img/ikone/winter.png" />
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 desc">Tip vozila:</div>
<div class="col-md-8">
<select class="form-control">
<option value="AllTypes"> Sve vrste </option>
<option value="fourxfour"> 4x4</option>
</select>
</div>
</div>
<div class="col-md-2 text-right">
<input type="submit" name="submit" value="Traži"/>
</div>
</form>
I have this in HTML, so I need javascript code that will output custom URL depending on selected values
Url example
http://link.com/?brandovi=sava&sezona=zima&vrstaVozila=4x4
I tried several JS codes but I could not make it.
Please help.
I solved the problem :D
Here is the solution
<script type="text/javascript">
function submitUrl(form){
var brandovi = document.getElementById("brandovi");
var brand = brandovi.options[brandovi.selectedIndex].value;
var vrsteVozila = document.getElementById("vrsteVozila");
var vrsta = vrsteVozila.options[vrsteVozila.selectedIndex].value;
var radios = document.getElementsByName('season');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
var sezona = radios[i].value;
}
else{
var sezona = '';
}
}
window.location = 'http://localhost/wordpress/' + '?brandovi=' + brand + '&sezona=' + sezona + '&vrstaVozila=' + vrsta;
}