IE8 is submitting the form to the current page - javascript

It's working in all other browsers, and it was working on IE8 before, but I did some code cleanup and moved some things around, and now its submitting this form to it's self. It's an "ajax" uploader (yes, not really ajax, but you know what I mean)
Here is the JS:
function file_upload($theform,item_id){
$theform.attr('ACTION','io.cfm?action=updateitemfile&item_id='+item_id);
if($theform.find('[type=file]').val().length > 0){
$('iframe').one('load',function(){
$livepreview.agenda({
action:'get',
id:item_id,
type:'item',
callback:function(json){
$theform.siblings('.upload_output').append('<li style="display:none" class="file-upload"><a target="blank" href="io.cfm?action=getitemfile&item_file_id='+json[0].files.slice(-1)[0].item_file_id+'">'+json[0].files.slice(-1)[0].file_name+'</a> <a style="color:red" title="Delete file?" href="#deletefile-'+json[0].files.slice(-1)[0].item_file_id+'">[X]</a></li>').children('li').fadeIn();
$theform.siblings('.upload_output').find('.nofiles').remove();
}
});
//Resets the file input. The only way to get it cross browser compatible as resetting the val to nothing
//Doesn't work in IE8. It ignores val('') to reset it.
$theform.append('<input type="reset" style="display:none">').children('[type=reset]').click().remove();
});
}
else{
$.alert('No file selected');
return false;
}
}
/* FILE UPLOAD EVENTS */
//When they select "upload" in the modal
$('.agenda-modal .file_upload').live('submit',function(event){de
file_upload($('.agenda-modal .file_upload'),$('.agenda-modal').attr('data-defaultitemid'));
});
If you didn't know, ACTION has to be capitalized for Firefox to work. Also, i know for sure it's submitting to it's self because the iframe shows the current page inside of it's self and all the scripts get loaded again. Also, in the .live(), adding return false; does nothing.
Here is the HTML just in case:
<label>Add Attachment</label>
<form class="file_upload" method="post" enctype="multipart/form-data" target="upload_target" action="">
<input name="binary" id="file" size="27" type="file" /><br />
<br><input type="submit" name="action" value="Upload" /><br />
<iframe class="upload_target" name="upload_target" src="" style="display:none"></iframe>
</form>
<label>Attachments</label>
<ul class="upload_output">
<li class="nofiles">(No Files Added, Yet)</li>
</ul>

It is supposed to send the form to itself.
Consider that the button is of type submit (ie submits form automatically) and that the form action is empty (ie, send it self).
However, as you've correctly done, a submit handler may cause the form to not submit at all (to which I ask, what was the point of submitting in the first place? But that's past the point)
Anyway, you should stop event propagation and return false in your event handler.

You should return false; at the end of your "submit" handler.
ah - well that's hard to understand. OK well where exactly is this <iframe> defined? edit — oh duhh I see it.
edit again — OK I realize I'm sort-of jumping up and down on thin ice with my credibility here, but I suggest adding an "id" attribute to the <iframe> (with "upload_target" as the id value). Every once in a while I figure out exactly which one of "name" and "id" is important (and when/why), but that information only lasts an hour or so before my brain perversely dismisses it. (By "important" I mean specifically with <iframe> elements.)

Related

Button didnt disable inside the form

greeting developers. i am doing project for university related to Javascript. i create one page got button add and unfriend button which is disable.once user click add button the prompt box appear and after they click Ok for promp, the unfriend button will able to click while add button become disable. if click unfriend, add button will able to click. i don't know how explain it. may be read my question can be headache. sorry for that. my problem is button does not disable,if i never put inside form it work but since i put inside form doesnt work. guys is there any solution please help me
function myFunction(add){
var subject = prompt("Please enter Subject that want to study");
if (subject != null){
document.getElementById("subject").value = subject;
document.getElementById("btn").disabled=false;
document.getElementById("add").disabled=true;
document.getElementById("add").value="request sent";
}
}
function disableButton(btn){
document.getElementById("add").disabled=false;
document.getElementById("btn").disabled=true;
document.getElementById("add").value="Add friend";
form.submit();
}
<form method="post" id="form" enctype="multipart/form-data" autocomplete="off" >
<input type="submit" value="unfriend" id="btn" onClick="disableButton(btn)" disabled/>
<input type="hidden" id="subject" name="subject"/>
<input type="submit" value="add" id="add" onclick="myFunction(add)" /></form>
The "add" and "unfriend" buttons both submit a POST request which is refreshing the page since there is no form action specified. Perhaps you need to read up on HTTP methods. https://www.w3schools.com/tags/ref_httpmethods.asp is a good resource.
If your plan is to add a server side page to handle the request at a later time you can temporarily add the following to the form tag onsubmit="return false".
If you simply want to use the form inputs without submitting the form you should remove form.submit() from the disableButton function and change the types of the add and unfriend buttons from type="submit" to type="button". You can also remove the method and enctype of the form.
Personally I don’t really use forms unless its more than 3 fields.
Two things to think about:
You got the right written idea, you are however missing event.preventDefault(), which will make your website refresh itself, which will then force out everything to refresh.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The other is that try between the both buttons as they are both i suggest one myfunction to be onclick in a button tag. just to avoid two inputs types.
Additional:
I suggest you add jquery to make things easier with the toggle function.

