How to make an Submit button using Django Forms with html - javascript

I am making a website in Django in which I am using Django Form ,an my fields are
admin = forms.BooleanField(
required=False,
widget=forms.CheckboxInput(),
label=(u'Admin for the account')
)
owner = forms.BooleanField(
required=False,
widget=forms.CheckboxInput(),
label=(u'Owner for the account')
)
In my html page I want a submit button,On clicking which it will show a pop up ,In which you have an OK button,On clicking which the value of owner (Checkbox) will go.

This is from the documentation of Form class
Note that it does not include the <form> tags, or a submit button. We’ll have to provide those ourselves in the template.
As for following additional functionalities:
In my html page I want a submit button,On clicking which it will show
a pop up ,In which you have an OK button,On clicking which the value
of owner (Checkbox) will go.
You will need to write custom javascript functions if you want to do this. You can use jquery plugin for this. There is more documentation on submitting the form using jquery and additional handling here.

You have to include submit button manually in the html.
Sample Code: Note that I used bootstrap Modal.
<form action="" method="post">{% csrf_token %}
<!-- your input field will go here -->
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Submit</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<input type="checkbox" name="user" value="user"><br>
<input type="submit" value="Okay">
</div>
</div>
</div>
</form>

Related

How do I upload a pdf file after entering an email?

I have a section on my site with a list of pdf files (it looks like this image 1). I need a popup to appear by clicking on the "download" button and there were inputs for the email and name. And only after the user entered this data, the download began.
I have a static site, so there is no need to do php sending yet. I'm just trying to make the download only after entering the email and name.
My popup is made with bootstrap. Here is the code for the individual item.
<article class="pdf-block__item pdf-block-item col-md-4">
<div class="pdf-block-item__img">
<img class="pdf-block-item__img-image" src="images/banner.jpg" alt="pdf-img">
</div>
<div class="pdf-block-item__title">
PDF item test 1
</div>
<div class="pdf-block-item__text">
In this eBook you will learn 21 key KPIs that will form the building blocks in
your marketing reporting and how to develop the ultimate dashboard for your SaaS business.
</div>
<div class="pdf-block-item__button">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
download
</button>
</div>
</article>
You can use JavaScript validation for this.
First, you have to write a JavaScript function as given here and map it to the download button. After checking your Name and Email fields, you can redirect to the PDF document to download.
JavaScript validation: https://www.w3schools.com/howto/howto_js_validation_empty_input.asp
Redirecting: https://www.w3schools.com/howto/howto_js_redirect_webpage.asp
Note: If you use just a script without any server-side validation like using PHP, techie users can find the URL from the script and take the PDF directly.
You Have to Add a form in Your Popup modal with Required Fields and Then add the download button as submit button. And Add Your File URL in the form action.
Eg:
<form action="Your_Download_URL">
<input type="text" placeholder="Name" required> <!-- Name input with required tag -->
<input type="email" placeholder="Email" required><!-- Email input with required tag -->
<button type="submit">Download</button>
</form>
This Will also Do Not Send any Form Data to Your Download URL.

Radio buttons from bootstrap V3.X adds name of radio into URL involuntarily

I am trying to use a radio button to determine where to redirect a user when they press enter.
Problem I have is when I select the radio button and press enter key the URL is populated with "searchpage?searchradios=animalname"
Below is a snippet with a basic example
picture showing the involuntary addition to the URL
<div class="row">
<div class="col-xs-6" align="center">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" name="searchradios" value="animalname">Animalname
</span>
<input type="text" class="form-control" aria-label="...">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
The plan is to have a button that triggers a script that will determine the selected radio button and determine which page to redirect to using window.location.href, but with the text field automatically adding information about the radio button to the URL the href does not work and only reloads the page with the unwanted information in the picture.
Without seeing your whole form it is hard to know, but it seems you are doing a GET and not a POST.

Bootstrap remove modal content issue

