I'm running into issues with modals and forms with Foundation.
I want to be able to fill out a form, open a modal, then have that modal be able to submit the form.
Normally, I'd have my form, and all of it's form fields, and put the modal inside the the form element, and that would be fine - but with foundation, I find that the reveal modal is moved to the bottom of the DOM.
What's the best way to accomplish what I'm after?
I've added a skeleton of what my normal structure might be like - any help would be greatly appreciated.
<form method="post" action="...">
<label for="title">Title</label>
<input type="text" name="title" id="title" placeholder="Enter campaign title here" required>
<label for="title">Description</label>
<textarea type="text" name="description" placeholder="Description of this campaign"></textarea>
<button type="button" class="button default-btn float-right" data-open="emailSendConfirmation">Publish campaign</button>
<div class="reveal" id="emailSendConfirmation" data-reveal>
<button data-close aria-label="Close modal" type="button" class="button">Cancel</button>
<button type="submit" class="button" name="status" value="Published">Publish</button>
</div>
</form>
Thanks,
Ollie
Related
#{
ViewData["Title"] = "Login";
}
<h1>#ViewData["Title"]</h1>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember">Remember me
</label>
</div>
**<script>function openWin() {
window.open("https://localhost:7257/Home/Stocks");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Login" onclick="openWin()">
Login
</button>
</form>
<script>function openWin() {
window.open("https://localhost:7257/Home/Signup");
}</script>
<form>
<button type="submit" class="btn btn-primary" value="Sign up" onclick="openWin()">
Sign up
</button>
</form>**
</form>
</div>
After executing this code block the page that is similar to photo can be displayed but my problem is how should I change these 2 buttons functions so that they can pop up different locations like it is written in the bold area.
If there is any related page similar to this issue, you can share as comment.
It looks like you've named both functions openWin(). When you click the button it's finding the the top function and never makes it to the second one since it thinks it found what it was looking for. JS runs from top to bottom in order so as soon as it finds the first function it will stop.
You need to change one of the function names when you declare it, such as openWin() and openWin2().
I would also recommend that you move all of your JS code to a single <script> tag in order to avoid errors in the future.
I have HTML form with submit button inside. Inside the form there are piece of HTML code which popups in modal window when filling up the form. Inside this modal are one more input and submit button. And it does not work, the form doesn't send to email. But when I move entire button HTML code right before </form> then submit button works. Here is a code:
<form name="autoForm" id="contact-form" class="row" method="post" action="php/send.php">
<div class="form-group col-md-6">
<label id="address-label" for="place">* Markė | modelis | metai | TA | miestas</label>
<input id="form_place" type="text" name="place" class="form-control" data-error="Laukas privalomas" >
<div class="help-block with-errors"></div>
</div>
<div class="form-group col-md-12">
<label for="message">Automobilio būklė</label>
<textarea id="form_message" name="message" class="form-control h-auto" rows="4" data-error="Prašau, parašykite daugiau apie NT"
placeholder="Čia galite parašyti daugiau informacijos apie automobilio būklę"></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-container col mt-5">
<a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a>
</div>
<div id="modal-background" class="modal-background container-hidden">
<div id="modal-form" class="modal-form">
<a id="modal-close"><i class="icon-close" data-v-27b8b94e=""></i></a>
<div class="form-header">
<h2>Gaukite kainos pasiūlymus tiesiai į savo telefoną.</h2>
<p>Įveskite telefono numerį ir gaukite pasiūlymo nuorodą <b>SMS</b></p>
</div>
<div class="form-body">
<div class="form-group col-md-6">
<label class="phone" for="phone">* Jūsų telefono numeris</label>
<input id="form_phone" type="phone" name="phone" class="form-control" required="required" data-error="Laukas privalomas">
<div class="help-block with-errors"></div>
</div>
<input type="hidden" name="code" value="" id="code" />
<button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button>
<span class="privacy">Sutinku su privatumo politika</span>
</div>
</div>
</form>
Filling up first inputs there are first button <a class="btn btn-primary" id="to-modal-form"><font size="4">Sužinoti kainą</font></a> which is opening the modal windows. Inside after filling up additional input I press <button class="btn btn-primary" type="submit" id="form_submit"><font size="4">Tęsti</font></button> which doesn't work.
But form work when button is moved before </form>. Form sends all values - inside and out of modal window.
Can't get what is wrong.
If you have button outside </form> it would not work the solution is using form="" parameter to the button it basically tell this button belong to this specific form element
<button class="btn btn-primary" form="contact-form" type="submit" id="form_submit"><font size="4">Tęsti</font></button>
Your submit button will confused which form that it should submitted if you place it outside the form tag.
You could use javascript to submit the form.
https://www.javascript-coder.com/javascript-form/javascript-form-submit/
Put a button inside your modal with onclick="submitForm('contact-form');", then add below js code
function submitForm(id) {
document.getElementById(id).submit();
}
Solved this by adding submit button before with attribute hidden:
<form>
<!-- the form content -->
<button class="btn btn-primary" type="submit" id="form_submit" hidden></button>
</form>
And that button inside of modal window made as trigger with attribute onclick="submitForm();" like this:
<button class="btn btn-primary" onclick="submitForm();"><font size="4">Tęsti</font></button>
In JS it triggers submit button using .click() method:
const submitBtn = document.getElementById('form_submit');
function submitForm() {
submitBtn.click();
}
So I have this code:
<form action="{{ url_for('profile') }}" method="post" enctype=multipart/form-data>
<label for="files" class="btn btn-light btn-sm">Cambiar foto de perfil</label>
<input id="files" style="visibility:hidden;" name="photo" type="file" required>
<input type="file" accept="image/*">
<label for="submit" class="btn btn-light btn-sm">Actualizar</label>
<button style="visibility:hidden;" id="submit" type="submit"> Actualizar </button>
</form>
I would like to know how to eliminate the space between these labels. I have tried with Margin="0" and nothing happened.....Thanks in advance.
Are you referring to the space to the right of "Cambiar foto de perfil"? If so, that's due to the adjacent input being styled with visibility: hidden. If you want that input to be hidden AND not take up any space, you would need to set it to Display: none instead of the visibility property.
Not quite sure what you want to achieve - assuming you want to have a form with 3 lines of input widgets, 2 file uploaders and a submit button, you may want to start off with something along these lines:
<form action="{{ url_for('profile') }}" method="post" enctype=multipart/form-data>
<div>
<label for="files" class="btn btn-light btn-sm">Cambiar foto de perfil:</label>
<input id="files" style="visibility:visible;" name="photo" type="file" required>
</div>
<div>
<div>
<label for="images" class="btn btn-light btn-sm">Cambiar el fichero del fotos:</label>
<input id="images" type="file" accept="image/*">
</div>
<div>
<label for="submit" class="btn btn-light btn-sm">Actualizar:</label>
<button style="visibility:visible;" id="submit" type="submit"> Actualizar </button>
</div>
</form>
Modifications in above code snippet:
Wrap each widget and its label in a div element.
Make the widgets visible
Add a label for the image uploader
Further suggestions:
Add a full-fledged css layout (flex or grid) to align widgets and labels.
Add Css styles to the divs and toggle the display property to selectively add or remove widgets ( beware, usually considered bad user interface design ).
The MDN Web Docs (previously Mozilla Developer Network, MDN) is an excellent resource for learning about web technologies. You may want to hav a look at the CSS section, in particular the CSS layout tutorial.
I am experiencing a issue detecting if the submit button was clicked. I was give the following form by a CSS designer:
<form action="" method="post">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control span12">
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-controlspan12 form-control">
</div>
Sign In
<div class="clearfix"></div>
</form>
I would like submit the captured information by clicking on the Sign In CSS button. I am used to the usual:
<input type="Submit" value="Sign-In>
button, but not this is different, I am stuck. Any assistance will be appreciated.
try to change
Sign In
with
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
Furthermore you need to set an action attribute on your form element
Give your form and ID = "myform" And try below:
Sign In
I am using a template, the name is Treble One Page Rsponsive Theme from Wrapbootstrap which uses Twitter Bootstrap. I am implementing the template and encountered this small error which drove me crazy.
There is a search bar, consists of <input> tag and <button> tag. Previously it was fine, until I make it inside a <form>, the search bar started to act weird. The <input> field is centered, but the <button> appended into outside the field making the whole things uncentered.
Here is the image, to be clear:
picture
And here is my code:
<div class="row">
<div class="span8 offset2">
<div class="input-append">
<form method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search">
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
</div>
I've googled this template.
This code works on original template as expected:
<div class="row">
<div class="span8 offset2">
<form class="input-append" method="get">
<input class="span5" id="appendedInputButton" type="text" placeholder="Search By Name" name="searchTerm" value="Search" />
<button class="btn btn-primary sicon-search sicon-white" type="submit"><i>Search</i></button>
</form>
</div>
</div>
Main idea is to convert "input-append" div into form, instead of adding new form element within it.