Accidental JavaScript redirct?

I have a form that adds an item to a list when I press enter or hit a submit button. I'm not sure what I've changed, but suddenly pressing enter seems to redirect the URL, while clicking the button acts normally.
The HTML portion looks like this:
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
</form>
The jQuery is:
$('#check').click(function () {
addIngredient('new-ingredient');
});
$('.new-ingredient').keypress(function (e) {
if (e.keyCode == 13) {
addIngredient('new-ingredient');
}
});
So it's running the same function either way. In both cases, it successfully adds the ingredient to the list, but in the 2nd case, the page is redirected from "recipe.html" to "recipe.html?new-ingredient=".
And here's the part that really confuses me: when I add an extra input to the form, this problem doesn't occur when I press enter in either box:
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
<input type="text"></input>
</form>
Also, if I add in an actual button (not my clickable image), it redirects like pressing enter, even though I have no code to do anything if the button is pressed. In this case, the extra input field has no effect.
<form id="add-ingr">
<input class="new-ingredient" type="text" size="50" name="new-ingredient" placeholder=" Your ingredient"></input>
<img id="check" src="imgs/check.png" alt=""/>
<button id="button">Add Ingredient</button>
</form>
I have absolutely no idea why this is happening. Even if I get rid of the jQuery to perform an action when I hit enter, this still happens. I'm new to JavaScript, so sorry if this is something obvious, but I'd really appreciate some help.
I can also provide more of my code if it's relevant, but I didn't want to clog things up with a ton of code.
Hitting enter (or clicking the button if its there) is submitting the form (this makes it appear to "redirect the URL"). You need to prevent that from happening with e.preventDefault(). So in the click listener:
$('#button').click(function(e){
e.preventDefault();
addIngredient('new-ingredient');
});
Put that in each of the listeners, or get rid of your form tags so there isn't anything to submit (as was mentioned in the comments).
I don't entirely blame you for being confused. The browser default behavior is to perform the "submit" action, whatever it is, when someone presses enter while a field in the form is highlighted. As elclanrs said, you can override the submit action; in fact, I'm pretty sure in JQuery it's just this:
$('#add-ingr').submit(function(e) {
if ('event is not coming from button')...{
e.preventDefault();
}
});
I'm afraid I couldn't explain why adding a blank input changed the effect, though. Through my laziness, I have also left you the work of determining the best way of allowing actual submissions, though (if the form gets submitted to the server, you won't want to block submit every time)

Firefox trying to send form to same page on pressing enter without target defined in form tag

I have a little problem with Firefox and forms.
I have a form that is dynamically loaded from an external file from the same server trough an XMLHttpRequest(); that has no set target and no direct submit button but sends its data trough a Javascript function, looks like this:
<form name="blahform">
<input type="text" name="blubb">
<input type="button" value="Barfoo" onclick="return someFunction(this.form);">
<input type="hidden" name="id">
</form>
The problem is that Firefox sends this to the forms page, completely ignoring my Javascript code of course. It works if i don't press enter but use the button directly, but i want him to ignore the enter key completely or at least only call the Javascript routine and not try to send the whole thing into nirvana, reloading the page. (And yes, there is a XMLHttpRequest(); waiting behind that Javascript function for that data. ;) )
So, how to tell Firefox to do what i want and not what he thinks is best?
BTW, i have started the form with "submit" instead of "button" and changed to "button" in the hope that this solves the issue, but no luck with that.
EDIT:
Solution, thanks to Mike and Riateche:
Used an onsubmit="return false;" inside the < form >-tag and it works like expected now.
You need to use the <form>'s onsubmit event instead of onclick event of buttons.

Javascript return false behavior what's the deal?

So I am loading an html page with a basic script and a basic form. However when the page loads there are two radio buttons the user can select, YES or NO. If you the user selects neither, I would like to present an alert box. I successfully present the alert box, but when the user clicks the "okay" button within the alert box the user is redirected to a different page. I added the statement, return false; in hopes that this wouldn't happen.
The code is as follows,
<!-- Javascript radiobutton form validation -->
<script type="text/javascript">
function valForm(form) {
if(!document.getElementById('splash_false').checked && !document.getElementById('splash_true').checked ) {
alert('You either like splash pages or dislike em, choose one ...please');
return false;
}
}
</script>
<!-- Javascript radiobutton form validation END -->
</head>
<body>
<img src="pics/DSCN1566-300x225.jpg" alt="" width="640" height="auto" />
<h1>Hello Javascript redirection.</h1><br />
<p>
<form name="tosplashornottosplash" action="splash-process.php" method="post">
Splash pages are stupid.
<input type="radio" name="splash" id="splash_false" value="false" /> No
<input type="radio" name="splash" id="splash_true" value="true" /> Yes
<input type="submit" name="splashSubmit" onClick="return valForm(tosplashornottosplash)" value="Enter" />
</form>
</p>
You should place your handler in the form's onsubmit callback
<form onsubmit="return valForm(this)" action="splash-process.php" method="post">
Returning false to the onsubmit handler will prevent your form from being posted
Try to make it an onsubmit-callback on the form, instead of an onclick-callback on the button. That way, returning false will stop the form from posting.
Side note:
Since you don't seem to use the reference to the form in your callback, there is no need to pass it to the callback function. So you could just as well call it like this, from the onsubmit-attribute on the form:
onsubmit="return valForm()"
And get rid of the the form variable in the callback signature:
function valForm() {
...
}
You need to bind to the form's onsubmit event:
<form onsubmit="return valForm()">
(Note that the form parameter in your valForm function was never actually used nor was it properly filled in either. The return valForm(tosplashornottosplash) referred to an non-existant tosplashornottosplash JavaScript variable and thus evaluated to undefined.)
However it's recommended that you bind your event handlers in the JavaScript code itself instead of wiring them in the HTML markup:
document.getElementById("myform").addEventListener("submit", valForm, false);
This assumes you gave your form the ID myform and that this code is executed after the form element is loaded into the DOM. You can ensure this by putting your JavaScript at the bottom of the page (just before closing body) or by binding to the DOMContentLoaded event of the document.
To support older IE browsers as well, you need to use attachEvent when addEventListener is not available. The article on addEventListener at MDN suggests something like:
if (form.addEventListener) {
form.addEventListener("submit", valForm, false);
} else if (form.attachEvent) {
form.attachEvent("onsubmit", valForm);
}
Alternatively, you can throw jQuery in which facilitates DOM selection (e.g. $("form[name=myform])") and takes care of the cross-browser compatibility issues for you (e.g. $.on('submit', valForm)).

Javascript onsubmit causing page to refresh

Really simple form
<form id="addDonor" name="addDonor" onsubmit="addDonor(); return false;" action="" method="post" enctype="multipart/form-data">
<div class="sectionHeader">Add New Donor</div>
<div class="formRow"><label>Name</label> <input class="inputText fullTextBar" type="text" name="userName">
<div class="formRow"><button style="margin-left:350px; width: 80px" type="button" class="publish">Add Donor</button></div>
</form>
And the addDonor function
<script type="text/javascript">
function addDonor(){
alert("test");
return false;
}
</script>
Eventually that function will include some jquery ajax to submit the info. But, baby, steps. Right now I can't even get the alert to show up. Also, when I hit "Enter" on my keyboard, the whole page refreshes, when I press "Add Donor" nothing happens.
I'm sure it has to be a simple problem. I think it's one of those things that I just need someone else's eyes to point out.
Try assigning the onsubmit event in javascript:
document.getElementById("addDonor").onsubmit = function () {
alert("test");
return false;
}
The problem is that your function is named addDonor and your element is addDonor. Every element with an id has an object created under document to identify it. Try alert(addDonor) in the inline onsubmit to see that it alerts an HTML element, not a function. Inline functions execute in a scope chain inside document, so addDonor points to document.addDonor before it reaches window.addDonor (your function).
you should change your <button> to an <input type="submit"> (as #fireshadow52 suggested) that should fix your problem. you should try the Wc3 Schools online javascript tester to try out simple javascripts before you put it in a page, or any other one that you prefer. google has something along these lines. also, you can normally try the javascript console on your respective browser.
Your button is explicitly set to type="button", which won't make it submit the form. Change it to <button type="submit">, or to <input type="submit"> if you prefer (I like the styling options of <button> myself).

Categories