I have two json files "a.json" and "b.json". I need to show a different form when the user clicks each of the different buttons. My issue is that when I click on the first button it show the first form, but when I click on the second button it doesn't show the second form. I need to show one form at a time, i.e. when I click the second button it removes the first form and shows the second form.
$scope.getFromAFile= function () {
// body...
var inputs=[];
$http.get('a.json').success (function(data){
var a=changeData(data);
$scope.formFields=[]
console.log('pp');
console.log(data.studentName);
console.log($scope);
$scope.formFields = a['input'];
}).error(function(err){
alert(err);
});
}
$scope.getFromBFile= function () {
// body...
$http.get('b.json').success (function(data){
var a=changeData(data);
console.log('pp');
$scope.formFields=[]
console.log(data.studentName);
console.log($scope);
$scope.formFields = a['input'];
}).error(function(err){
alert(err);
});
}
here is plunker
http://plnkr.co/edit/tuMl02QcvZkCCIJPTW0r?p=preview
Dont mix JQuery with AngularJs
you can use ng-click and ng-show for achieving such Task
<button ng-click="hideFormOne()">Hide Form One</button><!-- Hides Form One & Shows Form Two -->
<button ng-click="hideFormTwo()">Hide Form Two</button><!-- Hides Form Two & Shows Form One-->
<form ng-show="showFormTwo">
:
:
<form ng-show="showFormOne">
:
:
script
$scope.hideFormOne = function()
{
$scope.showFormOne = false; // Hides Form One
$scope.showFormTwo = true; // Shows Form Two
}
$scope.hideFormTwo = function()
{
$scope.showFormTwo = false; // Hides Form Two
$scope.showFormOne = true; // Shows Form One
}
If i understand u can use hide() function:
on document load u need hide both forms:
$('#form1').hide();
$('#form2').hide();
And on button click:
$('#button1').click(function(){
$('#form1').show();
$('#form2').hide();
});
$('#button2').click(function(){
$('#form1').hide();
$('#form2').show();
});
You can have two forms, eg formA and formB.
And then if user click on formA, hide formB or click on formB then hide formA.
Example if clicked formA:
$('formA').hide();
$('formB').show();
And example if clicked formB:
$('formA').show();
$('formB').hide();
Here is Plunker Demo
Related
i want to create a confirmation form on elementor using elementor form but the next section it can shown depends on the user select the button.
i.e if i choose button A, section A will shown but if i choose button B, section B will shown. both of them will be hidden if no one fill out the form. i already use this code and it works
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display:none;
}
.shown{
display: block !important;
}
</style>
<script>
var btn1 = document.getElementById("submitbutton");
var btn2 = document.getElementById("form-field-nohdr");
//Click Event Handlers for buttons
btn1.onclick = function(event){
event.preventDefault();
toggleDivs("yes");
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("no");
};
//function to hide or show
function toggleDivs(s){
//reset
document.getElementById("yes").classList.remove("shown");
document.getElementById("no").classList.remove("shown");
//show
document.getElementById(s).classList.add("shown");
}
</script>
but the problem is the data on the form not submitted to elementor. can anyone help me to solve this? what script that i need to use to submit the button? if you have another option for submit the data to database/googlsheets is also very nice! thanks
To do something after form submitted, you should add event handler to Elementor jQuery submit_success event.
Example: (submit_success example article)
jQuery(document).on('submit_success', '#your_form_id', ()=>{
jQuery('.some_element_selectors').hide()
})
Based on your question, I guess you are using some buttons outside of the form for condition checking.
I suggest you to add radio input with options "Yes" and "No" to replace it.
Example:
// my radio input id is subscribe, required
var decisionValue = '';
// capture the radio input value when changed
jQuery(document).on('change', 'input[name="form_fields[subscribe]"]', ()=>{
// get my subscribe radio input value, possible values are "Yes" or "No"
decisionValue = jQuery('input[name="form_fields[subscribe]"]:checked').val();
})
// custom handler on elementor form submit_success
jQuery(document).on('submit_success', '#your_form_id', ()=>{
// console.log(decisionValue);
if( decisionValue == 'Yes' ) {
jQuery('.sectionA').hide();
} else {
jQuery('.sectionB').hide();
}
})
If you still want to use those buttons, then you might need to add trigger('click') or click() workaround to submit the form.
I have a custom shipping method on WooCommerce that should show a little box with information to user, only when that custom shipping method is chosen.
So far I have tried with this little code:
jQuery(document).ready(function($) {
$(document).on("change", "#shipping_method_0_my_shipping_method", function() {
if( $("#shipping_method_0_my_shipping_method").prop('checked') == true ){
$('.custom-box').show();
} else {
$('.custom-box').hide();
}
});
});
And it shows the .custom-box just fine when that custom shipping method is chosen. But it does not hide it for some reason, when I choose some other shipping method?
Also it does not show the box if my custom shipping method is chosen on page load, but if I click on some other shipping method, and then my custom shipping method, it will show the box fine.
Working now perfectly. Thanks for the working solution for Томица Кораћ at below!
Try this script:
jQuery(document).ready(function($) {
// Create reusable function to show or hide .custom-box
function toggleCustomBox() {
// Get id of selected input
var selectedMethod = $('input:checked', '#shipping_method').attr('id');
// Toggle .custom-box depending on the selected input's id
// Replace 'shipping_method_0_my_shipping_method' with your desired id
if (selectedMethod === 'shipping_method_0_my_shipping_method') {
$('.custom-box').show();
} else {
$('.custom-box').hide();
};
};
// Fire our function on page load
$(document).ready(toggleCustomBox);
// Fire our function on radio button change
$('#shipping_method input:radio').change(toggleCustomBox);
});
Let me know if this works for you.
Edit
I've updated the script. Please try this and let me know if it works:
jQuery(document).ready(function($) {
// Create reusable function to show or hide .custom-box
function toggleCustomBox() {
// Get id of selected input
var selectedMethod = $('input:checked', '#shipping_method').attr('id');
// Toggle .custom-box depending on the selected input's id
// Replace 'shipping_method_0_my_shipping_method' with your desired id
if (selectedMethod === 'shipping_method_0_my_shipping_method') {
$('.custom-box').show();
} else {
$('.custom-box').hide();
};
};
// Fire our function on page load
$(document).ready(toggleCustomBox);
// Fire our function on radio button change
$(document).on('change', '#shipping_method input:radio', toggleCustomBox);
});
I have a form with multiple divs with same names (full-width). They all are on the same level. One of them is hidden (with a class hide). What I want is that if I select Submit, it should not submit, first hide all the brother divs of the hidden div (in this case full-width) and unhide the one with the class hide.
Now when I press again, it should just submit the Form.
JSFiddle is here:- http://jsfiddle.net/xmqvx/2/
Your code had a couple issues:
You used event.preventDefault but passed event in as e - should be e.preventDefault
Your ID selector targeted an ID that didnt exist (changed to #submit-this)
The working code:
$("#submit-this").click(function (e) {
e.preventDefault();
if ($(".full-width").hasClass("hide")) {
$(".full-width").hide();
$(".full-width.hide").removeClass("hide").show();
} else {
alert("Submitting");
$("#this-form").submit();
}
});
http://jsfiddle.net/xmqvx/4/
You could also take advantage of JavaScript's closures like so, to avoid having your behavior be dependent on your UI:
$(document).ready(function () {
var alreadyClicked = false;
$("#submit-this").click(function (e) {
e.preventDefault();
if (alreadyClicked) {
$('#this-form').submit();
} else {
$('.full-width').hide();
$('.hide').show();
alreadyClicked = true;
}
});
});
The following code worked as expected, however on the paging click, it still execute and display message "Please select a record first, then press this button". Is there anyway to prevent this unless the export button click. Thank you
$(document).ready(function () {
$("#Product").on("click",function(){
var $exportLink = $('#export');
var href = $exportLink.attr('href');
var grid = $('#Product').data('kendoGrid'); //get a reference to the grid data
var record = grid.dataItem(grid.select()); //get a reference to the currently selected row
if(record !=null)
{
href = href.replace(/refId=([^&]*)/, 'refId='+record.ID);
$exportLink.attr('href', href);
}
else
{
alert("Please select a record first, then press this button")
return false;
}
});
});
Defining a click handler as $("#Product").on("click",function(){...}) you are actually defining it for any click on #Product not just on you Export button. You should define the on for the button and not for the grid
I am not a JS expert hence I am asking for some guidance. I have following scenario
page loads and commondiv is hidden
if user clicks button showeditform, I load editform in commondiv and show the commondiv
if user clicks button showeditform and editform is visible, remove it and hide commondiv
if user clicks button showpasswordform and if the editform is visible and I remove editform and show passwordform
if user clicks button showpasswordform and if the passwordform is visible, remove it and hide the common div
if user clicks button showeditform and if the passwordform is visible and I remove passwordform and show editform
As of now, I have set up flags and if elses but its not very good way to do it. How can I achieve this using minimum of jQuery code?
Update: Following is my attempt
$('a.editpo, a.resetpass').click(function(event){
event.preventDefault();
var urlToCall = $(this).attr('href');
var hyperlinkid = '#'+$(this).attr('id');
var targetId = $(this).attr('id').match(/\d+/);
var targetTrDiv = '#poformloadertr_'+targetId;
var targetTdDiv = '#poformloadertd_'+targetId;
var toToggle = $('#resetuserpassform_'+targetId).is(':visible') || $('#account-home-container-'+targetId).is(':visible') ;
console.log(toToggle);
if(toToggle == true || $(targetTdDiv).html()==''){
$.ajax({
url:urlToCall,
success: function(html){
$(targetTdDiv).html(html);
$(targetTrDiv).show();
}
});
}else{
$(targetTrDiv).hide();
$(targetTdDiv).html('');
}
});
The editpo and resetpass are classes applied on hyperlinks in column of table, namely Edit personal info and reset pass, clicking these load up the form in a tr>td.
Try this
$(function(){
var $commonDiv = $("#commondiv");
//Add the edit and password forms into common div and hide them initially
$("#editform").hide().appendTo($commonDiv);
$("#passwordform").hide().appendTo($commonDiv);
//Editing answer based on your comments.
$(".showeditform").live('click', function(){
if($("#editform").hasClass("loading")){//If form is already loading just return
returnl
}
if(!$("#editform").is(":visible")){
$("#editform").addClass("loading").load("EditFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#editform").hide();
}
//Always hide the passwordform
$("#passwordform").hide();
});
$(".showpasswordform").live('click', function(){
if(!$("#passwordform").is(":visible")){
$("#passwordform").addClass("loading").load("PasswordFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#passwordform").hide();
}
//Always hide the editform
$("#editform").hide();
});
});
I have done this like a week ago, but the code is at home, where I am not at right now. But basically, you give your forms names in a array, and hide the ones that are not selected and if the one that is selected is clicked again use .toggle(); function to hide it.
You can give this a try. This is assuming you are storing your form HTML in JS. If you are storing it in a hidden container I can show you how to move that into the new parent or just copy the html into it.. hope this helps!
$("#commondiv").hide();
$("#showeditform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(editformHTML).show();
}
});
$("#showpasswordform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(passwordformHTML).show();
}
});
You would do something like this:
$('#showeditform').click(function()
{
if($('#commondiv').is(':visible'))
$('#commondiv').hide();
else
$('#commondiv').html('The text you want to set').show();
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#editform').show();
}
});
$('#showpasswordform').click(function()
{
if($('#editform').is(':visible'))
{
$('#editform').hide();
$('#passwordform').show();
}
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#commondiv').hide();
}
});
Honestly, it sounds like your page is doing far too much on a single page. The rules shown above give me a kind of a headache.