Javascript/Jquery checkbox conditional hyperlink - javascript

I have a hyperlink/image button that uses javascript to submit a form,
<p>
<a href="#" onclick="checkOutFrm.submit();">
<img src="images/btn-checkout-basket.gif" width="169" height="28" alt="Checkout" border="0" />
</a>
</p>
and would like to add a checkbox that would disable the hyperlink until it is checked. How would I go about doing this?
Any help greatly appreciated, S.

You should not, in general:
Mix your JavaScript into your HTML markup (you should attach your logic handlers programmatically),
(ab)use anchor elements for JavaScript only (you should use a button, or put the onclick handler on the img directly), nor
place a form's submission handler on the click of a single element (you should instead handle the onsubmit event of the form).
I don't know the specifics of your situation, but I would do this in your HTML file:
<!-- Put a valid doctype here -->
<html><head>
<script type="text/javascript" src="submit.js"></script>
</head><body>
<form id="myform" ...>
<label>
<input type="checkbox" name="accept" id="accept-box" />
I accept
</label>
<button type="submit" id="submitter" disabled="disabled">
<img src="..." />
</button>
</form>
</body></html>
...and this in your submit.js file:
window.onload = function(){
var accept = document.getElementById('accept-box');
var submit = document.getElementById('submitter');
accept.onclick=function(){
submit.disabled = !accept.checked;
};
document.getElementById('myform').onsubmit = function(){
// Prevent form submission by any means unless
// the accept button is checked.
return accept.checked;
};
};
(Well, actually, I personally would use jQuery for handling the JS side of things :)
$(function(){
$('#accept-box').click(function(){
$('#submitter').attr('disabled',!this.checked);
});
$('#myform').submit(function(){
return $('#accept-box').attr('checked');
});
});
You can use CSS to style away the button surrounding the image, if you like:
#submitter { border:0; padding:0 }

Before submitting data, you can check the value of the checkbox first.
<a href="javascript: if(getElementById('CheckBoxID').checked) { checkOutFrm.submit(); } else { return false; }">
If you use jQuery you'd rather do it this way:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#CheckBoxID").val() && $("form").submit();
});
});

You can use Jquery Validator http://bassistance.de/jquery-plugins/jquery-plugin-validation/ to force it.

Related

How to call function after submit form aspx