I know that this question is a duplicate, but i can't find a matching answer for my problem. I am using boostrap 3.2.0 and I have this modal:
<div class="modal fade popup" id="popupSelect">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Select meal</h4>
</div>
<div class="modal-body-select">
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select name="selectCategory" class="form-control selectCategory"
id="selectCategory">
<option value="0">Select category</option>
<c:forEach items="${categories}" var="category">
<option value="${category.text}">${category.value}</option>
</c:forEach>
</select>
</div>
</div>
<br>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Meal</label>
<div class="col-lg-10">
<select name="selectMeal" class="form-control idMeal" id="selectMeal">
<option value="0">Select meal</option>
</select>
</div>
</div>
<input type="hidden" value="-1" id="hSelectIndex"/>
</div>
<div class="modal-footer">
Close
<input type="button" class="btn btn-warning buttons btnSaveChanges"
value="Save Changes" />
</div>
</div>
First time when the modal is loaded the content is correct. After closing the modal, every time the loaded content is the one selected first time.
I tried to remove the data content using:
function removeModalContent(){
$('#popupSelect').on('hidden', function () {
$(this).removeData();
});
}
But it is not working! What i am doing wrong?
Every time the select button is pressed the modal is loaded. And i need to clear the content every time the modal is "hidden".
When I work with modals I always prefer to clear any user interaction before poping it up. This is how I do it:
1) Subscribe to button click event in order to show the modal window:
$("#btnSearchCustomer").click(function () {
searchCustomers($(this));
});
2) The function searchCustomers shows the pop-up window.
function searchCustomers(btn) {
btn.attr("disabled", "disabled"); // disables the button to avoid loading data more than once
clearSearchForm(); // clears any user input
// checks if the modal has all the data loaded (to avoid loading on start)
if (!searchForIsLoaded) {
loadSearchForm(); // loads any necessary data from the DB using AJAX
searchForIsLoaded = true;
}
$('#mdlSearchForm').modal('show'); // shows the modal window
btn.removeAttr("disabled"); // enables the button again
}
You need to implement the function clearSearchForm for cleaning any field the user has modified.
3) Subscribe to OK button on modal window and do something with user input
4) Hide modal form
I hope it helps
I'm not entirely clear on what your problem is, but first things first, in Bootstrap 3 the event that is fired when a modal is hidden is not hidden, it is hidden.bs.modal (See Bootstrap Docs, under heading 'Events'). So this...
$('#popupSelect').on('hidden', function () {...
will not fire. Change it to...
$('#popupSelect').on('hidden.bs.modal', function () {...
I'm also not clear why that is inside a function called 'removeModalContent'. Really you want to set up the event handler on load. What you would have to do in your current case is call that function just to set up the event listener.
Like I said, not entirely sure on your particular circumstances/problem so if this doesn't help or I am missing something let me know and I'll have another look.

Form AJAX send inside a twitter bootstrap modal (Symfony2)

After trying every google and stackoverflow result for this, I've decided to ask for your help.
I'm building a Symfony2 app. Within every view of my app, I'm including a twitter bootstrap modal element, with a form that sends a suggestion/question mail. So, from my base twig template, I include this hidden modal.
Modal showing/dismissing works just fine. Modal contains my form, as desired.
What I'm trying to achieve from here is: AJAX submit of the form, mail sending in the controller, response to the view. With that response being json, and a success function to change html of the modal to "*dismiss_button*" + "Email sent" OR "There was a problem".
Seems fairly simple. Well, after trying most solutions out there, I'm not able to prevent the form from submitting. So I decided to keep it really really simple.
Here, the modal code:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Send your suggestion</h3>
</div>
<div class="modal-body">
{% if is_granted('ROLE_USER') %}<p>We will reply to {{ app.user.mail }}</p>
{% else%}<p>Don't forget to include a reply-to email in your suggestion.</p>
{% endif %}
<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
<div class="control-group">
<label for="username">Text:</label>
<div class="controls">
<textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="butt" class="btn btn-success" value="Send">
</div>
</form>
</div>
And, the JS:
<script type="text/javascript">
$("#butt").on('click', function(e) {
e.preventDefault();
});
</script>
After trying everything, I've reached the point in which THIS javascript does not prevent the form from submitting.
What am I doing wrong?
Thanks in advance.
#gomman Check up the following documentation: http://api.jquery.com/submit/
I think you need to cancel the submit-event of the form element to make it work the way you want.
#Fuser Although delegate() is a bit more readable to me, using on() or delegate() will do the same for this case. Citing jQuery documentation "As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation."
try this:
<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
<div class="control-group">
<label for="username">Text:</label>
<div class="controls">
<textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="butt" class="btn btn-success" value="Send">
</div>
</form>
<script type="text/javascript">
$("#arrt").submit(function(e) {
e.preventDefault();
});
</script>
Don't use the on() function, instead use a delegate, try this:
$("#arrt").delegate("#butt", "click", function(e){
e.preventDefault();
});

Replacing the JS confirm(...) box with a custom HTML one

I have a HTML button that goes to a page once it has been clicked and a JS confirmation button has been pressed:
<button onclick="return confirm("Are you sure?");
window.location="some_page.php"
type="button" class="btn">Some text
</button>
I want to replace the JS confirmation with a much nicer looking confirmation. I want to use Twitter's bootstrap Javascript 'modal' library (http://twitter.github.com/bootstrap/javascript.html#modal) to achieve this. I already have the HTML written to be the confirmation box:
<div id="modal" class="modal hide fade">
<div class="modal-header">
<h2>Some title</h2>
</div>
<div class="modal-body">
<form>
<fieldset>
<div class="clearfix">
<label for="something">Something</label>
<div class="input">
<input class="xlarge" id="something" size="30" type="text">
</div>
</div><!-- /clearfix -->
</fieldset>
</form>
</div>
<div class="modal-footer">
<input id="close" class="btn" type="button" value="Cancel" />
<input id="close" class="btn primary" type="button" value="Done" />
</div>
</div>
How to I get the onclick event to display my new popup rather than the standard JS confirmation?
Thanks so much :).
I use the jQueryUI Dialog in place of the standard confirm option http://jqueryui.com/demos/dialog/#modal-confirmation
You specify your own buttons in the modal, so you can have "Are you sure?" with buttons "Yes" and "No"
What about window.showModalDialog ?
You can either redefine confirm:
confirm = function(text,yes,no) {
// show the modal window
// set "yes" button to call yes()
// set "no" button to call no()
}
Or what I did, which is to define a custom function and use that instead. I used Confirm, since JS is case-sensitive, but you can use anything.

Categories

Resources