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
Related
I want to show an section when the checkbox is checked on another section, and show it with an animation from the top. I have the following code for the input that is in another section .
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
Also showing the section I need to show; this section has a default display:none.
Its a classic JS task. Use an onclick event to check if the checkbox is checked and then to change the section from display: none to display: block . Also Add an onclick event so that JS is triggered.
function showSection() {
var showSection = document.getElementById("reveal-email"),
planSection = document.getElementById("plan-section");
if (showSection.checked == true) {
planSection.style.display = "block";
} else {
planSection.style.display = "none";
}
}
#plan-section {
display: none;
}
<div className="continue" id="first">
<button className="btn-continue">Contratar Plano
<input type="checkbox" id="reveal-email" onclick="showSection()">
</button>
</div>
<section className="plan-section" id="plan-section">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
One recommendation regarding your code:
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"></input>
</button>
It's not a good practice to group checkbox and some text into button, in HTML you can use label for that.
If JS solution is acceptable, you need to follow these steps:
Find your checkbox button and section in the DOM
Add event listener which will trigger callback function after each change of the checkbox state
In the callback function you need to trigger style for your section.
The full code is below:
var checkbox = document.getElementById('reveal-email');
var section = document.getElementById('plan-section');
checkbox.addEventListener('change', onChange)
function onChange() {
if (this.checked) {
section.style.display = "block";
} else {
section.style.display = "none";
}
}
<div className="continue" id="first">
<button className="btn-continue">
Contratar Plano
<input type="checkbox" id="reveal-email" role="button"/>
</button>
</div>
<section className="plan-section" id="plan-section" style="display:none">
<div className="next">
<i class="arrow down"></i>
</div>
<div className="form-block">
<form className="form">
<div className="plan-form">
<div className="input-block">
<label htmlFor="name">Nome</label>
<input type="text" name="name" id="name" onChange={props.handleChange} required className="input" />
</div>
<div className="continue">
<button className="btn-continue" id="plan-continue" disabled={props.step.isLast()} onClick={props.next}>
<span className="btn-text">Contratar Plano</span>
<img className="check-btn" src={check} />
</button>
</div>
</div>
</form>
</div>
</section>
It's a minimal example. I'm trying to show a textarea and the set the focus onto it. It doesn't work. If the textarea is visible, the focus works good but after making the textarea visible, it loses the focus. Why?
<div class="posts">
<div class="post">
<textarea #textarea1 [(ngModel)]="text" class="comment-text" name="text"></textarea>
</div>
<button (click)="textarea1.focus()">SetFocus on the first textarea</button>
<br><br>
<div class="post">
<textarea #textarea2 [(ngModel)]="text" [hidden]="!show" class="comment-text" name="text"></textarea>
</div>
<button (click)="show = !show; textarea2.focus()">SetFocus on the second textarea</button>
</div>
Demo: https://stackblitz.com/edit/angular-ebe7gc
At the time the hidden attribute gets false the focus() command can't get the textarea.
With a small setTimeout() you can solve that problem.
https://stackblitz.com/edit/so-01-angular-4tl2u
showAndFocus(elem) {
this.show = !this.show;
setTimeout(() => {
elem.focus();
},10);
}
<button (click)="showAndFocus(textarea2)">SetFocus on the second textarea</button>
<div class="posts">
<div class="post">
<textarea #textarea1 [(ngModel)]="text" class="comment-text" name="text"></textarea>
</div>
<button (click)="textarea1.focus() ; textarea2.focus=false">SetFocus on the first textarea</button>
<br><br>
<div class="post">
<textarea #textarea2 [(ngModel)]="text" [hidden]="!show" class="comment-text" name="text"></textarea>
{{ textarea2.focus() }}
</div>
<button (click)= "show = !show " >SetFocus on the second textarea</button>
</div>
I want to pass 3 values (2 dropdown's and 1 input field) from one page to another.User will select 2 dependent dropdowns after clicking on the button user will redirect to another page where he will ask to fill-up a form wherein above 3 details will be auto-filled.
The input field's data is passing to another page but the 2 dropdown's value are not passing.
Controller
public function getRequestDetails(Request $request){
$reqAOP = $request->get('areas');
$reqType = $request->get('request_type');
$reqTitle = $request->get('title');
Session::put('areas', $request->get('areas'));
return redirect('frontend_template.submitquery')->withInput($request->only('title'));
}
Blade page
<div class="col-md-6 float-container">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="aops" class="form-control select2-list">
<option value="{{Session::get('areas')}}" selected>{{Session::get('areas')}}</option>
</select> </div>
</div>
<div class="col-md-6" style="height:33px;color: grey;display: none;width: 49%;line-height: 1;" id="req_options">
<div class="form-group" style="margin-bottom: 20px;">
<select style="margin-top: 15px;color: grey;font-size: 16px;" id="request_type" class="form-control select2-list" >
</select>
</div>
</div>
</div>
<br>
<div class="row form">
<div class="col-md-12 float-container">
<div class="form-group">
<input type="text" placeholder="Title *" style="margin-top: 10px;padding-left: 10px;font-size: 16px;" class="form-control" name="title" id="title" value="{{old('title')}}">
</div>
</div>
</div>
You can create a button like this to pass the value to next request/page
<a href="{{route('route_name',['area'=>'$variable','request_type'=>'$variable','title'=>''])}}"
class="btn btn-primary" style="text-decoration:none">
<i class="fa fa-folder-open"></i>Manage
</a>
In route you just need to declare the path like
Route::get('blade_path/{area}/{request_type}/{title}','Controller#function')->name('route_name');
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
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}}