I need to make this show an error if the user tries to leave the page without checking this tickbox. It has no other use other than visual, is there a way to implement such a thing?
<span>
<input value="1" type="checkbox" name="salgsvilkar" ID="checkbox2" style="float:left;"
onclick="document.getElementById('scrollwrap').style.cssText='
border-color:#85c222;
background-color:#E5F7C7;';" />
<label for="checkbox2" class="akslabel">
Salgs og leveringsvilkår er lest og akseptert
</label>
</span>
Attached CSS is just for styling, no point posting it up.
I have tried:
{literal}
<script type="text/javascript">
if ($("#checkbox2").val()==1){
alert('Please accept the terms of sale');
//or you can use other method of showing the error. lightbox? showing error msg on a span, etc.
}
</script>
{/literal}
Entered this in the markup just before the checkbox, but it doesn't want to work.
UPDATE:
Further to answers given, here is the form submit code..
{form action="controller=checkout action=payOffline query=id=$method" handle=$offlineForms[$method] method="POST"}
{include file="block/eav/fields.tpl" fieldList=$offlineVars[$method].specFieldList}
<div id="handel_fortsett_btns">
<p class="submit">
<span><span><span><span> </span></span></span></span>
<input type="hidden" name="step" value="{$step}" />
<label></label>
<button type="submit" class="submit" name="{$method}" id="fullfor_btn" title="Fullfør bestillingen nå" value=""> </button>
</p>
</div>
{/form}
Thanks.
Yes. use jquery.
$(document).ready(function() {
//this should capture your submit button click event and the return false will stop the submission.
$("#fullfor_btn").click(function(){
if ($("#checkbox2").val()==1){
alert('your error msg');
//or you can use other method of showing the error. lightbox? showing error msg on a span, etc.
return false; //or use other method to stop your form from submitting.
}
});
)};
and here's a bit of tutorial to get you started, don't fret it if you don't know what to use at first. just learn the selector and slowly work your way up. it will be a worthwhile investment :)
and how are you submitting the form now?
if it's just a submit button you can use jquery to add the click event to the submit button and return false when you don't want the button to submit.
["Salgs og leveringsvilkår er lest og akseptert" (Swedish? Norwegian?) is about accepting terms and conditions.]
I hope it is not just for display. You need to check server-side too that the user has accepted your terms.
To do client-side form checking, you will want to use JS to override the submit button's action, check the data (as melaos demonstrates, though jQuery is not needed), and display the comments next to each form element. A bit of a pain really. You have to re-validate it all server-side too in case JS is accidentally (or not) disabled.
Related
I have an input like this:
<input value="<?php echo $formdata['title'] ?>" type="text" name="title" id="Editbox2">
This is an edit page, I load database data into fields with echo, replace them, and hit submit to update them.
But when I hit submit it refreshes the old data onto browser's fields, how can I prevent this?
Submit your form using ajax request with jquery submit.
Use action="javascript:;" for the form tag
You need to handle the script with javascript, then prevent the default behaviour, which is refreshing the page. Here is an example:
*I haven't tested this, but from what I recall this is what I used to do. Let me know if it doesn't work, I'll give other suggestions.
<form>
<!-- elements inside -->
<input type="submit" id="submit-btn" value="Submit"/>
</form>
and in your javascript have the following:
<script>
$("#submit-btn").click(function(e){
e.preventDefault();
// handle form here with your JS
});
</script>
When my contact form is not sent because of blank fields it reloads the site and shows an error message before the form. A "success" message is shown when everything is ok.
The problem is that the contact form is in the footer and you can't see either message without scrolling down yourself after sending the form.
I've tried this in the submit button, though it doesn't work.
<input type="submit" value="Send" onsubmit="location.href='#footer';">
Footer is the id where I want the user to be sent after submitting.
Any ideas?
Thanks!
EDIT
Using "index.php?#footer" instead of the id alone seems to work in the case of the error message, not in the case of success for some reason....
You can add #footer to the form's action value
<form action="/some_path/#footer">
<input type="submit" value="Send">
</form>
I think you want to get the position of your element first.
Call it the following:
<input type="submit" value="Send" onsubmit="anchorfunction('#footer');">
Then your JS function should look like this:
function anchorfunction(elem) {
var top = document.getElementById(elem).offsetTop;
window.scrollTo(0, top);
}
This way you will get the top of your element and scroll within the current window to it.
i am very beginner to php,html and web development.Now iam learning php.
And i have a doubt which is exactly same as how to check if input type button is pressed in php?
but i couldn't find any appropriate answers there.Please see the above link...
Actually form submission is done by using Java script, that's why he have something like this in button's onclick="send(this.form)" ...And this button type is not 'submit'but it is 'button' itself and i tried one of the answer that i found there
Using print_r($_POST) to print all Submitted values..But i couldn't find my button there..
My html code
<Form action="user_register.php" method="post">
<input type="text" id="txtEmail" name="textEmail"/>
<input type="button onclick=runjava() Name="Button"/>
</Form>
My Javascript
function runjava()
{
---
----Codes for validation and some animation
document.forms.item(0).submit();
}
please help me regarding this
Yes, you can use jQuery/javascript to do this.
Generally, you should assign either an ID or a class to your input element to easily identify exactly which control fired the event.
Suppose you have this input button:
<input type="button" id="mybutt" value="Click Me">
To alert when button is clicked:
$(document).ready(function() {
$('#mybutt').click(function() {
alert('it was pressed');
});
});
The $(document).ready(function() { bit makes sure that the page (DOM) has loaded all elements first, before it allows the code to bind events to them, etc. This is important.
NOTE THAT before you use jQuery commands, you must first ensure the jQuery library has been referenced/loaded on your page. Most times we do this in the <head> tags, like so:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
but it can be loaded any time before the jQuery code.
I want to take advantage of some jquery functions for sending messages like having a modal dialog but I also want to include users not running javascript.
If I have a jquery function to handle the dialog but the user doesn't have javascript enabled whats the best way to redirect them to my PHP page for composing and sending a message?
I'm assuming the jquery code takes highest priority since it's client side but then do I wrap my php code in tags?
Is there a more elegant solution?
I think what I would do here is take advantage of the onclick event of the button. You can use javascript or jquery to return false. If the browser has javascript turned off, the form will then be submitted.
<input type="button" onclick="return btnClick()" value="submit">
and then in your javascript something like
function btnClick(){
//do ajaxy stuff
return cancelEvent()
}
function cancelEvent()
{
if (window.event) window.event.cancelBubble = true;
return false;
}
What you want to do is make a normal HTML form:
<form action="submit.php" method="POST" id="sendMessage">
<input id="msg" name="message" type="text" />
<button type="submit">Submit</button>
</form>
And then use jQuery to override the submit feature:
$('#sendMessage').submit(function(e){
e.preventDefault(); // Stops the browser from submitting the form normally
// Do stuff...
});
So, if JavaScript is enabled, jQuery will handle form submission. It it's not enabled, the browser will POST the form normally.
I am using an image instead of a submit button for search option and use onclick events to load the results using ajax in php.Now I need to load results by hit enter also.Is their any ways to update my application without changing the image.
Thanks
Sure, add <input type="submit" style="display:none;" /> to the end of your form, should trick the browsers into allowing the Enter key to submit your form.
As far as getting the same functionality as your AJAX onclick event: You should be tying your ajax function to the <form>'s submit event instead of the <input>'s click event.
jsfiddle demonstration (uses jQuery for ajax ease, but your event doesn't have to)
I don't know what javascript library you're using, but I'll use jQuery in my example.
<script>
$(document).ready(function() {
$("form#interesting").bind("submit",function() {
$.get("target_page.php".function() {
// Callback functionality goes here.
});
});
});
</script>
<form id="interesting">
Enter your input: <input type="text" name="interesting_input" />
<!-- input type="image" is a way of using an image as a submit button -->
<input type="image" src="submit_button_image.gif" />
</form>
Hmm, There are several things I can think about.
fitst one - someone mentioned that you can style submit button as an image. Good idea and it's easy. this tutorial was posted as an answer some time ago http://www.ampsoft.net/webdesign-l/image-button.html .
Another problem is, you bind your submit event to onclick, but the natural submit for form is onsubmit. So if you hit enter on form input the form receives onsubmit event. You have to bind your JS to it.
It works genrally as in answer from #phleet when you use jquery, when you don't use any library, you can do something like
<form onsubmit="YOUR_JS_HERE">.....</form>
like in onclick. I also recommend using jQuery, though.