Jquery of a HTML Input Element - javascript

JavaScript code:
$(document).ready(function(){
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
})
$(document).ready(function(){
$(".btn-adddata").click(function(){
$(".email-form").show();
$(".name-form").show();
$(".btn-form").show();
$(this).hide();
$(".btn-confirm").click(function(){
email = $(".email-input").val();
name = $(".name-input").val();
$(".email-input").val()="";
$(".name-input").val()="";
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
$(".btn-adddata").show();
});
$(".btn-cancel").click(function(){
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
$(".btn-adddata").show();
})
})
})
Details of my Webpage
Initially, there will only be .btn-adddata button in the webpage.
When the user clicks .btn-adddata button, it will be hidden and three hidden forms appear in the browser. First form contains only a fieldset which further contains an input box. Same is the case with the second form. While the third form contains two buttons .btn-confirm and .btn-cancel.
On clicking .btn-cancel, the page should be back to it's original state.
On clicking .btn-confirm, the page should come back to it's original state except that the user entered values in the input fields are stored in a variable.
But actually nothing was happening when I am clicking .btn-confirm button.
I couldn't figure out what's going on.
Some one please figure out the error for me.
Thanks in advance.

First of all, you should hide the form in your HTML using inline CSS so that they don't flash and disappear.
<form style="display; none">
Then you don't need to hide them in $(document).ready(...).
Secondly, you have a mistake in your event handler. You need add 3 click handlers, but instead, you have only one click handler, which adds two more click handlers every time the first button is clicked.
$(document).ready(function(){
$(".btn-adddata").click(function(){
// insert: code to show all forms and hide this button
}); // <-- you're missing this
$(".btn-confirm").click(function(){
// insert: code to get values
// insert: code to set values to ''
// e.g. $(...).val("");
});
$(".btn-cancel").click(function(){
// insert: code for cancel button
});
});

1st: First look -input").val()="" should be -input").val("") not equals
2nd: Personally I don't prefer events inside event
3rd: You can combine selectors $(".class1 , .class2 , #id1 , #id2 , ....")
$(document).ready(function(){
var If_adddata = false; // condition to stop confirm and cancel buttons to work until the adddata click first
$(".email-form , .name-form , .btn-form").hide();
// adddata click
$(".btn-adddata").click(function(){
$(".email-form , .name-form , .btn-form").show();
$(this).hide();
If_adddata = true;
});
// confirm click
$(".btn-confirm").click(function(){
if(If_adddata === true){
var email = $(".email-input").val(),
name = $(".name-input").val();
$(".email-input , .name-input").val("");
$(".email-form , .name-form , .btn-form").hide();
$(".btn-adddata").show();
}
});
// cancel click
$(".btn-cancel").click(function(){
if(If_adddata === true){
$(".email-form , .name-form , .btn-form").hide();
$(".btn-adddata").show();
}
})
})

Related

My Jquery animation is not working, nothing is showing up

$("#run_anim").click(function(){
var box = $('.anim_box')
box.show()
//going to add more this is just for testing
})
On my site (torin.eschweb.com) I am trying to make an animation and so far all I have is the part to make the div show when you press the button but nothing is showing up.
Please wrap adding event listener to a jQuery ready method
$(document).ready(function() {
$("#run_anim").click(function(){
var box = $('.anim_box')
box.show()
//going to add more this is just for testing
});
});

change a input field value on change

I'm using a modal, the thing is that I want to change the value of an input field based on it. If modal is open value is "Update" when the modal is not displayed, the value is "create".
I tried like this but since it is executed only one time on page load it's not what I want.
if (($("element").data('bs.modal') || {}).isShown) {
$('#action-description').val('Update');
} else {
$('#action-description').val('Create');
}
And the input field:
<input type="text" id="action-description" name="action-description" value="">
I need to make something on change so I also tried like this:
$('#modalElement').on('hidden', function(){
$('#action-description').val('Create');
});
But I can't make it work!
Your logic is correct. You can just convert it to a function and open the modal using jquery only.
So, write a function as:
function openModal(){
$('#myModal').modal('show');
if (($("element").data('bs.modal') || {}).isShown) {
$('#action-description').val('Update');
}
}
Also you can write a similar function to close the modal on clicking cross or cancel button(if you have any)
function closeModal(){
$('#myModal').modal('hide');
$('#action-description').val('Create');
}

Hide / Show Multiple Divs

