We Keep Coding

AJAX form only allows one submission?

I am creating a form which will be submitted through the use of jQuery AJAX, but I am for some reason only able to submit the form once. To submit again I have to refresh page?
How do i accomplish the form and script so I do not have to refresh?
Here is the form:
<form role="form" class="form-horizontal validate" name="create_form" id="create_form">
<div class="form-group">
<label class="col-sm-2 control-label" for="name">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" data-validate="required" data-message-required="Remeber to fill name" placeholder="">
</div>
</div>
<div class="form-group-separator"></div>
<div class="form-group">
<button id="submit_btn" class="btn btn-success">Create</button>
<button type="reset" class="btn btn-white">Reset</button>
</div>
</form>
And here is the AJAX part:
$(document).ready(function(){
$("#submit_btn").on("click", function () {
$.ajax({
type: 'POST',
url: 'data/create.php',
cache: false,
data: $('#create_form').serialize()
})
.done(function(data){
$("#name").val("");
})
.fail(function() {
console.log("ERROR");
});
// Prevent refreshing the whole page page
return false;
});
});
Hoping for help and thanks in advance :-)

use submit instead of click.
$('#submit_btn').on('submit', function(e) {
e.preventDefault();
... //rest of the code
});

I don't really see why you are wanting to run your script on document load. I would suggest you to include the script's source in the html and include an onClick attribute to the button element and then assign the event handler function call to it to be fired every time you click the Submit button.
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>

Form get submitted even the form validation fails

I am using http://www.formvalidator.net/index.html to validate my form but the form gets submitted even when the validation get failed.
Form code:
<form name="add-todo" class="form-horizontal" action="" method="post">
<h5>Add New Item</h5>
<div class="form-group">
<div class="col-md-12">
<input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-primary btn-add">Add</button>
</div>
</div>
</form>
jQuery code:
$(document).ready(function() {
$.validate({
modules: 'security'
});
$('form[name=add-todo]').submit(function(e) {
e.preventDefault();
var text = $("#todo-text-input").val();
$('.btn-add').text('Saving ....');
$.ajax({
url: this.action,
type: this.method,
data: {
text: text
},
success: function(response) {
$("#todo-text-input").empty();
$('.messages').removeClass('hide-element');
$('.alert').addClass('alert-success');
$('.alert').text('To do item added successfully.');
$('.alert').fadeTo(2000, 500).slideUp(500, function() {
$('.alert').slideUp(500);
});
}
});
});
});

dont use submit button. You can use
<button type="button" class="btn btn-primary btn-add">Add</button>
after that check your validation status. if its valid then submit the form.

<input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">
In your input field you don't need to use data-validation="required" just use required like
<input type="text" required class="form-control" id="todo-text-input" name="todo-text">

Please change you form validation code configuration like this:
$.validate({
form : '#registration-form',
modules : 'security',
onSuccess : function($form) {
alert('The form '+$form.attr('id')+' is valid!');
// write your ajax code to submit form data on server
return false; // Will stop the submission of the form
}
});
For more info follow:
http://www.formvalidator.net/index.html#configuration

button type submit refreshes page instead of triggering ajax network request [duplicate]

Alright, I have a simple form comprising of only a text field. Data written in the text field is stored in DB when we hit submit (Stored via ajax). The ajax works fine and data is submitted, however, the page get's refreshed automatically and the URL contains the content of the input field.
My Form :-
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="message"></label>
<div class="col-md-5">
<input id="message" name="message" type="text" placeholder="message" class="form-control input-md" required="">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit_message"></label>
<div class="col-md-4">
<button id="submit_message" name="submit_message" class="btn btn-success">Enter</button>
</div>
</div>
</fieldset>
</form>
Ajax :-
$("#submit_message").click(function() {
var message = $("#message").val();
$.ajax({
type: "POST",
url: "ajax_getter.php?requestid=2",
data: { message: message, c: c },
dataType: "html"
}).done(function( msg ) {
//load_content();
alert(msg);
});
});
PHP :-
//...
if($chat->insert("chat_threads", $arr))
{
echo 1;
}
else
{
echo 0;
}
After the result is show in the popup, the page refresh and the URL becomes something like :- chat.php?message=454545&submit_message=
Why is the page being refreshed ?

