Dynamically enable/disable SUBMIT button in twig - javascript

Facing an issue that I could easily solve with the help of JS, but failing to do it in twig. I have a couple of fields in twig, and a submit button. I would want to validate these fields' data in frontend before actually submitting them, and have the "Submit" button disabled as long as the condition is unsatisfacatory. The problem in case:
<div class="col-lg-12">
<div class="form-group field">
<label>Description:</label>
<textarea model="description" name="description"></textarea>
</div>
</div>
<div class="col-lg-6">
// checking if user has forgotten to add description, to prevent data submitting
<button type="submit" class="btn btn-default blue" {% if description == "" } % disabled="disabled" {% endif %}>
Submit
</button>
</div>
In JS or AngularJSi could easily solve this problem, but is there any means of achieving the same result in Twig? I need it to check the status of description dynamically and react accordingly.
Already tried:
min-length - does not prevent submitting, only colors the field after it is activated, does not work
Is there any means to do it? Thank you in advance!

Related

Bootstrap, Javascript, process multiple forms

I want to submit a form from my site, which uses bootstrap for layout, and as such, the "contact form" is duplicated (1 for large layout, and another for mobile) - but it's the same form, going to the same endpoint.
Since IDs are supposed to be unique - I have to ID the forms differently...
<div class="d-none d-md-block" >
<form method="POST" action="/signup.php" id="signup-form-A" >
...
<input name="email" >
<button class="btn btn-md" >Sign Up!</button>
</form>
</div>
<div class="d-block d-md-none" >
<form method="POST" action="/signup.php" id="signup-form-B" >
...
<input name="email" >
<button class="btn btn-xs" >Sign Up!</button>
</form>
</div>
I really don't want to duplicate my javascript that handles form submission, and I am sure people have figured this out before me coming across this.
What is an efficient "DRY" way of writing a javascript handler to process any number of similar forms on the same page, that, by definition should be ID'd differently.
Help is greatly appreciated
You can add a dummy class signupform to the forms, then use $('.signupform') to get an array containing all forms.

Using a button with JavaScript & HTML [duplicate]

