Bootstrap, Javascript, process multiple forms - javascript

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.

Related

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>

Dynamically enable/disable SUBMIT button in twig

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!

Facebook Tracking Pixel On a Button Event

I'm trying to set up a facebook tracking pixel on my website. I need the pixel to be triggered on the submission of a contact form. My contact form does not redirect to a new page on submission, so i need to place the pixel to "track event on in-line action".
This is the snippet facebook have given me:
<button id="submitButton">Generate lead</button>
<script type="text/javascript">
$('#$submitButton').click(function() {
insert_event_code_here;
...
</script>
And this is my current button Script:
<form role="form" method="post" id="contactForm">
<!-- my form fields -->
<div class="col-md-12">
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right control-submit">Send!</button>
</div>
How do i splice these two bits of code together to make a working facebook pixel triggered when the user clicks the send message button?
Also, where the facebook code says "insert_event_code_here;" what is this?
Many thanks everyone!
If you simply want to track the click on the button you can trigger an event with something like the sample code at https://developers.facebook.com/docs/marketing-api/audiences-api/pixel#inpageevents
<form role="form" method="post" id="contactForm">
<!-- my form fields -->
<div class="col-md-12">
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right control-submit" onclick="fbq('track', 'Purchase');">Send!</button>
</div>

Sending parameters to javascript from thymeleaf

I 'm writing a project based on Thymeleaf and I stuck with such a problem. I have a form which is supposed to be send on back-end. But before sending I have to perform some calculations with pages with the hepl of JS. So I decided to do something like that:
<form th:action= "'javascript:sendSearchRequest('this.form', '+${currentPage}+', '+${selectedPageSize}+')"
So in this case it seems to be impossible, because this.form can not be processed. Then I tried another approach:
<button id="searchButton" class="btn btn-default" type="submit"
onclick="return sendSearchRequest(this.form, this.currentPage, this.selectedPageSize)">Search
</button>
This time I cannot work with currentPage and selectedPageSize parameters, because I could only call for them only from thymleaf operators, like th:onclick for example.
So here is my question: is it possible to send both form parameter and some parameters from model like ${currentPage} in my example
You could add them as fields to your form (and access them in you sendSearchRequest).
<input type="hidden" th:value="${currentPage}" id="currentPage" />
<input type="hidden" th:value="${selectedPageSize}" id="selectedPageSize" />
or as data attributes on your form tag.
<form th:data-current-page="${currentPage}" th:selected-page-size="${selectedPageSize}" ...
I think you could fix your button click as well, to look like this:
<button id="searchButton" class="btn btn-default" type="submit" th:onclick="|return sendSearchRequest(this.form, ${currentPage}, ${selectedPageSize})|">
Search
</button>

How to show js message from html action

I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?
You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!
I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.

Categories