I'm really sorry if this was already asked, but my searching skills just didn't find something similar.
So I have a form with multiple subsections.
I need to hide/show subsections and 'simulate' the page as if it had 3 different parts.
There is no access to the source code, so everything has to be done through css/js applied over existing code.
Keep in mind that there is already a button (I'll call it continueBtn here) that submits the form when pressed and I added a back button. Assume that all the variables (allSections, sectionOne etc. exist, they are not the problem).
I created a function that shows/hides/changes text based on what step of the form we are in; example code:
function showHideOnStep(step){
allSections.hide();
continueBtn.unbind('click');
backBtn.unbind('click');
switch (step){
case 1:
sectionOne.show();
continueBtn.attr('type','button');//make continue button to not submit
continueBtn.text("Go to step 2");
backBtn.click(function(){
//go to previous browser page, literally
})
continueBtn.click(function(){
showHideOnStep(2);
})
break;
case 2:
sectionTwo.show();
continueBtn.text("Go to step 3");
continueBtn.attr('type','button');//make continue button to not submit (in case it's a back from step 3)
continueBtn.click(function(){
showHideOnStep(1);
})
backBtn.click(function(){
showHideOnStep(3);
})
break;
case 3:
sectionThree.show();
continueBtn.text("Submit");
backBtn.click(function(){
showHideOnStep(2);
})
continueBtn.removeAttr('type');//make continue button to submit again
break;
}
}
So let's say page loads and showHideOnStep(1) is applied by default. Everything's fine, clicking back will back, clicking Continue will go to Step 2.
But now, when clicking Continue, it will jump to submitting, instead of going to case 3 first.
It's like the actual "clicking" ends after it removes the "type=button" from the button and it propagates into that.
Same issue will happen when Backing from Step 2. Instead of going to Step 1, it will back for good.
I'm sure there is either of
a) a fairly simple fix for this or
b) a much better/cleaner way to do what I want
Any suggestion will be highly appreciated.
Please include the button html script! If the button was made from a form submit tag, it will submit without going to the next. Trying using a button tag.
// for checking
var secondbutton = false;
// checks if its been clicked
var firstb = document.getElementById('first');
function second() {
if(secondbutton == false) {
alert("first");
firstb.innerHTML = "Second";
secondbutton = true;
}
else {
alert("second")
}
}
<button id="first" onclick="second()">First</button>
This creates the illusion that it changed!
Related
I have tried to make the working of the next button in Qualtrics conditional a certain variable value in javascript. If the condition is not met, I want to display an error message. However, with my current code (where the condition is not met) I see the error message briefly and then I progress to the next question anyways.
The javascript code is:
Qualtrics.SurveyEngine.addOnload(function()
{
var test = 0;
$('NextButton').onclick = function (event) {
event.preventDefault();
if (test==1){
Qualtrics.SurveyEngine.navClick(event, 'NextButton');
}
else
{
document.getElementById("errorMessage").innerHTML = "Error message";
}
}
});
And the html code is simply:
<div id="errorMessage"><span>This is a test</span></div>
I would really appreciate any help.
Thank you,
Lukas
Unfortunately, due to the way Qualtrics is setup, it is very difficult to hijack / override the next button's onclick event. The simplest workaround that I have found is to hide the actual next button, create a different button, and use that button for your expected actions.
What I want is to trigger a Bootstrap modal (with an Id testModal) by a button click and update its content dynamically. Be more precise, I want to check if a certain div tag has been created, if yes then remove it and create a new one. For this I came up with the following jQuery code for testing purpose:
jQuery('#testModalButton').on('click',
function(){
'use strict';
jQuery('#testModalTitle').html('Country list');
console.log('Check if a div exists');
//...other codes...//
var $testModalBodyDiv = null;
if (jQuery('#testModalBodyDiv').length != 0) {
// if yes, then remove it.
jQuery('#testModalBodyDiv').remove();
}
else {
$testModalBodyDiv
= jQuery("#testModalBody")
.append($('<div id="testModalBodyDiv">'));
}
// end of...other codes...//
jQuery('#testModal').modal('show');
}
);
What bugs me is that, after the first click, everything runs fine, [...other codes...] is executed and modal is opened too. However, when I click the button again, the modal can be opened, yet the [...other codes...] part is not executed at all. At the third click, it runs fine again. This pattern repeats. I am wondering what went wrong.
NOTE ADDED: Well, my stupidity comes from a misuse of
$testModalBodyDiv = jQuery("#testModalBody").append($('<div id="testModalBodyDiv">'));
which, as a matter of fact, first selected the testModalBody instead of testModalBodyDiv in my previous codes.
I am building a search page that posts back to itself. I finally got a sample page working here. I also built a fiddle here. But I don't understand why it works. When the user initially hits the page, it should only show the search form. When a search is submitted, it should hide the form, show results, and a button for a new search. I'm using jQuery. Here's my code:
//Code Block 1
// Show search form if there is no querystring
//Hide search form, show results if querystring
$(document).ready(function() {
if(document.location.search.length) {
$("#newsearch").show(1000);
$("#results").show(1000);
$("#search").hide(300);
} else {
$("#search").show();
}
});
//code block 2
//if new search clicked, show form, hide results
$("#newsearch").click(function() {
$("#newsearch").hide(1000);
$("#results").hide(1000);
$("#search").show(300);
});
When code block 1 and 2 are loaded in the head, block 2 never fires. When I pull 2 out and put it at the end of the page, it works.
I am trying to learn, so I have 2 questions. (1) Why didn't it work when it was one block, and (2) Any suggestions for doing it better?
Thank you.
D
$("#newsearch").click(function() { is being run before the #newsearch element exists.
Therefore the click event is attached to nothing.
It works in the first block because it's in a $(document).ready, which runs code inside only after everything has finished loading.
so if you have a favorite button like on SO, then the user could keep clicking and the favorite thing would keep turning off and on and so-on.
but, it seems like some kind of race condition occurs due to speed clicking and things start being funny and they get back to normal once I refresh the page. The problem seems more to be on UI side than backend, but I can't debug, because that gives the program time and race condition is gone.
I have SET NOCOUNT ON; inside my SQL procedure, in case you're wondering.
So once user clicks on the "favorite" button, what steps should I take to ensure s/he doesn't click on it again till we hear back from the Ajax request?
I am contacting database for every do or undo of favorite... is that bad? (not that related to my original question I guess)
Pseudo-code:
anchors = [DOMElement, DOMElement];
anchors.each(function() {
var clickable = true;
el.onclick = function() {
if ( clickable ) {
clickable = false;
ajaxStuff({
done: function(){
clickable = true;
}
})
}
});
Basically, invoke a function in the context of each of those elements, set a clickable variable, on click execute if clickable is true, then set it to false, and set it back on ajax done.
I wrote a javascript function to go to a particular page if it came from a particular page.
Function:
function proceed()
{
if( document.referer == "http://abcd.com/index.php?action=SignUp")
{
return document.location.href = "http://abcd.com/editprofile.php?action=editprofile";
}
}
Submit button for a form in current page(b):
What i want is to go through a sequence of pages a->b->c , where a is previous , b is current , and c is next in my case. b has a form, on submitting values to the form, it should also call the javascript function and then go to the page c.
Can anybody help me find out where is the mistake? Any help would be highly appreciated. Thanks.
Since you have a form I guess there's also some php/cgi script that will handle the form's data!?
In that case your form won't continue to that script if you override your submit button via javascript in such way that it loads another page (other cases like validation do work that way, of course).
So
Your submit button has spaces next to the onclick attribute: onclick = "javascript... should be onclick="javascript....
Your function proceed() should return true for the submit to perform.
Even after all syntax correction, there's still something odd. After all, you can only give one "next page" functionality to your submit button. So what should the form call:
your php or cgi script? Then you can build a redirect to page "c" into that one.
your page "c"? Then what do you need the form for?
both, but independently? In that case I suggest a javascript popup from proceed() displaying page "c" and returning true so the form continues with its script.
To be more accurate you will have to provide more of your application's code.
Solution seems to be the following. Use the submit attribute for your button:
<button type="button" onclick="proceed(); alert('You are not authorized to execute this action!');">Click Me!</button