Can someone help me please.
I have the following (simplified) code.
function save_all_des(){
document.getElementById("form_zoom1").submit();
document.getElementById("form_zoom2").submit();
}
I am submitting two forms, which have input of the same names but with different values. Individually they submit ok. Also in IE9 they submit correctly when called as shown. However in FF only the second works.
It appears that the second is submitting over the first. I've tried using separate functions but they too seem to run at the same time. How do I make sure the code behind the form submittal is fininshed before the second submission? I have used jquery a little but I don't know how to use callback and ajax (yet).
Any help appreciated.
Thanks
I have found an article relating to you problem: Article:
it is possible to submit multiple forms, as long as the target for each form is different
I have not tested this tho.
The jquery way would look like this:
$('#id-of-mouseover-object').mouseover (function () {
$('#form_zoom1').submit(function() {
$('#form_zoom2').submit ();
});
});
Referenced from the jquery docs.
Related
Inside my "characters" component I have a form with a textfield, and button. ->
When I click the button it registers, and enters the function but I have no idea how to grab the current input text and use it in the called async function.
HTML:
TS:
Sadly getting the promptText does not work. I have the feeling I am missing a core concept of angular here, but even after extensive search, no luck.
Thanks in advance!
You can use
const promptTxt = document.getElementById('prompt-txtbox') as HTMLInputElement;
console.log(promptTxt.value);
Rather than trying to create form with plain javascipt/jquery, you can use Template form and Reactive form that angular provide to do the same.
A lot of example documentation/video in available for the same.
This seems like something you can also achieve by simple model binding but learning the correct way once will prepare you handle complex forms and build them quickly.
I would like to auto-submit a form on my page after a short delay based on a variable value (which is present in the URL string, as well as declared by another JS script). Not sure what the best practice way to do this would be?
MY PAGE URL:
http://www.domain.com/mypageaddress?var_1=value1&var_2=value2&var_3=Returning%20Applicant&var_4=value4
So when var_3=Returning%20Applicant , the form should submit without user input (and I would love a 1-second delay built in before that auto submit). Another script on the page also declares a JS variable for that same condition that might be easier to work with than the query string - JS var/value pair returningapplicant=1 is the same as the URL string var_3=Returning%20Applicant that I'm trying to target. This is powered by a third party tool which I don't 100% understand, but they say that this JS variable can be referenced.
I would love some sample code that I could try for this function. Any help much appreciated and here's the extra info that will probably be needed for the JS script:
FORM ACTION URL
<form method="post" action="https://www.tfaforms.com/responses/processor" class="hintsSide labelsLeftAligned" id="tfa_0">
CURRENT FORM SUBMIT ELEMENT
<div class="actions" id="tfa_0-A"><input type="submit" class="primaryAction" value="Next"></div>
-in js
Wait for the window to load.
document.onload = function() {}
Evaluate the url with the condition/s you describe. /
If the condition/s are met submit the form after waiting one second.
if (window.location.href.match('var_3=Returning%20Applicant')) {
setTimeout(function() {
//submit form
document.forms["your-form"].submit();
},1000);
}
Are you doing anything if something doesn't pass the conditions?
Your asking a whole bunch of stuff at once but that's the gist of what you're looking to do. I'd probably parse the url params and evaluate them individually, validate the form, etc... if I were serious about this. Hopefully this can get you started. Good luck.
I have another problem with my shiny app. The goal is to disable some inputs in my app when the user presses an actionButton. I found this solution, which works fine for the textinputs and the numeric inputs, but oddly not for selectinput or selectizeinput. I know the solution contains somehow using javascript, but I don't know how.
Thanks in advance for the help!
Edit:
Perhaps I haven't made it clear enough. Sorry guys! I'll add the necessary code chunks.
This is the disablefunction from the link. It works fine with actionButtons and numeric Inputs, but not with select or selectize Input.
disableActionButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('disabled',true)"
,sep="")))
disableselectButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('select',false)"
,sep="")))
disableselectButton <- function(id,session) {
session$sendCustomMessage(type="jsCode",
list(code= paste("$('#",id,"').prop('hide',false)"
,sep="")))
This is an example of the Inputs which don't get disabled. As I said the solution lies, probably, in javascript, but I don't even know the fundamentals to be honest. I've tried different probs like hide=true oder select=false, which didn't work (you can see the functions that did not work above as well).
selectInput("algorithmicMethod1",
label=h5("Berechnungsalgorithmus erster Wahl"),
c("RoT","Pickands"),
selected="RoT"),
conditionalPanel(condition="input.algorithmicMethod1 =='RoT'",
selectInput("algorithmicMethod2",
label=h5("Berechnungsalgorithmus zweiter Wahl"),
"Pickands",
selected="Pickands")),
conditionalPanel(condition="input.algorithmicMethod1 =='Pickands'",
selectInput("algorithmicMethod2",
label=h5("Berechnungsalgorithmus zweiter Wahl"),
"RoT",
selected="RoT"))
So, is there any other way to disable the select/selectize-Inputs?
Thanks again.:)
Solution: you can use my package shinyjs for that - you just call shinyjs::disable(id) and it will work.
Explanation why it's not super simple: the problem is that when you use selectize, it creates another select box that is just pretty HTML but it's not a real HTML input element, so it doesn't respond to the disabled property like real HTML tags do. Disabling a selectize can be done using JS if you look at the selectize.js documentation, but it's not very convenient with shiny. :(
If you don't use selectize (selectInput(selectize = FALSE)), disabling will work just fine.
I have a webpage where the user inputs a number into a textbox and then that number of rows are created in a table with textboxes in each row with the id in the format of "id[I]" where I is the number assigned from the for loop used to add the textboxes. On form submit I'm trying to get the value of these textboxes. This is my form submit code to test things out.
$("#biopsyform").submit(function () {
var site = $("#site[1]").attr("value");
alert(site);
});
when I submit the form I get an alert of undefined
I've tried saying var site = $("#site[1]#).val(); and get the same result.
When using chrome developer tools in the javascript debugger when I break before the alert, it shows the correct value for $("#site[1]") so I'm not quite sure what is going on.
Any help is greatly appreciated.
Here is a jsfiddle I'm getting an error in jsfiddle when I submit and I'm not sure why, I've never used jsfiddle. It could be part of my problem, it could be when I copied stuff over to jsfiddle, I don't know.
Try escaping [ and ] with \\
var site = $("#site\\[1\\]").attr("value");
or
var site = $("#site\\[1\\]").val();
FIDDLE DEMO
You were missing a $ sign.
You need to use the parent of the $("#site[1]").attr("value");
Example:
$("#parent").find("#site[1]").val();
Or any variations of that.
I'm currently working on a jQuery script which is giving me alot of trouble. I'm no expert on the framework, but I've used it successfully in a number of occassions in the past.
I'm trying to setup what amounts to be a subform of a subform. I.e. the user is filling out a questionnaire, based on user input additional form fields show and in this case, based on that input more fields can show.
So in this case I load in a script which searches for the controling elements and binds something to their change event. This approach works on the first form field, but not on another. The content is loaded with the rest of the html, not via ajax. The really weird part is that using a debugger and watching the console I can tell that the script below is finding the elements I want, and tries to call change(), but then the event never fires!
$('td.subFormYesControl input.CodebtorParentQuestion').each(function() {
console.log("Hit");
//alert($(this).prop('class'));
$(this).on("change", function() {
if ($(this).val() == "1") {
$(this).parents('tbody').eq(0).children('tr.subFormRow').show();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
} else {
$(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
}
});
});
I've been doing some trial and error testing with very little luck. If I change this from being wrapped in $(document).ready() to $(window).load() it works in FF, but not IE.
Does anyone have any idea what might be going on???
EDIT: Thanks for all the help! There is alot of generated html in the implementation I'm using, so here is the parent element of the control I'm trying to work with. Let me know if more would be helpful!
<td class="subFormYesControl"><input type="radio" value="1" id="c1_CodebtorsParent[0]0" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]0">Yes</label><br><input type="radio" checked="checked" value="0" id="c1_CodebtorsParent[0]1" class="CodebtorParentQuestion" name="c1_CodebtorsParent[0]"><label for="c1_CodebtorsParent[0]1">No</label><br></td>
EDIT 2: It seems to get more strange, but I think I've found a clue. If I add a simple alert as shown below:
alert($(this).prop('class'));
$('td.subFormYesControl input.CodebtorParentQuestion').each(function() {
$(this).on("change", function() {
console.log($(this).length);
if($(this).val() == "1") {
$(this).parents('tbody').eq(0).children('tr.subFormRow').show();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').show();
} else {
$(this).parents('tbody').eq(0).children('tr.subFormRow').hide();
$(this).parents('tbody').eq(0).siblings('tbody.CodebtorSubForm').hide();
}
});
});
The code seems to work! Remove the alert, it stops working!!! Any ideas????
Thank you for all the help everyone. I was preparing the jsfiddle and removing a few seemingly unrelated plugins. when I removed one of them, an intellitext tool, the code began working just fine in all browsers. I've gone through testing and was even able to push the code back to document.ready, so I think I'm going to mark it answered and chalk it up to a plugin compatibility issue/bug.
Thanks again everyone
I have tested your HTML sample and jQuery codes. Interestingly, you have used two radio inputs, those two input changes simultaneously or any of them toggles with the change of other one. Simple if you change one's value to 1 then it will automatically changes the other one's value to 0
Also you have used if ($(this).val() == "1") so if one's value changes to 1 and the other changes to 0 as well. So both changes does actually first show then hide, which makes to seem no event fired.
Comment out or remove the console.log() line. IE will choke on it unless the developer tools are open when running the script.
How about using the following?
$(this).live ("change", function() {
//...
});