I have a form from a model where I am trying to update multiple records with one submit. I couldn't get it working
Here is the haml code with slight ruby in it.
.container#questions
.col-md-8
- #questions.each do |q|
- ans = #user.answers.where(question_id:q.id).first.try(:content)
.edit-input
%input.form-control.edit-answer{data: {question_id: q.id, url: api_v1_answers_path(), user_id: #user.id}, placeholder: "#{q.description}", value: "#{ans}"}
%button#update-answers{:type =>'submit', :class=> 'btn btn-primary'} Update
Here is the html that gets generated
<div class="container" id="questions">
<div class="col-md-8">
<div class="info">
<div class="question"> Question1 </div>
<div class="edit-input">
<input class="form-control edit-answer" data-question-id="2" data-url="/api/v1/answers" data-user-id="46" placeholder="" value="example1">
</div>
</div>
<div class="info">
<div class="question"> Question2 </div>
<div class="edit-input">
<input class="form-control edit-answer" data-question-id="3" data-url="/api/v1/answers" data-user-id="46" placeholder="" value="example2">
</div>
</div>
<button class="btn btn-primary" id="update-answers" type="submit">Update</button>
</div>
</div>
When I click on update button, I don't see any action or post happening
Related
I have an issue with Laravel. I have a page where two fields are given; one is a select option in which two parameters are given (name, PRN). Below this, I have an input field and submit button.
When the user writes the name in the input field and searches. It should get data from that user on the next page in table format.
receipt.blade.php
<body>
<div class="form_design">
<div class="container">
<div class="row">
<div class="col-md-10 mx-auto">
<h1 class="mt-0 text-center mb-4 text-white">Get Receipt</h1>
<p style="text-align: left; margin-bottom: 0px !important;">
Home </p>
<div class="boxed_shadow">
<h5><span class="question-label active">Search your transactions for Receipt</span></h4>
<form action="{{url('/')}}" id="submit_form" method="POST" >
#csrf
<div class="alert alert-danger" id="RegisterAlert" role="alert" style="display:none">Record not found.</div>
<div class="form-group">
<select class="form-control" id="tran_type">
<option value="pg_res_txn_id">PRN</option>
</select>
</div><!-- /input-group -->
<div class="form-group">
<label><span class="star_vld">*</span>Search Based On PRN</label>
<input type="text" class="form-control" id="MainContent_TextBoxEmpId">
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-sm px-5" id="MainContent_ButtonSearch" value="Search" style="background-color: #c2d3c8;font-size: 14px;font-weight: 600;">
</form>
<form id="receipt_list" method="POST" style="display:none" >
<table id="rec_list" border='1' class="table">
</table>
</form>
</div>
</div>
</div>
</div>
</div>
ReceiptController.php
class ReceiptController extends Controller
{
public function index()
{
return view('receipt');
}
}
Please give me the solution for this. If anyone wants more data, I can share it with you want to get data based on search and display it on the next page. Data should be from the database; my table name is 'form2s'.
I didn't get the result. I tried but did not get a result.
I have been working on Laravel for the last three months.
I'm using <iframe name="votar" style="display:none;"></iframe>
To submit the form without without redirecting the tab, but the "Type something..." field is not
is not displayed again when submitted.
The submit button is <button class="login100-form-btn"> submit </button>
And I already tried with <button class="login100-form-btn" type="reset"> submit </button>
What clears the field but does not submit the form
I also got the idea to put a link when pressed to send.
The page reloads the field comes back empty but the form is not submitted, doing so
<button class="login100-form-btn">submit</button>
Also tried using <meta http-equiv="refresh" content="5; url=http://www.pseudo.link">
what made the page at a given second refresh all the time
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar">
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
Just added to the <form> a onsubmit='this.submit();this.reset();return false;'
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar" onsubmit='this.submit();this.reset();return false;'>
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
You need to add a script.js file or javascript code into your file where you have to write code to submit the form.
And there write submit function with .reset() property and don't prevent the default form action in that code
in my angular application i have a list of schedule objects in schedule array that are displayed using ngFor.
i want that whenever i click the checkbox on the left of my schedule box that particular schedule is selected as current schedule and rest is set to false .
i also want that my default selected schedule is the one that is most recently added to the array.
here is my HTML code
<div class="Box" *ngFor="let schedule of availableSchedules">
<div class="row width100">
<div class="col-md-1">
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
</div>
<div class="col-md-11">
<div class="row width100" style="font-size: larger;">
<div class="col-md-4">
From : <span>{{schedule.startTime}}</span>
</div>
<div class="col-md-4">
To : <span>{{schedule.endTime}}</span>
</div>
<div class="col-md-2"></div>
</div>
<label for="days" style="font-size: larger;">Days</label>
<div class="row" name="days" style="margin-top: 5px;padding-left: 5px;">
<span class="chip" *ngFor="let day of schedule.days">{{day}}</span>
</div>
</div>
</div>
</div>
here is my ts code
currentSchedule = new tutorAvailablitySchedule();
availableSchedules: tutorAvailablitySchedule[] = [];
selectSchedule(schedule:tutorAvailablitySchedule) {
this.currentSchedule = schedule;
console.log(event);
}
That you should do the job:
<input type="checkbox"
[ngModel]="schedule===currentSchedule"
(ngModelChange)="selectSchedule($event ? schedule : null)" />
If you need to prevent an empty selection, you should use a radio button instead. In that case, you don't event need to define the selectSchedule function:
<input type="radio" name="schedule"
[value]="schedule"
[(ngModel)]="currentSchedule"/>
I have this HTML template:
<div class="container">
<div class="row">
<div class="col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Link </label>
<input type="text" class="form-control" id="field-name" placeholder="Link"
[(ngModel)]="HrefLink" name="HrefLink">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="field-value">Label</label>
<input type="text" class="form-control" id="Label" placeholder="Label"
[(ngModel)]="HrefLabel" name="HrefLabel">
</div>
<button class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-primary" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div> <!-- /div.form-inline -->
</div> <!-- /div[data-role="dynamic-fields"] -->
</div> <!-- /div.col-md-12 -->
</div> <!-- /div.row -->
</div>
In this simple form, I can add one or more inputs. This is the live example: https://bootsnipp.com/snippets/VPRlZ
My question is: How can I get the values of all added fields inside my angular component ? I can add the directive ngModel like above in every input but then all directives will have the same name and I'll not get all values?
Unfortunately, I can't place the ngModel in a higher level in the div of form-group ...
Please tell me if my question is clear or you need more information.
Why not you base the quantity of input in an array of Objects(InputModel it is a custom interface or class) and finally use *ngfor to show them.
InputModel
{
input_value: string,
index_of: number,
isDelete: boolean, //if false is "+" if true is "x"
}
Component.ts
inputValues: InputModel[] = [];
count: number = 0;
OnInit{
this.inputValues.push({
input_value:"",
index_of: this.count,
isDelete: true
});
}
addMore(){
this.inputValues.push({
input_value:"",
index_of: this.count++,
isDelete: false
});
}
Html Template
<div *ngFor="let input of inputValues">
<input [(ngModel)]="input.input_value" />
<!-- TODO button with 'x' or '+' depends of input.isDelete -->
</div>
I am new to Backbone JS and Question could be duplicate but I am not able to figure out the Problem. I need to handle form submit event in my application to use the default HTML5 validation. but unfortunately it's not working for me. below In securityTokenTmpl and securityQATmpl, i have form with submit button which is not firing submit event but click working fine.
view---------
var securityInfoView = Backbone.View.extend({
tagName : 'div',
className : 'security-info-wrap',
initialize : function() {
var self = this;
$('.application-content-wrap').append(self.$el);
this.$el.append(securityInfoTmpl(self.options.result.bankInfo.siteModel));
if (typeName === "TOKEN_ID" || typeName === "MULTI_LEVEL") {
self.$el.find('.security-info-wrap .content-wrap').html(securityTokenTmpl({
results : data
}));
}
if (typeName === "SECURITY_QUESTION") {
self.$el.find('.security-info-wrap .content-wrap').html(securityQATmpl({
results : data
}));
}
},
events : {
'submit' : 'submit'
},
submit : function(e) {
console.log("form submit");
e.preventDefault();
// there after HTML5 validation i want to make Rest call
}
});
securityQATmpl Template
{{#results}}
<div>
<form id="securityQA" method="POST">
<div class="row">
{{#fieldInfo}}
{{#questionAndAnswerValues}}
<div class="small-12 columns"><label class="addAccountLabel">{{question}}</label>
<input required type='{{responseFieldType}}' name='{{metaData}}'/>
</div>
{{/questionAndAnswerValues}}
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next"/>
</div>
</div>
</form>
<div class="clear"></div>
{{/results}}
securityTokenTmpl Template
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
{{/fieldInfo}}
</div>
</div>
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</form>
{{/results}}
There was an error in Templates i had a div in template which i was opening before form opening tag and closing before form closing tag it should be closed after form closing tag.
{{#results}}
<div>
<form id="securityToken" method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
<input required type='{{responseFieldType}}' size='{{maximumLength}}' name="securityToken"/>
</div>
</div>
{{/fieldInfo}}
<div class="row">
<div class="small-9 columns"></div>
<div class="small-3 columns"><input type="submit" class="button" value="Next" /></div>
</div>
</form>
</div>
{{results}}