I want to validate my form on button click.
For that I used ("#trade").validate();.
But My problem is that when user click on my button so it's call one more function which post my data.
<input type="button" class="button" value="Save" onClick="create_trade();">
I used
<script type="text/javascript">
$(document).ready(function(){
$("#trade").validate();
});
</script>
Now how will I validate this form.
After form validation, you call the function create_trade(), in the submitHandler event.
<script type="text/javascript">
$(document).ready(function(){
$("#trade").validate({
submitHandler: function(form) {
create_trade();
}
});
});
</script>
use form tag's onsubmit attribute.
like this <form onsubmit="return validate()"
This will not submit form data if the function returns true so make sure you return true only if your validation is done otherwise return false from the function so that your form data will not be submitted.
<form name="form1" method="post" action="">
<input type="button" class="button" name="save" value="Save">
</form>
<script>
function fn_submit()
{
document.form1.submit();
}
</script>
try this....
Try this code if you want to call the validation function on clicking the button
<script type="text/javascript">
$(document).ready(function(){
$("input[type=button]").click(function() {
//validation code
});
});
</script>
Related
Full page is at http://f14.co/auto-search/reno
I have the following checkbox set up outside a form:
<div class='span5' style='margin-left:0px !important;'>
<label for='model0'>
<input type="checkbox" name="model0x" id="model0x"
value="Accord" style='margin-top:-5px !important;'> Accord</label>
</div>
I have this javascript between the checkbox and the form:
<script>
if($("#model0x").is(':checked')){
$("#model0_is_checked").val($("#model0x").val());
}else{
$("#model0_is_checked").val("Not Checked");
}
</script>
Finally, I have this hidden input to call that value inside the form when the item is checked or not:
<form method="post" class="form-horizontal" id="final_form" action="send_mail.php">
<input type="hidden" id="model0_is_checked" name="model0_is_checked">
MORE FORM STUFF AND SUBMIT BUTTON
</form>
No matter what I'm getting no value in the send_mail.php ....what am I doing wrong?
$('#model0x').click(function(){
var self=this;
$("#model0_is_checked").val($(self).is(':checked')?self.value:'Not Checked');
// do something
});
// or use submit ()
Bind the function to the form submit.
<script>
$('#final_form').on('submit',function(){
if($("#model0x").is(':checked')){
$("#model0_is_checked").val($("#model0x").val()); }
else { $("#model0_is_checked").val("Not Checked");}
});
</script>
jsFiddle example http://jsfiddle.net/KZrLp/
Your Javascript runs once, when the page (or more accurately, the <script> tag) is loaded. You have to make it run when the form is submitted instead:
<script type="text/javascript">
function updateHidden() { // Find a better name ;)
if($("#model0x").is(':checked'))
$("#model0_is_checked").val($("#model0x").val());
else
$("#model0_is_checked").val("Not Checked");
}
$(document).ready(function() { $('#final_form').submit(updateHidden); });
</script>
P.S. : not tested code
<?php
if (!empty($_FILES)){
echo "<pre>";
echo $_FILES['file']['type'];
echo "</pre>";
return;
}
?>
<script type="text/javascript">
function autoUpLoad(){
$("#txtHint").html("<center><img src='include/images/loader.gif' />Reading selected file...</center>");
$(document).ready(function(){
$("#file").change(function(){
$("#myForm").submit(function(data){
$("#txtHint").html(data);
});
});
});
}
</script>
<form id="myForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" id = "file" onchange='autoUpLoad()'/>
<input type="submit" value="Send" />
</form>
<div id="txtHint">
test
</div>
The above code is not working and I am not sure what is wrong here? It works only if I remove these lines:
function(data){
$("#txtHint").html(data);
}
It just doesn't allow me to return data to txtHint. Can anyone explain to me how to make it work?
You are binding a submit event, not fire it.
.submit() method with a callback as parameter is used to bind submit event, without parameter to fire the submit event.
You should do something like below:
$(document).ready(function () {
$("#myForm").submit(function (data) {
$("#txtHint").html(data);
});
$("#file").change(function () {
$("#myForm").submit();
});
});
I am getting the form on click from a file called test.php which contains the following:
<form method="post" class="adminTM">
<input type="hidden" name="execID" value="<?=$_POST['exec']?>" />
<input type="hidden" name="fromTM" value="<?=$_POST['TM']?>" />
<input type="text" name="toTM" value="<?=$_POST['TM']?>" />
<input type="hidden" name="symbol" value="<?=$_POST['symbol']?>" />
<button class="submitTM">SUBMIT</button>
</form>
The javascript looks like so:
$(function(){
$('.adminTMClick').live('click', function(e){
$(this).data('TM', this.innerHTML);
$.post('test.php', $(this).data(), function(data){
$(data).dialog({
modal: true,
beforeClose: function(){
$(this).remove();
}
});
console.log($('.adminTM'));
console.log($('.submitTM'));
});
});
$('.submitTM').live('click', function(e){
//originally had .adminTM with submit which failed
e.preventdefault();
alert('i am here');
return false;
});
});
How do i make it so that the form DOES NOT do the default submit action when the submit button is clicked?
Here is a fiddle that demonstrates basically what I am doing (i had to change it a bit because of the way jsfiddle works): http://jsfiddle.net/maniator/tQVnV/show/
You should use the submit() event on the form instead of the click() on the submit, since pressing enter will still submit the form (bypassing the submit button).
This should properly prevent the form from doing the default submit:
$('.adminTM').live('submit', function(e) {
// execute custom code
console.log("submit event fired");
// prevent default submit
return false;
});
jsFiddle: http://jsfiddle.net/bjorn/tQVnV/11/
I have this code :
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
});
});
</script>
<form action="index.php?explore=browse" method="post">
<input type="hidden" id="changeArtist" name="artist" value="<?=$artist?>" />
<a name="linkArtist" title="a" href="#">A</a> -
<a name="linkArtist" title="b" href="#">B</a> -
<a name="linkArtist" title="c" href="#">C</a>
</form>
When I click on the button, I set the link value (as 'title') to the hidden field, and after I'd like to send that form! How can I do it? And what do you think about this code? Can I better it?
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('a[name=linkArtist]').click(function(e) {
e.preventDefault();
$('#changeArtist').val($(this).attr('title'));
$('#myForm').submit();
});
});
</script>
The form:
<form action="index.php?explore=browse" method="post" id="myForm">
Note the form id and the change to the click handler to access it.
I don't think you need to use preventDefault() at all. The form should not submit until the function has returned.
There are similar questions at SO, but none that seem to address this.
Below is a very simplified variant of my situation. Drupal/PHP site -- I have a form w/ submit button that I am using jquery.form plugin to ajax-ly submit. It works fine if I use the submit (#submit) button.
Now, I want to programmatically fire that button using another button (#submit2) outside of the form. I can do that using jquery click() function, but the content coming back isn't going to the ajax target as I would expect.
I do not have much freedom to re-organize this code, else i would.
(Note I tried to make this code easy for you to run by src-ing jquery and the form plugin from my website.)
Ideas? Thanks!
<?php
if ($_REQUEST['submit'] == 'Submit') {
print 'ajax returns ... ' . $_REQUEST['text'];
exit;
}
?>
<html>
<head>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://enjoy3d.com/scripts/jquery.form.js"></script>
<script type="text/javascript">
$(function() {
$('#form').ajaxForm( { target: $('#span') } );
$('#submit2').click( function() { $('#submit').click(); } );
});
</script>
</head>
<body>
<span id='span'>target span</span>
<form method='post' id='form'>
<input type='text' name='text' size='50' />
<input type='submit' id='submit' name='submit' value='Submit'/>
</form>
<input type='submit' id='submit2' name='submit2' value='Submit Too?' />
</body>
</html>
I managed to solve a similar situation to yours. If the only objective of simulating a click on submit1 is to submit the form, you might try:
$('#submit2').click(function() {
$('#form').trigger('submit');
});
You may also need to return false immediately after triggering the form submit button from the non-form submit button click event code. For example:
<script type="text/javascript">
$(function() {
$('#form').ajaxForm({ target: $('#span') });
$('#submit2').click(function() { $('#submit').click(); return false; });
});
</script>
It works for me. Is that what you are looking for?
Have you tried giving a name to the form, and instead of
$('#submit2').click( function() { $('#submit').click(); } );
doing
$('#submit2').click( function() { document.myForm.submit(); } );
That should do the same thing as having the submit button clicked if the form has been ajaxified.