This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Closed 2 years ago.
I know, the title seems to lead to a repetitive/useless question, but I can't find a solution in other questions. Let me explain better and read what follows before closing my question.
I created a form by learning from different sources. It all seems to work fine, until I have to click on submit button, with "Save as TXT" written on it. It happens quite a strange thing:
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
I think I found why this happens, but I can't fix it. It seems to be something which has to do with both my HTML code and my JavaScript code. Here it is a part of it:
Javascript
$(function(){
$("#submitLink").click(function(event){
// things to do on submit...
});
});
HTML
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
</div>
</form>
How can I change this part of the code in order to submit successfully by clicking anywhere on the button (and do what I write in the JS function)?
Thanks in advance,
happy coding everyone!
ps. I read this "famous" question you added by after closing my question, but it is not helping me. By writing type="button" instead of type="submit" I get no results, I'm sorry
if I click on the text "Save as TXT" inside the button, it submits my data correctly;
When you click on the text itself, you are clicking the <a> element, and therefore triggering its event listener.
if I click on the coloured part around the text "Save as TXT" of the button, it refreshes the page.
When you click on any part of the button, are triggering the <button>'s event listener.
Therefore, I suggest
So it seems like the solution is to taking the <a> element's event listener and attaching it to the <button>.
One way to do this is to replace
<button class="btn btn-primary btn-lg" id="align" type="submit">Save as TXT</button>
with
<button class="btn btn-primary btn-lg" id="align" onclick="{Save as TXT}" type="button">Save as TXT</button>
where "{Save as TXT}" was the code you previously had in the <a>'s href.
The reason you need to add type="button" is so you can disable the button's default behavior submitting the form (and therefore refreshing the page).
Then, since you got rid of the <a> tag, you need to attach any listeners that used to listen for clicks on the <a> tag to the <button> instead.
To do this, replace:
$("#submitLink").click(function(event){
// things to do on submit...
});
with
$("#align").click(function(event){
// things to do on submit...
});
See it in action:
<form method="post" name="myForm" action="" id="formToSave">
<!-- some fields to compile... -->
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="align" onclick="console.log('Submitted')" type="button">Save as TXT</button>
</div>
</form>
You need for the BUTTON type 'button' but you had 'submit'. So it wants to submit the form which follows in a reloading, with button the action is needed to be done from you.
The A-tag is not needed so I deleted it. On the contrary if clicked at the corners anything happened, now this functions
<button type="button" id='btn'>Save as TXT</button>
Just test it.
$(function(){
$("#btn").click(function(event){
console.log('Submit');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" name="myForm" action="" id="formToSave">
<div class="input-group mb-3">
<button class="btn btn-primary btn-lg" id="btn" type="button">Save as TXT</button>
</div>
</form>

Preventing form submission on Enter key press in Angular

There are so many answers for this on stackoverflow. But unfortunately none of them is working for me. I will tell you what I have tried one by one.
<form (keydown.enter)="$event.preventDefault()" ...>
<button (keyup.enter)="skillsHandleEnter($event, skillString)"></button>
#Component(...)
class MyComponent {
skillsHandleEnter(event, skillString) {
event.preventDefault();
// ... your logic
}
}
But none of the approach is working. I am using ngx-tags-input which allows me to apply some tags separated by enter key. This creates a problem. The moment I press Enter key, my form gets submitted with just one tag that i was able to enter. Trust me I've tried almost everything to prevent this and also I dont want to over complicate the things. Please ignore naming conventions. I will fix them later.
Here's my blog.component.html before implementing any solution.
<form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button class="btn btn-primary mt-3 mb-3">Submit</button>
</form>
Please correct me.
I followed these two simple steps:
1) I added an attribute in my form tag.
(keydown.enter)="$event.preventDefault()"
2) Added (click) listener on the submit button
So the entire HTML code looks like:
<div class="container">
<div class="row pt-5">
<div class="col-md-12 col-lg-12 col-sm-12 bg-light">
<form [formGroup]="editorForm" (keydown.enter)="$event.preventDefault()">
<div class="form-group">
...
</div>
<button class="btn btn-primary (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>
The problem was that I was using click listener with the form tag itself along with keydown.enter.
the html button element has a three valid type
submit : the button submits the form data to the server. This is the default 🔥🔥 if the attribute is not specified, or if the attribut is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values,
like . button: The button has no default
behavior and does nothing when pressed. It can have client-side
scripts associated with the element's events, which are triggered
when the events occur.
button: the button has no default behavior and does nothing when
pressed. It can have client-side scripts associated with the
element's events, which are triggered when the events occur.
so to solve the probleb just set the button type to button like this
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
The only reason to use ngSubmit is to submit the form on "enter".
So you can remove the ngSubmit event listening and replace it by the click event of the button. I also removed the submit emitting from the button by adding type="button".
<form [formGroup]="editorForm">
<div class="form-group">
<label for="exampleInputEmail1">
<h3>Title</h3>
</label>
<input type="text" class="form-control" id="inputTitle" aria-describedby="emailHelp" placeholder="Enter a question that explains your problem exactly">
<br>
<label for="editor">
<h3>Editor</h3>
</label>
<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
</div>
<ngx-tags-input class="form-control input-lg" name="tags"></ngx-tags-input>
<button type="button" (click)="onSubmit()" class="btn btn-primary mt-3 mb-3">Submit</button>
</form>

How can I use the same fields for two different forms?

I'm trying to combine the login and register forms on a WooCommerce/WordPress site. The idea is that a single set of fields, username and password, could be submitted by two different forms. The first way I thought of is (simplified for clarity):
<form id="login">
<input id="username">
<input id="password">
<button type="submit">LOG IN</button>
</form>
<form id="register">
<div style="visibility:hidden!important;position:fixed!important;">
<input id="register_username">
<input id="register_password">
</div>
<button type="submit">REGISTER</button>
</form>
Basically, the layout hides the second pair of inputs but shows both buttons. Then, there's some JS that mirrors the values of corresponding fields:
var u = $('#username');
var p = $('#password');
var ru = $('#register_username');
var rp = $('#register_password')
$('#login').on('change blur focus click keyup',function(){
ru.val(u.val());
rp.val(p.val());
});
This seems to trigger a warning that an "invalid field is not focusable" - which I understand - but, can this be solved and done well? Is there a way to do this without JavaScript? Is there a better way altogether?
Let's assume I will show the hidden stuff in the case that there is no JS on the user's browser. Let's also assume I was given this design and asked to implement it, i.e. this is not a question about UX.
Just merge 2 forms into one and set 2 buttons
<form id="login">
<input id="username">
<input id="password">
<button name="submit" type="submit" value="login">LOG IN</button>
<button name="submit" type="submit" value="registration">REGISTER</button>
</form>
After submitting your form you need to check submit value like
if($_POST['submit'] == 'login')
then do code for login
else if($_POST['submit'] == 'registration')
then do code for registration
To reveal the hidden fields in the case of no javascript you would put the data between the following tags:
As far as the fields that are active when there is JavaScript, place that data within the JavaScript itself using document.write("fields here");.
The end result will be that these fields appear when JavaScript is enabled, and do not appear when JavaScript is disabled.
Hope this helps.

Two jquery submits, one action per

I'm very new to JS/jquery (I'm a backend developer) and am having trouble implementing something. I am working with Django and have a template that has a text area that needs to have a submit event when the enter button is pushed. Here is how I've implemented that.
<div class="search multi-search">
{% if search_str %}
<textarea name="search_str" id="search_str">{{ search_str }}</textarea>
{% else %}
<textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea>
{% endif %}
<button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button>
</div>
<script>
// overriding the default enter action to submit the
// search string on enter instead
$('#search_str').keydown(function(e){
// checks to see if the key pressed is the enter key and submit.
// (13 is the code for the enter key)
if (e.which == 13) {
e.preventDefault();
$('#leads_form').submit();
}
})
</script>
This submit populates a list where the user can select (via checkbox) a series of items. There is an action button for them to modify details of the selected items. When they press the action button a modal window pops up asking them to provide details regarding the changes requested. Here is my code for that piece.
<div id='give-reason' style="display: none">
<p>Give your reason for this change.</p>
<form>
<input type="text" id="reason">
<button type='button' id='reason-submit'>Submit your reason</button>
</form>
</div>
$('#reason-submit').submit(function(){
var lead_data = gather_lead_status($(this), update_type, true);
var reason = $('#reason').val();
lead_data(reason);
$.fancybox.close();
e.preventDefault();
});
This works wonderfully if I use .click() for the '#reason-submit' and the user clicks the submit button. If I use .submit() it does not work at all. First, if they click the submit button no action occurs (not surprising). Second, if they push enter the page refreshes - and all the data being displayed disappears.
Any suggestions on how I can solve this problem?
EDIT 1:
I should mention that I've tried to use $(':focus') and can't seem to get that to work. I could be using it incorrectly (wouldn't be surprising).
EDIT 2:
Thanks to asifrc and niiru I was able to get this working correctly with the following.
<div class="search multi-search">
{% if search_str %}
<textarea name="search_str" id="search_str">{{ search_str }}</textarea>
{% else %}
<textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea>
{% endif %}
<button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button>
</div>
<div id='give-reason' style="display: none">
<p>Give your reason for this change.</p>
<form id='reason-submit'>
<input type="text" id="reason">
<button type='submit'>Submit your reason</button>
</form>
</div>
<script>
// overriding the default enter action to submit the
// search string on enter instead
$('#search_str').keydown(function(e){
// checks to see if the key pressed is the enter key and submit.
// (13 is the code for the enter key)
if (e.which == 13) {
e.preventDefault();
$('#leads_form').submit();
}
})
$('#reason-submit').submit(function(e){
e.preventDefault();
var lead_data = gather_lead_status($(this), update_type, true);
var reason = $('#reason').val();
lead_data(reason);
$.fancybox.close();
});
</script>
The submit event can be binded to only certain type of elements.
From the jQuery api docs http://api.jquery.com/submit/ :
The submit event is sent to an element when the user is attempting to
submit a form. It can only be attached to <form> elements. Forms can
be submitted either by clicking an explicit ,
<input type="image">, or <button type="submit">, or by pressing Enter
when certain form elements have focus.
So try changing the type attribute of your button to "submit" and see if that works.
Better yet, just give your form tag an id and try attaching to the submit event for that..
Let me know if that helps :)
.click() works for obvious reasons. But, pressing enter will trigger the submit action, which will post the form. Instead, change your button type to submit, and prevent the default action of the submit event. This will handle you for any action that could trigger submitting the form.
<div id='give-reason' style="display: none">
<p>Give your reason for this change.</p>
<form>
<input type="text" id="reason">
<button type='submit' id='reason-submit'>Submit your reason</button>
</form>
</div>
$('#reason-submit').submit(function(event){
event.preventDefault();
var lead_data = gather_lead_status($(this), update_type, true);
var reason = $('#reason').val();
lead_data(reason);
$.fancybox.close();
e.preventDefault();
});

Categories