I've got a form, with 2 buttons
<button>Cancel changes</button>
<button type="submit">Submit</button>
I use jQuery UI's button on them too, simply like this
$('button').button();
However, the first button also submits the form. I would have thought that if it didn't have the type="submit", it wouldn't.
Obviously I could do this
$('button[type!=submit]').click(function(event) { event.stopPropagation(); });
But is there a way I can stop that back button from submitting the form without JavaScript intervention?
To be honest, I used a button only so I could style it with jQuery UI. I tried calling button() on the link and it didn't work as expected (looked quite ugly!).
The default value for the type attribute of button elements is "submit". Set it to type="button" to produce a button that doesn't submit the form.
<button type="button">Submit</button>
In the words of the HTML Standard: "Does nothing."
The button element has a default type of submit.
You can make it do nothing by setting a type of button:
<button type="button">Cancel changes</button>
Just use good old HTML:
<input type="button" value="Submit" />
Wrap it as the subject of a link, if you so desire:
<input type="button" value="Submit" />
Or if you decide you want javascript to provide some other functionality:
<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
Yes, you can make a button not submit a form by adding an attribute of type of value button:
<button type="button"><button>
<form onsubmit="return false;">
...
</form>
Honestly, I like the other answers. Easy and no need to get into JS. But I noticed that you were asking about jQuery. So for the sake of completeness, in jQuery if you return false with the .click() handler, it will negate the default action of the widget.
See here for an example (and more goodies, too). Here's the documentation, too.
in a nutshell, with your sample code, do this:
<script type="text/javascript">
$('button[type!=submit]').click(function(){
// code to cancel changes
return false;
});
</script>
<button>Cancel changes</button>
<button type="submit">Submit</button>
As an added benefit, with this, you can get rid of the anchor tag and just use the button.
Without setting the type attribute, you could also return false from your OnClick handler, and declare the onclick attribute as onclick="return onBtnClick(event)".
<form class="form-horizontal" method="post">
<div class="control-group">
<input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code">
</div>
<div class="control-group">
<input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required>
</div>
<div class="control-group">
<input type="text" class="span1" name="unit" id="inputPassword" required>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Semester</label>
<div class="controls">
<select name="semester">
<option></option>
<option>1st</option>
<option>2nd</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Deskripsi</label>
<div class="controls">
<textarea name="description" id="ckeditor_full"></textarea>
<script>CKEDITOR.replace('ckeditor_full');</script>
</div>
</div>
<div class="control-group">
<div class="controls">
<button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button>
</div>
</div>
</form>
<?php
if (isset($_POST['save'])){
$subject_code = $_POST['subject_code'];
$title = $_POST['title'];
$unit = $_POST['unit'];
$description = $_POST['description'];
$semester = $_POST['semester'];
$query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error());
$count = mysql_num_rows($query);
if ($count > 0){ ?>
<script>
alert('Data Sudah Ada');
</script>
<?php
}else{
mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error());
mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error());
?>
<script>
window.location = "subjects.php";
</script>
<?php
}
}
?>
Been having trouble with a form not submitting data to a page (Change Password) when on any page of the website apart from the index page (Which is working as it should). The website is built using CodeIgniter.
The code currently used on all pages for the form is the following:
<div class="modal-body">
<form role="form" id="change_password_form" action="<?php echo base_url('auth/change_password')?>" method="post">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="Old Password" name="old" type="password" autofocus>
</div>
<div class="alert alert-danger" id="old" role="alert" style="display:none"></div>
<div class="form-group">
<input class="form-control" placeholder="New Password - minimum 8 characters" name="new" type="password" value="">
</div>
<div class="alert alert-danger" id="new" role="alert" style="display:none"></div>
<div class="form-group">
<input class="form-control" placeholder="Confirm New Password" name="new_confirm" type="password" value="">
</div>
<div class="alert alert-danger" id="new_confirm" role="alert" style="display:none"></div>
<input type="hidden" name="user_id" value="<?php echo $user_id;?>" id="user_id" />
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="changepassword" value="Submit">Submit</button>
</form>
</div>
On the index page, this successfully goes to the change_password function and will check the details to see if they meet the rules. An error message is shown below the text box when submit is clicked. However on other pages using the same code, nothing happens when submit is clicked. when I go into Main.php and change the page of index.php in the index function to any other page (view_inventory.php for example), The change password works correctly on the new index page, but will not work on the old index page.
I can get the change password to work on other pages if I replace the submit button with the code below (Doesn't show the results under the text boxes, but on a new blank page), but I didn't really want to have to edit so many pages if it can be fixed in a smaller amount.
<input type="submit" value="Submit" class="btn btn-primary">
Any help would be gratefully appreciated.
I had the same error last week. you have to use a Submit inside form instead of button.
You can use form_submit for example:
echo form_submit('mysubmit', 'Submit');
// Would produce: <input type="submit" name="mysubmit" value="Submit" />
Here is the documentation:
http://www.codeigniter.com/user_guide/helpers/form_helper.html
Regards.
Here is my html:
<form id="quant" method="POST" action="/portfolio" name="trans">
<div class="modal-body">
Shares : <input autocomplete="off" type="text" name="quantity">
<input type="hidden" value="<?= htmlspecialchars($_GET['q']); ?>" name="stock">
<input type="submit" name="val" value="Confirm Transaction" class="btn btn-primary">
<div id="slider-range-max"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
Here is an image of my web inspector showing that in fact that data was requested:
I have been trying to figure out why this has not been working for a long time, any suggestions would be appreciated.
The Code:
if(isset($_POST["quantity"])) {
var_dump($_POST);
which returns nothing
Then you need a slash after it to let it know it is a folder and not a file: action="/portfolio/"
If you're using something like AngularJS to submit your form, it doesn't send POST data the typical way. Check out this post.
I have a login form inside a fancybox popup and for some reason the submit button doesn't work.
I tried using different html input types as show below.
With type="button" the form works but when i click enter is doesnt submit form
With type="submit" the form doesnt work at all when i click submit or press enter it just redirects me to mysite.com/?login=&pass=&submit=SIGN+IN+TO+YOUR+ACCOUNT closing the fancy box
This below is form code
<div style="display:none">
<div id="sign_in" class="fancybox_message sign_in_popup">
<div class="login_form_container">
<h1 class="semibold">SIGN IN TO YOUR ACCOUNT</h1>
<form>
<input type="text" name="login" id="login" class="regular" autocomplete="off" placeholder="Username or Email" />
<input type="password" name="pass" id="pass" class="regular" autocomplete="off" placeholder="Password" />
<div class="clear"></div>
<div class="squaredFour">
<input style="display: none;" type="checkbox" value="None" id="squaredFour" name="check" />
<label for="squaredFour"></label>
</div>
<span class="regular remember">Remember me</span>
Forgot your username/password?
<div class="errorHolder" style="float: left;margin-top:5px;color:red"></div>
<input type="button" name="submit" id="ajaxLogin" class="semibold submit" value="SIGN IN TO YOUR ACCOUNT" />
</form>
</div>
<div class="login_social_container">
<!--<img src="<?php echo $website_domain; ?>/assets/images/login_facebook.png" alt="Login from facebook" />-->
Login with Facebook
Login with Twitter
Login with Linkedin
Login with Google+
</div>
</div>
</div>
You should add
onclick="submitMyForm()"
to the submit button, then implement your ajax operation in a function called submitMyForm.
If you're not sure about ajax or don't want to juggle with the fields, you can use a hidden iframe and make your <form> target point there. This way you get the submitted info just as you normally would but no page reload will happen.
I'm a newbie programmer trying to utilize Twitter Bootstrap to build out a concept. I'm using PHP and assigning actions within HTML tags to POST data and essentially take a user through the navigation. This has been pretty straightforward when using forms: i.e. here is a snippet that does work. For example, for this snippet of HTML:
<form action="?viewnotes" method="post">
<input type="hidden" name="id" value="<?php htmlout($note['id']); ?>">
</form>
It successfully triggers the following if statement in my index.php:
if (isset($_GET['viewnotes']))
However, I'm trying to do the same thing in my registration page, using a Twitter Bootstrap class for buttons. Here is the HTML:
<a class="btn btn-primary btn-large" action="?register">Sign Up Free!ยป</a></p>
The PHP code is:
if (isset($_GET['register']))
{
include 'register.html.php';
}
Clicking on the Sign Up button is not invoking the PHP code. If I hard code the URL it works, but then I have a similar issue on the register.html.php page. HTML on the register page has:
<form class="form-horizontal" action="?storeuser" method="post">
<fieldset>
<legend>It's quick and easy...</legend>
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" name="fname" class="input-xlarge" id="fname">
</div>
</div>
<div class="control-group">
<label class="control-label" name="lname">Last Name</label>
<div class="controls">
<input type="text" name="lname" class="input-xlarge" id="lname">
</div>
</div>
<div class="control-group">
<label class="control-label" name="email">Email Address</label>
<div class="controls">
<input type="text" name="email" class="input-xlarge" id="email">
</div>
</div>
<div class="control-group">
<label class="control-label" name="password">Password</label>
<div class="controls">
<input type="password" name="password" class="input-xlarge" id="password">
</div>
</div>
</fieldset>
<button type="submit" name="action" class="btn btn-primary btn-large">Complete Registration</button>
</form>
However, when clicking on the button, the index file does not trigger the following, which would store the fields into the DB.
if (isset($_GET['storeuser']))
If I hardcode the URL to register.html.php, then the resulting URL looks like localhost/register.html.php?storeuser instead of localhost/?storeuser. I'm not sure if that's affecting the behavior here.
Thank you for the help!
I think you're approaching this the wrong way, and it's not Twitter Bootstrap's fault.
Usually, you'd use POST, not GET, to handle user registrations. Your form would look like this:
<form action="register.php" method="post">
<!-- your form -->
<fieldset>
<input type="submit" name="register" value="Register" class="btn btn-primary" />
</fieldset>
</form>
You can then build register.php as follows:
<?php
if (isset($_POST['register'])) {
// handle user registration
}
// display form
?>
This will display the form when the user visits register.php, but will try and process the user registration first if the form's been POSTed.
try passing a value with your GET variable
<form action="?viewnotes=1" method="post">