I'd like to create a form where I have checkboxes, and when clicked, they open separate textareas for the user to enter more information in.
If I want to use Django's dynamically created form fields, is there a way that I can put a function call in for each checkbox.
You can dynamically add event handlers using JavaScript. You can add a script that, once the page is loaded, will find all checkboxes you want and add the handlers there. In jQuery, you can write something like this:
$(document).ready(function() {
$(".my_form input[type=checkbox]").change(function() {
//Some code here
});
});
Be careful, I have not tested the code above! But should be enough to get you started.
Related
I am using a Wordpress plugin to create a form and unfortunately the plugin doesn't allow to add onClick code and I would like to use Google Event Tracking to perform analytics on the form. What Javascript would I need to be able to add this:
onClick="_trackEvent ('Home', 'ButtonClick', 'Submit')"
To my form button? The ID of the form button is ninja_forms_field_10
Thank you!
It would need to be something like this (using jQuery since it is built in to Wordpress by default):
$('#ninja_forms_field_10').click(function() { _trackEvent('Home','ButtonClick','Submit'); });
Since you need to pass parameters to the function you need to call, you have to wrap it in another function which will then call it.
On my page, I have a form with three <select> drop down lists. All these lists use DropKick to make them look nice.
With DropKick added, the DDLs are no longer conventional lists and so cannot be accessed as such.
From what I've found, you can only call onchange by setting a class on the <form> tag and then using the following script:
function submitIt(){
alert('test');
}
$('.deviceChosen').dropkick({
change: submitIt
});
This works, and alert shows. But also doesn't work for a couple of big reasons.
The first <select> field is the only field that gets shown as a result. And everything else on the web page after that element gets removed from the page.
So what I have is three DDLs and I want to be able to set up a function that gets called when the deviceChosen id DDL gets changed. I don't want an onchange event for the other two lists.
Is this something that is doable?
I've tried things like the below, but it just will not work.
$('#deviceChosen').on('change', function() {
alert('dsf');
});
I couldn't get this working, so I ended up using selectBox instead
http://labs.abeautifulsite.net/jquery-selectBox/
I am able to makeit work, you can use the below mentioned code for sample purpose.
$("#ID_OF_SELECT_TAG").dropkick({
change: function (value, label) {
//Logic that you want to apply onchange event.
}
});
Thanks
I have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.
I'm pretty new to Jeditable and I was wondering if there is a way to generate and submit a custom form with multiple fields instead of just one field?
I've taken a look at this tutorial for some hints and I've made a bit of progress. I'm not sure if I'm on the right track though.
Here's one idea where you can save whatever has been edited in the form. Give the inputs in the form a certain class, call it "my_form". Create a button that initializes the my_form class with JEditable by creating a function called makeEditable(). Also make the Save button have a class which we'll call save_button.
$(function(){
function makeEditable() {
$(".my_form").editable('MyPhpPage.php', {
// YOUR CUSTOMIZATION
submit : '<button class="save_button">Save</button>',
});
makeEditable();
});
You can finally send all the modified data with with a "Submit" button of class "save_button", and that's accomplished with $('.my_form').find('.save_button').click();.
This may be not robust enough for your form as you might want to create constraints such as require all of them to be non-empty. You then just need a bit more JQuery code to do so.
I am currently using a javascript code to make an entire row in my table clickable. Once the row is clicked a function is ran, I am wondering what I can use to redirect to a PHP page and preferably send a post variable along with it. My guess is AJAX but I am not sure how or if it would work.
Javascript
function DoNav(theUrl) {
document.location.href = theUrl;
};
HTML
<tr onclick="DoNav('myphpscript.php');">
I have access to jQuery so that is also an option. Any help is appreciated, Thanks!
If you need to POST the data (not use GET), One easy option is to create a form element on the fly, attach input elements with the values you need and submit it. You can do that like so if you use jQuery:
$(function() {
$('tr').click(function() {
var mail_id = /* get the mail id of this row... not sure where since I dont' have the HTML */
$('body').append('<form method="post" action="myphpscript.php" id="donavform" style="display:none;"></form>');
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
$('#donavform').submit();
});
});
Hope that makes sense. If not, let me know! It's, okay...
Explanation:
The very first line is a jQuery shortcut way of saying "when the document is done loading..." So, when the page is done loading, I'm going to attach an event listener to all elements in the document. When one of those elements is clicked, we can then extract the mail id (and whatever else you need) that is in relation to that particular table row. So, if you had HTML like this:
<!-- 8435 is the mail ID in this example. -->
<tr id="row3">8435</tr>
Then we could extract the mail_id variable like so:
var mail_id = $(this).html();
Now, we are going to attach a hidden form element to the end of the body of the HTML (it doesn't really matter where we put it since it is hidden... so, the end is fine). In this form element, we set the method to POST and the action to whatever php file you need to POST to. I also set an ID so it's easily referred to in the next step.
I'm now going to select the newly-created form element using its ID and I'm going to append a new hidden input element to it with the appropriate name value pair.
$('#donavform').append('<input type="hidden" name="mid" value="'+mail_id+'" />');
Finally, I'm going to use the jQuery JavaScript submit method to trigger the submit event on the form. This is basically equivalent to pressing the 'submit' button on a normal form.
Try it out, it should work flawlessly.
If you're going to a new page, just submit the form as usual. Put the data in form fields (hidden if required). No need to Ajax, jQuery or any other magic unless you want to stay on the same page and post in the background.
If the amount of data is not ridiculously large, use a query string...
<tr onclick="DoNav('myphpscript.php?key=value');">
Or if you need a natural HTTP post, you can programmatically submit the form with Javascript...
onclick="document.forms[0].submit();"
You could send the data along in a cookie. There's a nice jQuery plugin that helps with setting cookies in the jQuery namespace.
http://plugins.jquery.com/project/cookie