Seems that your form is being submitted. Try preventing the default event (i.e. submission):
$("#submit_message").click(function(e) {
e.preventDefault(); // This prevents form from being sumbitted
// the rest of your code
});

save jquery value with php

i have form like this
<div id="signUp" class="form-inline">
<div class="form-group">
<label for="">I Sign up as</label>
<input id="placehold" type="text" class="form-control text-center" readonly/>
<div class="smallspace"></div>
<div class="displayTable">
<div class="radio-inline">
<input type="radio" class="radio_item" value="Company" name="item" id="radioCompany">
<label class="label_item" for="radioCompany"></label>
<p class="text-center colorGrey">Company</p>
</div>
<div class="radio-inline">
<input type="radio" class="radio_item" value="Chef" name="item" id="radioChef">
<label class="label_item" for="radioChef"></label>
<p class="text-center colorGrey">Chef</p>
</div>
<div class="radio-inline">
<input type="radio" class="radio_item" value="Food lover" name="item" id="radioFoodLover">
<label class="label_item" for="radioFoodLover"></label>
<p class="text-center colorGrey">Food lover</p>
</div>
</div>
</div>
</div>
<script src="js/upload.js"></script>
inside upload js i code like this
(function($) {
"use strict";
// register
$(document).ready(function() {
$('#signUp input').on('change', function() {
var signUp = $(this).val();
$("#placehold").val(signUp);//show value of chosen radio button to input text
});
});
})(jQuery);
summary this code is, i have input text(readonly) and 2 radio button, when we choose the radio button then system will get the value of the choosen than show it to the input type text.
the reason i put the validation to other file because honestly it got so much validation, for another input too. i just didnt like it if i have to place the validation inside html file.
my question is: is it posible to get that value and store it to database via PHP?

You should use ajax for this task your code will be looking like this
$(document).ready(function() {
$('#signUp input').on('change', function() {
var signUp = $(this).val();
$("#placehold").val(signUp);//show value of chosen radio button to input text
//php file that have database codes
$.post("test.php",{
signup: signUp, //send signUp js variable to $_POST['signup']
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status); //callback event that fires when the post request successfully sent (removable)
});
});
});
test.php file contains..
<?php
if(isset($_POST['signup'])){
// your database code
echo $_POST['signup']; //replace it with your code
}
?>

form action change based on radio button selection in angular js

Now i have a form and two radio buttons.
Based on which radio button is selected I have to change my forms action.
here is the code
<form action={{action}} name="payform" method="post">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="cash" ng-click="paymethod('cash')" name="payment" value="cash">Cash
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="online" ng-click="paymethod('online')" name="payment" value="online">Online
</label>
</div>
</div>
<button class="btn btn-success" name="submit" type="submit">Submit</button>
</form>
And here is the controller code
$scope.paymethod = function(ptype){
alert("hi");
if(ptype=="cash"){
$scope.action = "food.php";
}
else if(ptype=="online"){
$scope.action = "online.php";
}
}
I used alert in the function to check if the function is being called or not. And alert is working it means function is being called but when i click submit nothing happens.

Not exactly what you asked for, but it solves your problem:
Prepend your form fields ng-models with formData.
Add ng-submit to your form
Use that function to place an $http request
Very basic example:
HTML:
<form name="payform" ng-submit="submitForm()">
<input ng-model="formData.value1" />
<input ng-model="formData.value2" />
<button type="submit"></submit>
</form>
JS:
$scope.submitForm = function submitForm() {
$http.post($scope.ptype + '.php', $scope.formData).then(
function success(response) {
// do something
},
function error(response) {
// not good
}
};
Because of prefixing your form ng-model attributes with formData, you have all fields contained in one object, which you can easily use when placing a POST request.