The html code below:
<div class="row">
<form class="col-xs-6" id="add-car-form" method="post" action="add_cars.php">
<div class="form-group">
<label for="car-name">ADD CAR</label>
<input type="text" name="car_name" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="add car">
</div>
</form>
</div>
The Javascript code with AJAX inside following:
$('#add-car-form').submit(function (e){
e.preventDefault();
var postData=$(this).serialize();
var url=$(this).attr('action');
$.post(url,postData, function (php_table_data){
$('#car-result').html(php_table_data);
$('#add-car-form')[0][0].reset();
});
});
The input element never resseting. I tried to put an id in my input element and targeting with reset() function but neither worked.
Any help from you is welcome.Thanks
Try $('#add-car-form')[0][0].val("");
$('#add-car-form').find("input[type=text]").val(""); will clear all text inputs in the form
jQuery does not have a reset() method, but js does, so if you want to use reset() you should use
document.getElementById('#add-car-form')[0][0].reset()
Related
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
}
}
?>
This is how my razor code looks like
<form asp-action="Save" asp-controller="ClassesHeld" method="post">
<input asp-for="ClassHeldId" value="#Model.ClassHeldId" hidden />
<div class="form-group">
<label>Student</label>
<input asp-for="#Model.Student" value="#Model.Student" class="form-control" readonly />
</div>
<div class="form-group">
<label>Grade</label>
<input id="Grade"asp-for="Grade" type="number" value="#Model.Grade" class="form-control" min="0" max="5" />
</div>
<div class="form-group">
<label>Attendance</label>
<input id="Attendance" class="form-check-input" asp-for="Attendance" type="checkbox"/>
</div>
<button class="btn btn-primary" type="submit" value="Save">Save</button>
</form>
<script>
$("#Attendance").on("change", function () {
$("#Grade").attr("disabled", this.checked);
});
</script>
Yet for some reason, clicking on the checkbox does nothing at all. I have tried this with simple script as well, and that didn't work either.
document.getElementById('Attendance').onchange = function () {
document.getElementById('Grade').disabled = this.checked;
};
Neither of these worked.
I have even copied some solutions from here (one of them is that last simple scrip with document.getElementbyId, and none of it worked. I have to be missing something simple, but I've been looking at this for the past hour and I still can't figure it out.
I apologize if the question is stupid or noob-level. But I am getting desperate.
EDIT: Simply to add more information, this form works perfectly fine when submitting data, controller saves the stuff to the database... Everything works fine, just not the part where it disables the ability to edit the Grade if the student has not attended.
So the objective, is to disable the input field when the checkbox for "attendance" is checked
The .attr() method only manage string; So if you want to change an attribut like disabled or even checked with a boolean or something else, you have to use the prop method.
For more information check this post :
.prop() vs .attr()
You can execute the snippet below.
$("#Attendance").on("change", function () {
$("#Grade").prop("disabled", this.checked)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form asp-action="Save" asp-controller="ClassesHeld" method="post">
<input asp-for="ClassHeldId" value="#Model.ClassHeldId" hidden />
<div class="form-group">
<label>Student</label>
<input asp-for="#Model.Student" value="#Model.Student" class="form-control" readonly />
</div>
<div class="form-group">
<label>Grade</label>
<input id="Grade"asp-for="Grade" type="number" value="#Model.Grade" class="form-control" min="0" max="5" />
</div>
<div class="form-group">
<label>Attendance</label>
<input id="Attendance" class="form-check-input" asp-for="Attendance" type="checkbox"/>
</div>
<button class="btn btn-primary" type="submit" value="Save">Save</button>
</form>
<script>
</script>
I think you actually need to remove the disabled attribute when you don't want it. Maybe try this:
$(document).ready(function() {
$("#Attendance").on("change", function () {
if (this.checked) {
$("#Grade").attr("disabled", true);
} else {
$("#Grade").removeAttr("disabled");
}
});
});
I have created form in html now i try to using onsubmit for validation as well as onclick for another operation if onsubmit return true. i cant find the correct way of doing this.
<form role="form" onsubmit='return formValidation()'>
<div class="form-group">
<p id="bookiderror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ಐಡಿ:</label>
<input type="text" id="bookid" class="form-control">
</div>
<div class="form-group">
<p id="booknameerror" style="color: red"></p>
<label>ಪುಸ್ತಕದ ಹೆಸರು:</label>
<input type="text" id="bookname" class="form-control">
</div>
<div class="form-group">
<p id="rupeeserror" style="color: red"></p>
<label >ರೂಪಾಯಿ:</label>
<input type="text"id="rupees" class="form-control">
</div>
<div class="form-group">
<p id="bookpubishererror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ಪ್ರಕಾಶಕರು:</label>
<input type="text" id="bookpublisher" class="form-control">
</div>
<div class="form-group">
<p id="bookeditionerror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ಆವೃತ್ತಿ:</label>
<input type="text" id="bookedition" class="form-control">
</div>
<div class="form-group">
<p id="bookyearerror" style="color: red"></p>
<label >ಪುಸ್ತಕದ ವರ್ಷ:</label>
<input type="text" id="bookyear" class="form-control">
</div>
<input type="submit" value="AddBook" class="btn btn-primary" onclick="addbook()" id="submit"/>
</form>
You can do so like this. The formValidation method should return false otherwise page will refresh.
function formValidation(){
//write your formValidation logic here
if(form.isValid){
//call your add book here
addbook();
}
return false;
}
function formValidation(){
//Enter your validation logic here.
if (false) return false;
return true; //default
}
function addBook() {
if (formValidation()){
//Your insertion code here.
}
else
{
alert('Error message.');
}
}
Now, just remove the onClick function then put the addBook() function to your onSubmit.
You can't.
The click event fires first. Only after it is resolved with the default behaviour of the submit button activate and trigger the submission.
Consequently it isn't possible to run the submit handler before the click handler.
You need to either:
Do all the tests your submit handler does at the top of each click handler.
Let the click handler just record which submit button was activated, and then use that to determine what to do at the end of the submit handler.
How do i change my submit button text after submit?? i have a form with a button . i would like to change the button text from click to Next after submit the form.
<form>
<div class="form-group">
<div class="rightbox"> <label for='phone'>phone</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" />
</div></div>
</div>
<div class="form-group">
<div class="rightbox"> <label for='phone'>mobile</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
</div></div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="btnok">
<br/>
<button type="submit" class="btn-primary" >
click
</button>
</div>
</div>
</div>
</form>
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
return $btnElm.text('Next');
});
})
<button type="submit" class="btn-primary" id="save" >
i think this is how you can change.
else you want to more specific with the only after form is submitted then you can go with the ajax method to submit the form and change the text the of button to next after only submitting the form
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
$.ajax({
url: $(this).attr('action'),
method: "POST",
data : $(this).serialize(),
success : function (data){
$btnElm.text('Next');
}
});
});
});
You can try with the below link.
fiddle link
$(document).ready(function(e) {
$('#theForm').submit(function() {
var txt = $('#btnSubmit');
txt.val("Next");
return confirm("Do you want to save the information?");
});
});
Updated link: Fiddle
Try with this.
First off all, add id to your form and button.
<form id="myform">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
Then, using JQuery you can do a Jquery Callback after form submit.
$("#myform").bind('ajax:complete', function() {
document.getElementById("mybutton").value="New Button Text";
});
It works for me. I Hope it helps.
Edit
If you dont want to use JQuery you can use onSubmit event to call a function after form submit.
<form onsubmit="changeButton()">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
This is the function to change button text.
function changeButton(){
document.getElementById("mybutton").value="New Button Text";
}
I have a form which inputs name of a country and then it overwrites a global variable. Submit button does nothing when clicked. Where am I missing?
Here is the HTML
<div ng-controller="InputController">
<form class="form-wrapper cf" role="form">
<input type="text" ng-model="model.country" placeholder="Search country..." required>
<button type="submit" ng-click="update()">Search</button>
<span>{{model.country}} ======</span>
</form>
</div>
And here is the controller.
LastFmApp.controller('InputController',
function InputController($scope) {
$scope.model = {};
$scope.update = function() {
console.log($scope.model.country);
};
});
I don't think it is an issue with angular js.
The submit button will reload the page so you won't be able to see changes in your model.
You can either use an input type button with ngClick:
<input type="button" ng-click="update()">Search</input >
Or an input type submit with ngSubmit attribute on your form:
<form ng-submit="update()">
<input type="submit">Search</input>
</form>
i dont think there is any issue with your code see your code is working in plunker
<div ng-controller="InputController">
<form class="form-wrapper cf" role="form">
<input type="text" ng-model="model.country" placeholder="Search country..." required>
<button type="submit" ng-click="update()">Search</button>
<span>{{model.country}} ======</span>
</form>
</div>
http://plnkr.co/edit/u9hqu1bASxxMgtEP1qAr?p=preview