I have a form whose results(a list of links) are displayed in a table right below the form. However, I want to add a functionality that if the checkbox is checked, then all the links in the results should be opened on different tabs. Given below is my code:
<div class="card" id="emulstatform">
<div class="card-header">
<div class="card-title">
<div style="font-size: 25px"Filter</div>
</div>
</div>
<br>
<div class="card-body">
<div class="row">
<div class="col-xs-6">
<label name="start_date" class="control-label" style="width:35%;padding-left:15px">Start date</label>
<input type="date" id="start_date" style="color:black;width:100px" ></input>
</div>
<div class="col-xs-6">
<label name="end_date" class="control-label" style="width:35%">End Date(Default: Current Date)</label>
<input style="color:black;width:100px" id="end_date" type="date"></input>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<label name="fruit_name" class="control-label" style="width:35%; padding-left:15px">Select a fruit</label>
<select class="js-example-placeholder-single1 js-example-basic-multiple form-control" id="fruit_name" placeholder="Select" style="width:210px" multiple="multiple">
</select>
</div>
<div class="col-xs-6">
<label name="fruit_test" class="control-label" style="width:35%">Select fruit_TEST</label>
<select class="js-example-placeholder-single2 js-example-basic-multiple form-control" style="width:210px" id="fruit_test" multiple="multiple">
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label name="fruit_version" class="control-label" style="width:35%; padding-left:15px">Select fruit message</label>
<select class="js-example-placeholder-single3 js-example-basic-multiple form-control" style="width:210px" id="fruit_message1" multiple="multiple">
</select>
</div>
</div>
<div class="text-center">
<div class="checkbox">
<label><input type="checkbox" value="0" id="newTabs" ><em>Open on Different tabs</em></label>
</div>
<button class="btn btn-md btn-default" v-on:click="loadResults">
<i class="fa fa-arrow-circle-right"></i> Submit
</button>
<button class="btn btn-md btn-default" type="reset" name="searchreset" value="reset">
<i class="fa fa-arrow-circle-right"></i> Reset
</button>
</div>
</div>
</div>
Here is the AJAX through which I fetch my data from backend:
document.onload(getformdata())
function getformdata() {
var self = this;
$.ajax({
url : window.location.href,
type:'GET',
cache:false,
data:{type:'formdata'},
success:function(res){
if(res.message){
alert("Error getting data for the form")
}
ele1 = document.getElementById('fruit_name');
ele2 = document.getElementById('fruit_test');
ele4 = document.getElementById('fruit_message1');
for (var i = 0; i<res.options.fruit_name.length; i++){
var opt = document.createElement('option');
opt.value = res.options.fruit_name[i];
opt.innerHTML = res.options.fruit_name[i];
ele1.appendChild(opt);
};
for (var i = 0; i<res.options.fruit_test.length; i++){
var opt = document.createElement('option');
opt.value = res.options.fruit_test[i];
opt.innerHTML = res.options.fruit_test[i];
ele2.appendChild(opt);
}
var start_date = document.getElementById('start_date')
var end_date = document.getElementById('end_date')
start_date.innerHTML = res.options.start_date
end_date.innerHTML = res.options.end_date
},
error : function(err){
self.message = "Error getting data for the form";
}
});
}
The url of each link is of the form fruitdata/?id=1000 , where id is the only parameter that changes for a different fruit. How do I achieve this functionality of opening these links on different pages??
If I understood your question correctly you need something like below to open new tab:
<button onclick="myFunc()">open google in new tab</button>
<script>
function myFunc() {
window.open("https://www.google.com");
}
</script>
for opening multiple tab you can use this code but If the end-user is running Popup Blocking software (like that built into Chrome) then it may automatically stop those other windows/tabs from opening.
let urls = ["https://stackoverflow.com", "https://stackexchange.com/"];
for (var i = 0; i<2; i++){
window.open(urls[i]);
}
for find out when your check box is checked this code can help:
$("input[type=checkbox]").on('change',function(){
if($("input[type=checkbox]").is(':checked'))
alert("checked");
else{
alert("unchecked");
}
}
I hope this code help you.
Related
When I input data in text input and then click button "Save Task" data will show is list in bottom descend. Now i console.log I want to show data when after click button. I don't know how to get data show when after click button "Save Tasks" so I did console.log
app.html
<div class="form-group" *ngIf="saveTask">
<div class="form-row">
<div class="form-group col-md-12">
<label for="subjectTask" class="control-label">Subject Task</label>
<input formControlName="subjectTask" type="text" class="form-control" id="subjectTask"
placeholder="Subject Task">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="assignDev" class="control-label">Assign Dev</label>
<select formControlName="assignTasks" name="assignTasks" class="form-control" id="assignTasks">
<option value="">choose dev...</option>
<option *ngFor="let staff of Staff" [ngValue]="staff.fullName">
{{staff.firstName}} {{staff.lastName}}
</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="deadline" class="control-label">Deadline</label>
<input formControlName="deadlineDate" type="number" class="form-control" id="deadlineDate"
placeholder="Deadline">
</div>
</div>
<div class="form-row">
<div class="form-group mr-5">
<button type="button" class="btn btn-light btn-cancel">Cancel</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" (click)="onTasksSubmit()">Save Tasks</button>
</div>
</div>
</div>
app.ts
onTasksSubmit() {
const subject = this.editTicket.controls.subjectTask.value
const assignTasks = this.editTicket.controls.assignTasks.value
const deadlineDate = this.editTicket.controls.deadlineDate.value
this.newTask = {
subject, assignTasks, deadlineDate
}
this.depositTasks.push(this.newTask)
this.clearTask()
console.log(this.newTask);
// this.saveTask = false;
}
clearTask() {
this.editTicket.patchValue({
subjectTask: '',
assignTasks: '',
deadlineDate: ''
})
}
saveTasks() {
if (this.depositTasks.length != 0) {
console.log('do');
for (let i = 0; this.depositTasks.length > i; i++) {
console.log(this.depositTasks);
this.ticketService.setAddTasks(
this.id,
this.depositTasks[i]
)
}
}
}
<p *ngFor="let task of depositTasks">{{task?.subject}}</p>
try to use the depositTasks array in template as shown above.
I am working on laravel project, I have a modal form and user can add new fields which I added dynamically using jquery and it works well, but the problem is when I send the form values to the controller the values of the newly dynamic fields is not send or like they lost when the modal is closed after submit, any help?
this is the modal code:
<div class="modal fade" id="{{$task->id}}" tabindex="-1" role="">
<div class="modal-dialog modal-login modal-lg" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<h5 class="modal-title card-title" id="exampleModalLabel">Edit Task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form >
<div class="form-row">
<div class="form-group col-md-12">
<input type="text" class="form-control" name="issue"
value="{{$task->issue}}">
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-6">
<select name="tag" id="tag" class="form-control" >
<option value="{{$task->tag}}" selected>{{$task->tag}}</option>
#if($task->tag=='CM')
<option value="PM">PM</option>
#else
<option value="CM">CM</option>
#endif
</select>
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-12">
<textarea class="form-control" name="root_cause"
placeholder="Root Cause"></textarea>
</div>
</div>
<div class="form-row pt-2">
<div class="col-md-8 form-group" id="container{{$task->id}}">
<select class="form-control" name="add_used_part[]" >
<option disabled selected>used spare parts</option>
#foreach($task->machine->part as $part)
<option value="{{$part->id}}"> {{$part->part_name}}
</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4" id="container2{{$task->id}}">
<input type="text" class="form-control " id="quantity"
name="quantity[]" placeholder="Quantity">
</div>
Add another spare part
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary"
onclick="submitajax('{{$task->id}}') ; return
false;">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
this jquery function:
<script type="text/javascript">
function addField(a,b){
var parts = JSON.parse(a);
// Container <div> where dynamic content will be placed
var container1 = document.getElementById("container"+b);
var container2 = document.getElementById("container2"+b);
//Create and append select list
var selectList = document.createElement("select");
selectList.name="add_used_part[]";
container1.append(selectList);
//Create and append the options
for (var i = 0; i < parts.length; i++) {
var option = document.createElement("option");
option.value = parts[i].id;
option.text = parts[i].part_name;
selectList.append(option);
}
var input = document.createElement("input");
input.type = "text";
input.name = "q";
container2.append(input);
}
function submitajax(id){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var tag = $("#tag").val();
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
/* this alert only one value of the add_used_part and quantity arrays
alert (id+tag+' '+add_used_part+' '+quantity);
$.ajax({
type:'POST',
url:"{{ route('task.update',['id' => $task->id ] ) }}",
data:{tag:tag, add_used_part:add_used_part, quantity:quantity},
success:function(data){
alert(data.success);
}
});
}
I think the problem is in this fragment:
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
You can't read many values this way, maybe you can try something like this:
var add_used_part= [];
$.each( $("[name='add_used_part[]']"), function(){
add_used_part.push( $(this).val() )
})
var quantity= [];
$.each( $("[name='quantity[]']"), function(){
quantity.push( $(this).val() )
})
And then send these arrays via AJAX request.
P.S: Sorry, I saw the question date just now :)
this is my UI code in which i have multiple text fileds that i add dynmically from add rows button
<div class="col-md-12">
<div class="col-md-8" style="float:left;overflow-y: auto;height:260px;">
<div class="text-right" style="margin-bottom:10px;">
<input type="button" class="btn btn-primary" value='Add Row' id='addButton' />
<input type="button" class="btn btn-default" value='Remove Row' id='removeButton'>
</div>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<div class="col-md-12">
<div class="col-md-6 form-group">
<label class="control-label col-md-2">Key</label>
<div class="col-md-10">
<input type='text' id='key1' class="form-control">
</div>
</div>
<div class="col-md-6 form-group">
<label class="control-label col-md-2">Value</label>
<div class="col-md-10">
<input type="text" id="value1" class="form-control" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4" style="top:40px;">
PLEASE PASTE DATE HERE:
<textarea style="width:340px;height:200px;margin-bottom:20px;"></textarea>
</div>
</div>
I want to bind this values to dictionary using javascript
var specList = [];
for (var i = 1; i < counter; i++) {
var _key = $("#key" + i).val();
var _value = $("#value" + i).val();
specList.push({
key: _key,
value: _value
});
alert(specList['key']);
}
than i want to append using formData Like this
var formdata = new FormData($('#formAddProduct').get(0));
formdata.append('prodSpecification', JSON.stringify(specList));
than I want to get on controller action
Here is my model code
public Dictionary<string,string> prodSpecification { get; set; }
I am stuck here from almost one month I will be very thankful if some one give me good answer
I am not sure if you are posting via ajax or via form
but assuming by ajax, then you could do
$.post('#Url.Action("MyAction")', { prodSpecification: specList });
I have three cascading select lists. When I try to reset them with this code:
function resetSearch(advancedSearch){
document.getElementById("advancedSearch").reset();
submitQuery();
};
It resets the select lists, but because the select lists are cascading, so one depends on another to fill the select list with the correct values, it sets the values of the lists that are selected at that moment to the default.
So in my case I have three selectlists, one for the table names, one for the field names and one for the attributes. When I select a table it gives me the matching column names and attributes. If I than push teh reset button, it resets the table name to default, but the fieldnames and attribute select lists are set to the default of the other table.
Here is a picture to clarify my question:
This is my form with the select lists in it and the reset button;
<form action="javascript:submitQuery()" id="advancedSearch">
<!-- Search by name input field -->
<div class="form-group">
<div id= "selectListContent">
<div class="row">
<div id="content-a">
<div class='content-row'>
<div class="select_table col-md-6">
<label for="invoerTabelNaam">Select table:</label>
<span>
<select class="form-control" name="table_names" id="slctTable">
</select>
</span>
</div>
<div class="select_column col-md-6">
<label for="invoerColumnNaam">Select column:</label>
<span>
<select class="form-control" name="column_names" id="slctField">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="select_attribute col-md-9">
<label for="invoerAttribuutNaam">Select attribute:</label>
<span>
<select class="form-control" name="attribute_names" id="slctAttribute">
</select>
</span>
</div>
</div>
</div>
</div>
<!-- Buttons search en reset voor tab advanced search -->
<div class="form-group">
<div class="col-md-6">
<button type="reset" class="btn btn-block btn-primary" onclick="resetSearch()">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>   Reset
</button>
</div>
</div>
</div>
I assume that you have some event which populates other selects when value in first select is chosen. In that case you need to trigger it after form is reset.
For e.g.:
function resetSearch() {
$('#slctTable').closest('form')[0].reset();
$('#slctTable').trigger('change');
}
To clarify: how reset could 'know' that for 'table 1' correct list of fields is 'field1' and 'field2' and for 'table 2' it is 'other1' and 'other2'? It can just set selection to first items of lists.
var data = {
'table1': {
'tab1_column1': ['tab1_col1_attr_1', 'tab1_col1_attr_2'],
'tab1_column2': ['tab1_col2_attr_1', 'tab1_col2_attr_2']
},
'table2': {
'tab2_column1': ['tab2_col1_attr_1', 'tab2_col1_attr_2'],
'tab2_column2': ['tab2_col2_attr_1', 'tab2_col2_attr_2']
}
}
function resetSearch() {
$('#slctTable').closest('form')[0].reset();
$('#slctTable').trigger('change');
}
$(function() {
var table = $('#slctTable'),
field = $('#slctField'),
attr = $('#slctAttribute');
table.on('change', function() {
field.html('').val('');
$.each(data[$(this).val()], function(k, v) {
field.append($("<option />").val(k).text(k))
});
field.trigger('change');
});
field.on('change', function() {
attr.html('').val('');
$.each(data[table.val()][$(this).val()], function(k, v) {
attr.append($("<option />").val(v).text(v))
});
});
$.each(data, function(k, val) {
table.append($("<option />").val(k).text(k))
});
//populate fields for the first time
table.trigger('change');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:submitQuery()" id="advancedSearch">
<!-- Search by name input field -->
<div class="form-group">
<div id="selectListContent">
<div class="row">
<div id="content-a">
<div class='content-row'>
<div class="select_table col-md-6">
<label for="invoerTabelNaam">Select table:</label>
<span>
<select class="form-control" name="table_names" id="slctTable">
</select>
</span>
</div>
<div class="select_column col-md-6">
<label for="invoerColumnNaam">Select column:</label>
<span>
<select class="form-control" name="column_names" id="slctField">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="select_attribute col-md-9">
<label for="invoerAttribuutNaam">Select attribute:</label>
<span>
<select class="form-control" name="attribute_names" id="slctAttribute">
</select>
</span>
</div>
</div>
</div>
</div>
<!-- Buttons search en reset voor tab advanced search -->
<div class="form-group">
<div class="col-md-6">
<button type="reset" class="btn btn-block btn-primary" onclick="resetSearch()">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>   Reset
</button>
</div>
</div>
function resetSearch(advancedSearch){
change for this:
function resetSearch(){
I have create from your initial HTML and description this Codepen with cascading population of field. I do not see your problem. Could you provide more explaination or to say if this resolve your problem?
Codepen: http://codepen.io/anon/pen/ezmErd
HTML
<form class="container" action="javascript:submitQuery()" id="advancedSearch">
<div class="form-group">
<div id="selectListContent">
<div class="row">
<div id="content-a">
<div class='content-row'>
<div class="select_table col-md-6">
<label for="invoerTabelNaam">Select table:</label>
<span>
<select class="form-control" name="table_names" id="slctTable">
</select>
</span>
</div>
<div class="select_column col-md-6">
<label for="invoerColumnNaam">Select column:</label>
<span>
<select class="form-control" name="column_names" id="slctField">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="select_attribute col-md-9">
<label for="invoerAttribuutNaam">Select attribute:</label>
<span>
<select class="form-control" name="attribute_names" id="slctAttribute">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<button type="reset" class="btn btn-block btn-primary" onclick="resetSearch('advancedSearch')">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>   Reset
</button>
</div>
</div>
</form>
JS
var table = document.getElementById("slctTable"),
field = document.getElementById("slctField"),
attrib = document.getElementById("slctAttribute"),
populate = function (dropdown, name) {
for (var i = 0, temp; i < 4; i++) {
temp = document.createElement("option")
temp.value = i + 1;
temp.textContent = name + " " + +(i + 1);
dropdown.appendChild(temp);
}
},
submitQuery = function () {
console.log("Submit !");
},
resetSearch = function (advancedSearch) {
document.getElementById(advancedSearch).reset();
submitQuery();
};
// Populate dynamicly the first Dropdown.
populate(table, "Table");
// When you select an item of first Dropdown...
table.addEventListener("change", function() {
field.innerHTML = "";
// ...populate dynamicly the second Dropdown.
populate(field, "Field");
});
// When you select an item of second Dropdown...
field.addEventListener("change", function() {
attrib.innerHTML = "";
// ...populate dynamicly the last Dropdown.
populate(attrib, "Attribute");
});
I am not able to enter the data to the previous page using ng-model. I moved to the next page after filling some data in textbox, after come to same page I want my data to be entered same as I entered previously, I write the code but its not working please tell me what I am doing wrong and thanks in advance
js code:
$scope.notesPage = function() {
$rootScope.data = {
Name: $scope.prospectName,
};
$location.path('/prospectNotes');
};
$scope.addProspect = function() {
$rootScope.data.ProspectNotes = $scope.notes;
$scope.ProspectNotes = "";
};
function fillFormData() {
$scope.prospectName = $rootScope.data.Name;
}
$scope.addProspectForm = function() {
$location.path('/create');
fillFormData();
}
first html page
<div class="container" id="form-container">
<div class="form-group">
<label for="prospectName"> Prospect Name:
<img src="images/required.gif" alt="Required" class="required-star">
</label>
<input type="text" id="prospectName" name="prospectName" ng-model="prospectName" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="notesPage()" style="margin-left:10px;"> Next </button>
</div>
</div>
second html page
<div class="container" id="form-container">
<div class="form-group">
<label for="notes"> Notes for Prospect {{data.Name}}</label>
<textarea rows="20" id="notes" name="notes" ng-model="notes" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="button" id="cancel-button" value="Back" class="col-sm-2 btn btn-primary" ng-click="addProspectForm()">
<button type="submit" class="col-sm-2 btn btn-primary" ng-click="addProspect()" style="margin-left:10px;"> Add </button>
</div>
</div>
Use a factory to store your data and then retrieve the same.
check this one:
Can I keep the model value when click browser back button with angularjs?