In my form there are some radio buttons - when the radio is selected - the div appears, when another one is selected - the div hides. After submitting a form if there are some errors, page reloads and the div should still show (if the radio was selected). The solution below works only for checkboxes - how to make it work for radio's? https://stackoverflow.com/a/8406409/1137417
Here is my code:
$(function(){
$('#Q07_03, #Q07_07, #Q08_03').hide();
// checkboxes
$('#Q07_03').toggle($('#Q07_02').is(':checked'));
$('#Q07_02').click(function() {
$('#Q07_03').toggle(); });
$('#Q07_07').toggle($('#Q07_06').is(':checked'));
$('#Q07_06').click(function() {
$('#Q07_07').toggle(); });
// here code for radio ?
// #Q08_03 is the div to be displayed;
// #Q08_02 is the one that should be selected
})
Why don't you use ajax to submit the form? You will not face these kind of issues. Well to answer your question you can try this.
//I don't know how many radio buttons are there on the page and what there names are
//you can accordingly change the radio button selector to check if it is checked or not
$(document).ready(function() {
if($("input:radio:first").is(":checked"))
$('divToShowHide').show()
else
$('divToShowHide').hide()
});
Related
Hello I have a contact form I want to do it with PHP. And I have the submit button, I want when all fields are ready to press, when the email was send to change my button. First in my button is a text with background color yellow and the text is "Send". When I press the button and the email is sent I want to change the background color in red and I want to add an icon aside to text, the text is modifed in "Sent". How can I do this?
<script src="jquery.min.js"></script>
<script >
function button(){
//your ajax code for sending data
/* function retrieveData(){
$.post('server.php',{}, function(data){
});*/
$("#button").attr('value', 'Sent');
$("#button").css("background-color","red")
}
</script>
<input type="button" id="button" name="button" value="Send" onclick="button()">
Try this. You can do it with javascript.
You have a form with some inputs and a submit button.
You want to manipulate the submit button after all of the form fields were filled-in, and finally manipulate it again once the submit button was clicked.
What you need to do is to write a little javascript (either plain vanilla or jQuery, choose what suits you best) to handle two things in your form
Your form's input fields (for first submit button change):
Attach an event to the input fields to check for validation as you wish, and change the submit button accordingly.
Your form's submit button (for the second submit button change):
Attach a click event to the submit button (and make sure to prevent the default, so once the submit button was clicked, it will be manipulated in the way you wish.
I have wrote you an example, where in my scenario I have two input in my form and a submit button which is disabled and greyed-out by default.
As soon as all form fields are filled-in (not empty), the submit button becomes active (disable attribute removed and color change) - finally when the submit button is being clicked, it will change it's color to green as an indication that it was clicked.
$('#myForm input').on('keyup',function(){
var validated = true;
$('#myForm input').each(function(){
if($(this).val() === ''){
validated = false;
}
});
if(validated){
$('#submitBtn').removeClass('disabled').prop('disabled',false);
}else{
$('#submitBtn').addClass('disabled').prop('disabled',true);
}
});
$('#submitBtn').on('click',function(e){
e.preventDefault();
e.stopImmediatePropagation();
$(this).addClass('submited').prop('disabled',true);
// the rest of your code for submission..
});
Here's the simple fully working example:
https://jsfiddle.net/wx9gonrh/
Of course you can use this example and modify it to your own needs, or write your own from scratch using this as guidance.
In your case you might want to incorporate an async method for changing the submit button only after the emails were successfully sent (e.g. an ajax complete\done event)
Hope it helps!
I think it has to do with how select2 creates the actual dropdown outside of the element it is based on.
Is there a way to suspend the cells "blur" activity until the user has made a selection, or in general just make the select2 more usable inside the kendo grid?
I hastily made this jsfiddle. I put the select2 inside the first column.
function testEditor(container, options) {
var customInput = $('<select name="' + options.field + '" data-text-field="text" data-value-field="id" />');
var scheduleContactSelect =
customInput
.appendTo(container)
.select2(
{
data: ["test1", "test2"]
});
}
http://jsfiddle.net/zaq3a3o5/
As you can see, the moment you start interacting with the select2, the cell closes edit mode but leaves the select2 hanging.
So it turned out the solution was three parts.
Use the "dropdownParent" select2 config option to make sure it appends the disconnected dropdown part inside the same element.
Make sure you are using Select2 4.03 or higher. (I had to upgrade to 4.03)
Define the "focusout" event while inside the "select2:open" event for the select2 search box so we can preventDefault() and stopPropagation() to prevent "focusout" from bubbling up.
I'm trying to use collapsible panels to show and hide data and am using glyph icons also to show the state. Initially on start up the glyph icons were not showing correctly (wrong states) but I found a fix for this using JS.
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
See this JSFiddle working correctly (i.e. icons show the correct state on start up and when minimizing and maximizing the individual collpasible panels)
However, I then put these 2 collapsible panels into a simple collabsible button (readmoreless) so these are only shown when the Read more button is presssed and hidden when Read less is pressed.
I added some JS for this to toggle the text on the button (from Read more to Read less) when the button is pressed.
$(document).ready(function(){
$("#readmoreless").on("hide.bs.collapse", function(){
$(".btn2").html('Read more');
});
$("#readmoreless").on("show.bs.collapse", function(){
$(".btn2").html('Read less');
});
});
However the addition of this collapsible button area now breaks the panel icon states. They both seem to be affected by clicking on the Read more/Read less button and also both are affected when collapsing/opening one of the panels. The states of both panel area icons are always the same as each other even though one might be open and one closed.
See updated broken JSFiddle here.
Has anyone got any ideas how I can make this work?
Thanks!
I've replaced the .collapse with .panel-collapse to fix the icon states and changed the way you replace your text (read more / read less) by overriding the text() function return inside the click() function of your button.
Here is what you should insert to your JS
//Change icon states
$('.panel-collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
//Read more or less
$(document).ready(function () {
$(".btn2").click(function () {
$(this).text(function (i, text) {
return text === "Read more" ? "Read less" : "Read more";
})
});
});
JSFiddle
text() - function
I have a question about making input fields required before being able to click a input button (not submit button). My code below only will send out the requirement notice after a submit button is click.
I have my form split into 3 div's with 'next' buttons in between which conditionally displays the next div. How do I make the input field to be required before the 'next' button brings up the next div portion of my form?
You should post the html for your question. It is missing. That being said, look into the blur event that gets trigger everytime an input loses focus. You could add the logic to display an error to the user and disable the next button.
http://www.w3schools.com/jquery/event_blur.asp
You have two main options:
FIRST OPTION
You could disable your button like so: <input id="but" type="button" disabled>, and then, you could set your field onchange method to enable the button i. e. <input type="text" onchange="changed();"> and in your script,
function changed(){
if(1 == 1){ // custom test
document.getElementById("but").disabled = false;
}
}
SECOND OPTION
In your button handler, verify your textfield is filled i. e.
function butHandler(){
if(document.getElementById("textfield").value !== "") {
// do your actions
}
}
Link to form
The form can be found at the link above.
Up until this morning the radio buttons and the form had been working as expected, however now users can't change their answer once they've picked from one of the two radio buttons even though they use the same input name. Using $("#volunteer-form input:radio[name='gender']:checked").val() I've found that the value is being correctly set and that the two buttons are still linked by a common name. Also, it appears possible to switch between the two using a bit of jQuery, like so:
$("#volunteer-form input[name=gender][value=male]").prop('checked', true);
Any ideas?
its because of your javascript block here:
$(document).ready(function() {
$('.inline').fancybox({
'maxWidth': 600
});
$('.form').click(function(event){
event.preventDefault();
});
});
when you are clicking on the radio button inside the form your preventDefault is stopping the change of radiobutton state ... or maybe you already knew that.
What is the intended purpose of including the preventDefault where you have it?