I am trying to create a form that has various hide/reveals in it and one of the last parts I need to do to this form is SHOW the payment information fields when only Credit Card is selected.
I have a test page setup here: http://www.faa.net.au/test/femmes-member-form.html
Process so far is:
Enter your details
Select Event Date
Selecting Member + 1 or more Guests ask for payment details
At the moment, I have displayed the 3 DIVs that I want to appear depending on the radio selection made but when I hide these, the code I have in place at present doesn't work.
Can anyone help me here at all please?
If you need the code, please let me know, with a number of different elements involved I didnt want to paste the whole thing on here, hopefully you can see the Source Code?
Here is the Javascript I have at present but not sure if its this that is wrong or if its clashing with something else?
<script type="text/javascript">
$(function() {
$('.cat_dropdown').change(function() {
$('#payMethod').toggle($(this).val() >= 2);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".payOptions").click(function () {
$(".paymentinfo").hide();
switch ($(this).val()) {
case "Credit Card Authorisation":
$("#pay0").show("slow");
break;
case "Direct Deposit":
$("#pay1").show("slow");
break;
case "Cash Payment (FAA Office)":
$("#pay2").show("slow");
break;
}
});
});
</script>
As per viewing code from View Souce and guessing that you have not added correct class in event handler. thus click event for radio is not getting invoked.
Change
$(".payOptions").click(function () {
to
$(".paymentmethod").click(function () {
You have not posted any source, but if you are using jQuery, you can simply do:
$(".commonclass").hide();
Provided that all 3 divs have the "commonclass" class.
Process goes something like this:
Start clean: hide all payment methods
Your radio inputs have paymentmethod class, so attach a change event listener to those elements
When one of the radios is selected, hide all of the payment methods, determine the one you want to show using index, and show that div
$('#pay0, #pay1, #pay2').hide();
$('input.paymentmethod').on('change', function(){
$('#pay0, #pay1, #pay2').hide();
var selected = $('input.paymentmethod').index($('input.paymentmethod:checked'));
$('#pay'+selected).show();
});
Used to jquery as like this
Css
#pay0, #pay1, #pay2{display:none;}
Jquery
$(document).ready(function(){
$('#payment').change(function(){
if($('#CAT_Custom_255277_0').attr('checked')){
$('#pay0').show();
$('#pay1').hide();
$('#pay2').hide();
}
else if($('#CAT_Custom_255277_1').attr('checked')){
$('#pay1').show();
$('#pay0').hide();
$('#pay2').hide();
}
else if($('#CAT_Custom_255277_2').attr('checked')){
$('#pay2').show();
$('#pay0').hide();
$('#pay1').hide();
}
});
});
Demo
As per my understanding, you're trying like below,
select value from dropdown, if the value !== "1" then show payment radio buttons
Based on the radio button selection, you want to show the respective div
From viewing your source code, it seems you're using jQuery lib and there use this
$(document).ready(function() {
$('input[type=dropdown]').on('change', function(){
if($(this).val() !== 1)
{
$('input[type=radio]').show();
}
}
$('input[type=radio]').on('change', function(){
if($(this).val() === "Credit Card Authorisation") {
$('#pay1').hide();
$('#pay2').hide();
$('#pay0').show();
}
else if($(this).val() === "Direct Deposit"){
$('#pay0').hide();
$('#pay2').hide();
$('#pay1').show();
}
else if($(this).val() === "Cash Payment (FAA Office)"){
$('#pay0').hide();
$('#pay1').hide();
$('#pay2').show();
}
});
});
Hope you understand.

click a button from a java-script function

I am trying to get a java-script function to click a hidden button in order to execute some code. I wrote a short program to try and test this method.
Here I establish two buttons.
<div><button>test</button></div>
<div class="rowHidden"><button id="testHiddenButton">open the dialog</button></div>
Below is my java-script.
function clickTestButton() {
$("#testHiddenButton").trigger("click");
}
$("#test").click(function () {
clickTestButton();
});
$(#"testHiddenButton").click(function () {
alert("TESTTTTTTTTTTTTTTTTTTTT");
});
The idea is that when the first button is clicked, it triggers the next button to click. This does not work though. It seems like the page processes something but the alert never goes off. Any ideas?
Two errors
Error 1: You have to declare an id for the first button
<div><button id="test">test</button></div>
<div class="rowHidden"><button id="testHiddenButton">open the dialog</button></div>
Error 2: The # needs to be inside the selector string.
$("#testHiddenButton").click(function () {
alert("TESTTTTTTTTTTTTTTTTTTTT");
});

Jquery UI Dialog Remove Issue

Back from this issue
Multiple Dialog
I was able to solve the issue but now problem is that it removes the div so when I access that Div it give error. It gives error because when I open dialog it works fine after removing on close it gives e.rror
I don't want to removed jQuery('#divPopup') If there is only one div present. If multiple jQuery('#divPopup') are there remove() should be working fine.
jQuery('.register_button_class').live('click',function () {
var iFrameobj = createIframe('',iframeUrl);
jQuery('#divPopup').html(iFrameobj);
createDialogWithClose(url,'#bodyId');
return false;
});
Dummy Div for Dialog Popup, This get removed, when Click on Close Jquery Ui Popup.
So when I say
jQuery('#divPopup').html(iFrameobj);
It gives error.
<div id="divPopup"></div>
I'm assuming that your function:
createDialogWithClose(url, '#bodyId');
removes the div id="divPopup" each from the DOM when you close it.
I would suggest not initially including that div in your markup and change your function to create the div and append it to the DOM when it runs. Then remove like you're already doing.
jQuery('.register_button_class').live('click',function () {
var iFrameobj = createIframe('',iframeUrl);
jQuery("body").append("<div id='divPopup' />").html(iFrameobj);
createDialogWithClose(url,'#bodyId');
return false;
});
It's hard to tell what other issues you may be running into with this bit of code that you posted, however, jQuery("body").append("<div id='divPopup' />").html(iFrameobj); will create the divPopup each time the function runs. So, when you close it and it gets removed it will just get created again the next time that button is clicked.
EDIT: How to check if a Div exists -
if ($("#divPopup").length > 0){
// do something here
}
I solved like this
var length = jQuery('#divPopup').length;
if(length>1)
{
jQuery('#divPopup').dialog('destroy').remove();
}else
{
jQuery('#divPopup').dialog('destroy');
}

Categories