I want callback alert after submit form, but doesn't worked. Submit not execute.
Only $("#formImpressao").submit(); worked fine.
I try too use $(document).ready(function () { ... :( No Success
Whats wrong?
Sorry for my bad english
<div id="HiddenFormTarget" style="display:none;">
<form id="formImpressao" method="post" target="frmPrint" action="/VisualizarRelatorios/ImprimirRelatorio.aspx""></form>
</div>
<iframe id="frmPrint" name="frmPrint" width="0" height="0" runat="server">
</iframe>
<script language="javascript" type="text/javascript">
$("#formImpressao").submit(function () {
alert('Test');
});
$("#formImpressao").submit();
</script>
$("#formImpressao").submit(function (e) {
e.preventDefault();
alert('Test');
//Insert AJAX to submit form data
});
e.preventDefault() will prevent the default action of the submit event, and then run your alert, but it will NOT submit the form. For that, you will need to use AJAX. It's simple enough to understand, and there are plenty of SO topics on the use of it, so I won't reiterate. But preventDefault() will get you started.
<form id="formImpressao" method="post" target="frmPrint" action="/VisualizarRelatorios/ImprimirRelatorio.aspx""></form>
</div>
Now you can use two ways to submit the form using only jQuery,Recommended method
<script>
$(document).ready(function(){
//instead of id selector use tag selector
$("form").submit(function () {
alert('Test');
});
});
</script>
Another using id selector which is already posted
I reproduce this situation and all right:
[https://codepen.io/piotrazsko/pen/mqMrgo][1]
(1) There appears to be an extra quote in your form tag.
(2) Have you tried your approach without the target attribute in the form tag?
e.g. -
<form id="formImpressao" method="post" action="/VisualizarRelatorios/ImprimirRelatorio.aspx"></form>

Hide/Show Load function not working

I have a script that shows 2 divs and hides 1 div after a user submits a form. The form's target is an Iframe on the same page.
I would like to delay the Hide/Show events until the Iframe loads. I was able to do this with a loading animation, but I am not sure how to do this with the Hide/Show script.
The script works with the submit function like this:
$(function(){
$('#form_710370').submit(function(e){
e.preventDefault(); // add this
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show();
return false;
});
});
But if I try to use the load function like this, it does not work, but it works for my loading animation, any suggestions on what I am doing wrong?
$(document).ready(function () {
$('#iframe1').load(function(){
{
$('#form_container').hide()
$('#mydivhide1, #mydivhide2').show()
});
This is the loading animation script which works
$(document).ready(function () {
$('#iframe1').on('load', function () {
$('#loader1').hide();
});
});
/ in ready()
$('#form_710370').submit(function(){$('#loader1').show();return true;});
Here is the HTML
<div id="mydivhide1">1111</div>
<div id="mydivhide2">2222</div>
<div id="form_container">
<form id="form_710370" target="iframe" method="post" convert.php">
<input id="Website" name="url1" type="text" value=""/>
<input id="saveForm" type="submit" name="submit" value="submit" />
</form>
</div>
<div id="frameWrap">
<img id="loader1" src="ajax_loader_blue_512.gif" alt="loading gif"/>
<iframe id="iframe1" name="iframe1" src="page.html" > </iframe>
</div>
Here is the CSS
#mydivhide1 {display:none;}
#mydivhide2 {display:none;}
I think the issue you're running into is that you're preventing the form from submitting to the iframe which is then showing the divs but the iframe is never calling load again because the submit is being stopped.
Assuming that you want to show #mydivhide1 and #mydivhide2 when the form is submitted and then hide them when the iframe finishes loading, I came up with a fiddle that should do what you want: http://jsfiddle.net/CST4t/3/
Basically I just removed the e.preventDefault( ); and instead of returning false, I returned true so the form submission went through. I also cleaned up some items like the form action attribute and moved the submit function override to $(document).ready( );.
Edit
One other thing that I did was I changed the form target and the name of the iframe to a more commonly used name that seems to work better across more browsers. Apparently the name and target values are really touchy from browser to browser, see this answer.
$('#iframe1').contents().load(function() {
//window loaded
});

YUI3 button click event is acting like a submit type instead of a button type

I am using ASP.NET MVC 3 with the Yahoo API version 3. I am trying to get my YUI3 button to redirect to another page when I click on it, this button is my cancel button. The cancel button is a plain button type, but it is being treated like a submit button. It is not redirecting to the correct page, but acting like a submit button and it kicks off my page validation like what the submit button would do.
I thought that it might be with my HTML but I did validate it. It validated 100% correct. So I then stripped down the whole page to a bare minimum but the cancel button is still working like a submit button. Here is my HTML markup:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Create2</title>
</head>
<body class="yui3-skin-sam">
<h1>Test submit</h1>
#using (Html.BeginForm())
{
<button id="SaveButton" type="submit">Save</button>
<button id="CancelButton" type="button">Cancel</button>
}
<script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
<script>
YUI().use('button', function (Y) {
var saveButton = new Y.Button({
srcNode: '#SaveButton'
}).render();
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();
});
</script>
</body>
</html>
I'm not sure what I am doing wrong here? Is this maybe a bug in their API? I am testing on IE8 and on the latest version of FireFox.
UPDATE:
I forgot to mention that if these buttons are not between form tags then the redirect works fine. If I put them in form tags then the redirect does not work.
I would use a link because you are redirecting to another page. Doing it this way you wouldn't need to initialize it with javascript or register the onClick listener.
<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>
Look at this link to style your link: http://yuilibrary.com/yui/docs/button/cssbutton.html
The Y.Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.
There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:
<form action="/Administration/Department/Create2" method="post">
<button class="yui3-button">Save</button>
<a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>
After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. If you don't have to use JavaScript, better not to use it.
A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.
YUI().use('button-plugin', function (Y) {
Y.all('button').plug(Y.Plugin.Button);
Y.one('#CancelButton').on('click', function () {
Y.config.win.location = '/Administration/Department/List';
});
});
And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:
var cancelButton = new Y.Button({
srcNode: '#CancelButton',
on: {
'click': function (e) {
e.preventDefault();
Y.config.win.location = '/Administration/Department/List';
}
}
}).render();

Javascript alert box unnecessarily submits form

I have a simple javascript method to show an alert box. The method is called when a button is clicked (which is between the form tags). The alert is supposed to simply display a help dialog, but when the user presses the "ok" button on the alert box it submits the form! I cannot figure out how to prevent this. I've tried changing how I make the button and my alert method, but nothing seems to make a difference. Here is my code:
<script type="text/javascript">
function help(){
alert("Displaying help...");
}
</script>
Below is how I've created the button. I also tried creating the button with button tags, but the same problem occurred.
<form action="./go.php" method="post">
<input type="image" src="./help.png" name="help" width="25" height="25" onclick="help()">
.
.
.
</form>
Any help on how I can prevent the alert box from submitting the form is greatly appreciated. Thanks in Advance!
The best way to fix this would be to use a regular <img> tag
<img src="./help.png" name="help" width="25" height="25" onclick="help()" />
But returning false from your code would probably work too
function help(){
alert("Displaying help...");
return false;
}
Add a return false; in your function:
<script type="text/javascript">
function help(){
alert("Displaying help...");
return false;
}
</script>

How can I use an anchor tag to submit a form with jquery

I want to use the following anchor to submit a form with jquery to Spring. How is this done?
<a target="" title="" class="" href="">Save</a>
I've tried this, where requestNew is my form:
$(document).ready(function(){
$("a").click(function(){
$("#requestNew").submit(function(){
$.post("../acctRequests", $("#requestNew").serialize());
});
});
});
It doesn't seem to go anywhere.
You are adding a new event handler; all you need to do is trigger the existing ones, and the browser's native functionality:
$(document).ready(function(){
$("a").click(function(){
$("#requestNew").submit();
});
});
Please use this
Submit
<form name="YOUR_FORM_NAME" action="YOUR_ACTION_PAGE_URL" method=POST>
<input type="text" name="YOUR_INPUT_NAME" value="YOUR_INPUT_VALUE"/>
</form>
Replace "YOUR_ACTION_PAGE_URL" with your targeted action url
Assign the submit handler outside the click. Then call it from the click.
$(document).ready(function(){
// Binds the submit handler to the #requestNew form
$("#requestNew").submit(function(){
$.post("../acctRequests", $("#requestNew").serialize());
});
$("a").click(function(e) {
$("#requestNew").submit(); // calls the submit handler
e.preventDefault(); // Prevents the default behavior of the link
});
});
HTML
<form...>
...
<a data-role="submit">Save</a>
</form>
jQuery
$(function(){
$("[data-role=submit]").click(function(){
$(this).closest("form").submit();
});
});
if you add an id to your anchor you can submit the form in your click function:
<a target="" title="" class="" href="" id="saveButton">Save</a>
$(document).ready(function(){
$('#saveButton').click(function(){
$("#requestNew").submit(); //if requestNew is the id of your form
});
});
If you are trying to submit it with ajax that's a different solution but I'm not sure if that's what you want based on your question
the simplest way is this:
Submit

Categories