I am experiencing trouble with the action attribute from Form. When I submit my form data the page gets reloaded.
<form name="circuitForm" action="#idchart" class="form-horizontal" ng-submit="submitCircuit()" novalidate>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 col-xs-offset-2 col-xs-10">
<button type="submit" id="submit" class="btn btn-default" ng-disabled="circuitForm.$invalid" >Run</button>
</div>
</div>
As you can see, on my Form action I refer is on the same page.
<div ng-show="isValidData()">
<div class="jumbotron jumbotron-graphLabel" id="idchart">
<h2>{{circuit.classe}} Chart</h2>
</div>
<div class="jumbotron jumbotron-Graph">
</div>
</div>
I only show this second page content when the form data is valid but when I click the run button the page gets reloaded and I lose all the input data.
Help me please...
Related
I have an issue when trying to check a checkbox inside a form inside a modal.
Here the code
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
The problem is that i can't check that checkbox but if i came to it by tab clicks and then space it, it gets checked. anyone know how to made it checked by mouse click?.
Thanks.
It is working as you posted so you most likely have some JavaScript attached to it causing your issue.
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
Currently, I am using angular 2.0. In one of my HTML files I have code like
<div class="row">
<button class="btn btn-primary" (click)="addExtra">Add Extra </button>
</div>
How to add a div on click of this Add Extra Channel button.I need to have a div as mentioned below. Do I need add this HTML using typescript code?
<div class="row">
<div class="col-md-2">
<label for="title">Title</label>
</div>
<div class="col-md-8">
<input type="text" id="title" style="width:100%" class="form-control" />
</div>
</div>
You would wire the click to a function that adds to a list in the controller. You would then use an ngFor (docs https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html)` to loop through this list and add that template.
If at all both of the Htmls are in the same page.In the typescript file declare the variable addExtra and set it as false by default.And on click of button make it true.
<div class="row">
<button class="btn btn-primary" (click)="addExtra=true">Add Extra</button>
</div>
<div class="row" *ngIf="addExtra">
<div class="col-md-2">
<label for="title">Title</label>
</div>
<div class="col-md-8">
<input type="text" id="title" style="width:100%" class="form-control" />
</div>
</div>
I have an html form. For the image file input, I have a modal that pops up to set the input field but also allow the user to crop. When I submit the form, it says the input field is empty.
Here is the form with modal embedded:
<form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<h5>First Name</h5>
<div class="form-group">
{{ form.first_name|attr:"class:form-control"|attr:"placeholder:Enter Your First Name" }}
</div>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<button data-toggle="tk-modal-demo" data-modal-options="slide-down" class="btn btn-primary">Upload</button>
</div>
{{ form.crop_coords }}
<!-- Create the modal dynamically via Handlebars -->
<script id="tk-modal-demo" type="text/x-handlebars-template">
<div class="modal fade" >
<div class="modal-dialog">
<div class="v-cell">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Upload Profile Image</h4>
</div>
<div class="modal-body container">
<div class="max-width: 560px;">
<div>
<img style="max-width: 100%;" id="tempImg" src="{% static 'app/images/default-team-large.jpg' %}"/>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<input id="id_profile_image2" type="file" name="pic" accept="image/*">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</div>
</script>
<div class="form-group margin-none">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-sm btn-primary" href="nml-home.html"> Confirm User Changes<i class="fa fa-fw fa-arrow-right"></i></button>
</div>
</div>
</form>
To test, I click the data-toggle button to popup the modal. It then opens the tk-modal-demo which has a file upload. I upload an image and then I click the save button in tk-modal-demo to dismiss the modal. Then I submit the form with the bottom form submit button. My validator says that the field is empty.
How can I set this required form field from the modal and have it populated when I submit?
It might be that the modal input elements are not created inside the <form> element. Input elements outside of this container will not be sent to the server upon submit.
You can first check out what is actually transmitted with the development console of your browser (in Chrome it's the Network tab). If your fields aren't there, then you might need to write a bit of Javascript, to either:
copy the contents of the input elements inside the modal to hidden fields within the form, for using the regular submission process
or, hijack the submit event and manually compose which fields you want to send
I am a new user to simpleform (and html in general), and I am having trouble setting up a contact form for my jekyll website. This is the source I am using for my contact page. The email box seems to check for inconsistent input when submitted, but I don't get redirected or get any output.
Thanks in Advance!
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact</h2>
<h3 class="section-subheading text-muted">Thanks for Contacting Me!</h3>
</div>
</div>
<div class="col-lg-12 text-center">
<form action="http://getsimpleform.com/messages?form_api_token=2d6935f301203a8a2b595dfa0141a48a" method="post">
<!-- the redirect_to is optional, the form will redirect to the referrer on submission -->
<input type='hidden' name='redirect_to' value='http://www.google.com' />
<!-- all your input fields here.... -->
Name:<input type='text' name='name'/></br>
Email:<input type='email' name='email'/></br>
Message:<textarea name='message'></textarea>
<button type='submit' value='Submit Form'>Submit:</button>
</form>
</div>
</div>
</section>
I'm trying to create a simple modal form that would allow a user to enter a recipe and corresponding ingredients. I'm doing it as an express app (so using Jade) but I have converted the Jade to HTML and made a fiddle.
Strangely enough when running the app locally (accompanying screenshot)the alignment errors are different to the ones produced by the fiddle.
Excuse the HTML mess, I'm new enough to it and guilty of throwing whatever looked reasonable in the docs together.
The modal body HTML (what I imagine to be the offending piece of code) is shown below
<div class="modal-body">
<form id="submitRecipe" role="form" method="post" class="form-horizontal">
<div class="row">
<div class="form-group">
<input type="text" name="recipeName" placeholder="recipe name" autocomplete="off" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="form-inline recipeRow">
<div class="form-group">
<input type="text" name="ingredient" placeholder="ingredient" class="form-control"/>
</div>
<div class="form-group">
<input type="text" name="quantity" placeholder="quantity" class="form-control"/>
</div>
<div class="form-group">
<select class="form-control">
<option>g</option>
<option>tsp</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<input id="add-row" type="button" name="add-row" value="Add row" class="btn btn-default"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
Here is the updated fiddle applying James King's suggestion
Take out all the <div class="row"> and remove class="form-horizontal" from your form.
All the .row are giving you negative margins left and right, causing you to overflow the modal