So I have a button that calls the AllEntered() javascript method when it is clicked and as you can see in the final if/else, it should either got to submission.html or admin.html but instead of going to either of those it just reloads the current page that I am on. This is all inside a form by the way and its purpose is to check if all checkbox inputs are checked. Also the alert doesn't i put for loop-number doesn't generate either.
zbutton onclick="AllEntered()" class="myButton">Submit</button>
<script>
function AllEntered()
{
var ids = {"freshSoph", "participate", "respect", "leave", "illegal", "alcohol", "typeName"};
var loopNumber = 0;
for(var i = 0; i < ids.length - 1; i++)
{
if(document.getElementById(ids[i]).checked)
{
loopNumber++;
alert(loopNumber.value);
}
}
if(loopNumber = ids.length)
{
window.open("submission.html");
}
else
{
window.open("admin.html");
}
}
</script>
Open your browser developer tools. Read the error message.
You have a typo. An array is created with [], not {}.
(And of course it reloads the page, that is what clicking a submit button inside a form does).
In your form, below this button, add one more button as a hidden input of type submit like so:
<button hidden type="Submit">
Your problem could be caused by the fact that you are missing a submit type button.
When a form has no button of type Submit ( which on click will submit the form to its target or TO ITS SELF if no target is specified. This is what we call postback, as in posting back to your self ) it will use any buttons click as a submit event raiser.
By adding an actual submit button you remove this default behaviour, while also ensuring the user cant click on it, as the control is not active when its hidden.
Related
So I'm running a data collection project by injecting a html form into a third party website, via a chrome extension, which instructs users to describe the data they see and submit it to my server.
For some bizarre reason, however, whenever the user clicks the "submit" button to send the form contents to the background page (and from thence to the server), the underlying page reloads, and, not only that, but it reloads with the contents of the form I injected showing up in the url after reload. Which is kind of bizarre behavior.
I don't know if this is something in my code, or even if it's something in the underlying web page's code (maybe it redefines chrome.runtime.sendMessage or something as some kind of anti-extension technique?!!?). I'd really like to stop this behavior if possible... does anyone have any ideas?
The relevant parts of my code, stripped down a little:
var cururl = window.location.href
var codestring= "[A HTML FORM TO INJECT]"
var raformvalues = {};
function codeValues() {
$.each($('#mainCoding').serializeArray(), function(i, field) {
raformvalues[field.name] = field.value;
});
}
function sendValues() {
let pageinfo = {"page": document.documentElement.outerHTML,
"url": cururl,
"title": document.title,
"timestamp": String(Date.now())};
let tosend = $.extend({"type": "doctype"}, pageinfo, raformvalues);
chrome.runtime.sendMessage(tosend);
chrome.storage.local.set({'lasturl': pageinfo.url});
$("#pgcodediv").empty();
location.href = cururl; // note: I added this line to try to stop the reloading and url/changing behavior. behavior is the same with and without it.
}
function appendCodingInfo() {
$("#headerID").append(codestring);
$( ":checkbox, :radio" ).click( codeValues );
$( ":text" ).change( codeValues );
$( "#codingsubmit" ).click(sendValues);
}
appendCodingInfo()
when the user hits the submit button (#codingsubmit, of course), the message gets passed and the background page handles it correctly, but the page refreshes unbidden, and the contents of raformvalues show up in the URL of the refreshed page (i.e., when I call window.location.href from the console the contents of that object show up as parameters to a get request, i.e., http://url?prop=value&prop2=value2 -- no clue why.
If you click a button with type="submit" in a form, by default browser will reload the page after the form is submitted.
To prevent the page reloaded, either replace type="submit" with type="button" or call e.preventDefault() inside sendValues handler.
Appendix:
According to MDN, the default value for button is submit.
type
The type of the button. Possible values are:
submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
reset: The button resets all the controls to their initial values.
button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
menu: The button opens a popup menu defined via its designated element.
I have a function that is supposed to display a message in a P element if conditions are met. The function runs fine but the text that is sent to 'output1' appears briefly when you press the button and then disappears. I have tried putting the JS in the head and in the body but it doesn't seem to make a difference. Any ideas? Thanks.
HTML:
<p id="output1"><p>
Javascript:
<script>
function logicProcess() {
// alert('function launched');
if(document.getElementById('q1Y').checked || document.getElementById('q2Y').checked || document.getElementById('q3Y').checked) {
document.getElementById("output1").innerHTML = "Sorry, you don't qualify for our shared ownership properties";
}
else {
document.getElementById("output1").innerHTML = "You may qualify for our shared ownership scheme. Please complete the registration form.";
}
}
</script>
The reason the innerHTML is not staying visible is because there is some type of onclick method that is resetting the form. If that is true edit your onclick method like so:
onClick="function();return false;"
The change in here is the ;return false;
You haven't show us how you are calling that function, but the odds are that you are doing so in response to a form's submit button being pressed.
This will modify the DOM, and then submit the form, which will cause a new page to be loaded.
You need to cancel the default behaviour of the form to stop it being submitted.
function logicProcess(evt) {
// All your other code
evt.preventDefault();
}
document.getElementById('myForm').addEventListener('submit', logicProcess);
I think you are using input type submit, so the meaning of submit button is to submit the form and reload it, that's why your output is not holding your inner html.
change it to
<input type="button" />
I'm using the following script with a Paypal button, which works well, except for the fact that 2 windows open to Paypal, instead of one. I would appreciate if anyone could help me get just 1 window to open. This is inside of an asp.net project. There is one form in the source on the page.
function submitFormToPaypal() {
var formElementsArray = document.getElementsByTagName('FORM');
if (formElementsArray != null) {
var formElement = formElementsArray[0];
document.getElementById('__VIEWSTATE').name = 'NOVIEWSTATE';
formElement.action = 'https://www.paypal.com/cgi-bin/webscr';
formElement.setAttribute("target", "_blank");
formElement.submit();
}
}
If you call your function on submit or on click of a submit button, you need to remove the formelement.submit.
If you show the HTML with event handlers perhaps we can suggest how to do it.
I've been battling with this issue all day. I am hoping someone has an answer for me. I did a bunch of searching and can't seem to find an answer.
I have a page that has 3 forms on it. I am working within the 2nd form. None of the forms are embedded within another form.
I have a hidden div that contains two form elements, a drop down list and a text box, and a submit button that I anticipated it posting to the form it is enclosed in. On another button within the form itself (not submit button), I have javascript that launches jquery.Dialog, that code looks like this:
function showReleaseDiv() {
var div = $("#ReleaseHoldsDiv");
var f = div.closest("form");
div.dialog({ width: 270, height: 187, modal: true, title: 'Bulk Hold Resolution' });
div.parent().appendTo(f);
}
This part does function correctly. I've overcome the typical jquery issue where it pulls the contents of the dialog out of the form, so I put it back in the form, but wonder if this is causing my real issues which are:
The drop down list and text box are both required before I post, so I default the submit button to disabled, then I have an onchange event on the drop downlist, and the onkeyup on the text box call the following javascript:
function enablePopupRelease() {
var button = $("PopupReleaseButton");
if (button && button != null) {
button.attr("disabled", "disabled");
if ($("#ResolutionTypeCode").val() != "" && $("#ResolutionComments").val() != "") {
button.removeAttr("disabled");
}
}
return true;
}
Both events fire correctly and I step through the code; all seems fine, but the button disable state does not change.
Please help.
I believe you are missing a hash on this line:
Change:
var button = $("PopupReleaseButton");
to
var button = $("#PopupReleaseButton");
firstly I would clean some code as follows:
function enablePopupRelease() { var button = $("PopupReleaseButton"); if (button) { button.attr("disabled", "disabled"); if ($("#ResolutionTypeCode").val() && $("#ResolutionComments").val()) { button.removeAttr("disabled"); } } return true; }
Let me know if makes any difference please?
if you break through the code ... does it stop at button.removeAttr("disabled"); please?
Are you using the jQuery UI button widget for the form's submit button? If so, you will need to call
$("#PopupReleaseButton").button({disabled: true});
to disable the button.
disabled isn't an attribute, it's a property -- try using button.prop('disabled',true) and button.prop('disabled',false) instead.
http://api.jquery.com/prop/
I am using jQuery 1.4.3 and have a newbie question.
In the following .submit function, I grab the value of the selected option in the facilityCodes dropdown list after I click the submit button and then during the submit function, select the facilityCode again in the dropdown list and then disable the list so that the user cannot change it. However, the situation is when I reload the page after the submit button is clicked the dropdown defaults to the first option and the list is enabled. I apparently am not understanding how .submit works so that I'm selecting the option I'm defining in my code and then disabling the list AFTER the page reloads. My question is what am I doing wrong? Am I using the wrong event?
Any help/direction would be greatly appreciated. Thank you.
Here is my code:
$(function() {
$("#ARTransferForm").submit(function() {
var msgsCount = 0;
var facilityCodeValue = $("#ARTransferForm\\:facilityCodes option:selected").val();
alert("facilityCodeValue = " + facilityCodeValue);
if (facilityCodeValue == 0) {
alert("To Facility Code must be selected");
msgsCount++;
} else {
$('select[id$=facilityCodes]').val(facilityCodeValue);
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});
});
Refreshing the page will erase everything you've done with JavaScript prior to the page refresh. If you're looking to preserve states through page reloads, you'll need to use server side code, or set a cookie.
The submit event is called on the current page when the form is about to post. You'll need to pass along a value (hidden field) that is checked on form load that you can check to determine if the list should be disabled.
Update:
On page load, you'll want to check to see if this is a repost where the hidden field id="disable_select" was set set during the post. If so, then you'll disable the form.
$(function(){
if ($('#disable_select').val() == '1') {
$("#ARTransferForm\\:facilityCodes").attr("disabled", "disabled");
}
});