We Keep Coding

How do I make sure my javascript animation runs before submit button is done?

Attached code below. I have a submit button that uses a form method POST, and then it's supposed to run the javascript animation, though it kicks me to the next page before it gets the chance to run it.
Is there a way I can add a delay to the submission such that the animation is completed first? In this code, it doesn't even get a chance to run the javascript.
<div class="container">
<div class="pt-5 text-white">
<link rel="stylesheet" href="css/postQuestion.css">
<br>
<br>
<br>
<br>
<h1>Post a question</h1>
<br>
<form method="POST" action="{{ route("post_post") }}">
#csrf
{{-- Title box --}}
<div class="none" style="margin:0 auto;">
<input class="search" name="title" type="text" id="search" placeholder="Title" required/>
</div>
<br>
<div class="none">
{{-- Question box --}}
<textarea required name="content" class="search2" type="text" id="search" placeholder='Explain your question here.
Protip: add your code as <code> YOUR CODE HERE </code> to format correctly.'></textarea>
</div>
<br/>
<div class="dropdownTag">
<select name="label_id" class="dropdownTag-select" required>
<option value="-1">Select Tag</option>
#foreach(\Illuminate\Support\Facades\DB::table("tags")->orderBy('name', 'asc')->get() as $tag)
<option value="{{ $tag->id }}">{{ $tag->name }}</option>
#endforeach
</select>
</div>
<br/>
<div class="container">
<button id="button" type="submit"></button>
<form submit="return function();">
</div>
</form>
</div>
<script>
$(function () {
$("#button").click(function () {
$("#button").addClass("onclic", 250, validate);
});
function validate() {
setTimeout(function () {
$("#button").removeClass("onclic");
$("#button").addClass("validate", 450, callback);
}, 2250);
}
function callback() {
setTimeout(function () {
$("#button").removeClass("validate");
}, 1250);
}
});
</script>
</div>

Using event.preventDefault() you can halt the normal behavior of the form.
After that you can implement whatever you like before manually submitting the form from JS.
If what you need is to wait some time before submitting, you can then use setTimeout().
Then manually submit the form using submit() function.
Vanilla JS
<script>
document.addEventListener('DOMContentLoaded', function () {
document.forms['test_form'].addEventListener('submit', function (e) {
e.preventDefault();
form = this;
// Make a new timeout set to go off in 1000ms (1 second)
setTimeout(function () {
// submit form after timeout
form.submit();
}, 1000);
});
});
</script>
<form name="test_form" method="POST" action="{{ route('post_post') }}">
<label for="test">Test field</label>
<input type="input" name="test"/>
<input type="submit"/>
</form>
document.addEventListener('DOMContentLoaded', function() {
document.forms['test_form'].addEventListener('submit', function(e) {
e.preventDefault();
form = this;
// Make a new timeout set to go off in 1000ms (1 second)
setTimeout(function() {
// submit form after timeout
form.submit();
}, 1000);
});
});
<form name="test_form" method="POST" action="{{ route('post_post') }}">
<label for="test">Test field</label>
<input type="input" name="test" />
<input type="submit" />
</form>

If you need to use the "submit", then you can simply hide the submit button itself, and hang the listener on the button that will call its animations, and then, when you need it, submit.
...
<div class="container">
<button id="button" type="button"></button>
<input id="submit" type="submit" hidden />
<form submit="return function();">
</div>
...
...
$("#button").click(function (event) {
event.preventDefault();
$("#button").addClass("onclic", 250, validate);
...
$("#submit").click();
});
...
It is also possible without creating a hidden input through the form submission. I think this option is better.
...
<form id="someform" method="POST" action="{{ route("post_post") }}">
...
<div class="container">
<button id="button" type="button"></button>
<form submit="return function();">
</div>
...
...
$("#button").click(function (event) {
event.preventDefault();
$("#button").addClass("onclic", 250, validate);
...
$("#someform").submit();
});
...

How to do a Survey Form to be submitted in angularjs

I want to submit a form in angularjs which are like survey, suppose
user will fill the form and submit, I have array of all the questions
of form, I want to update all the questions with the respected answers
by iterating all the questions from array and update each question
individually(why because I only have API to update one question)
This is my form
<ng-form name="participateSurveyForm" novalidate>
<div class="form_fields_survey_audience" ng-repeat="questionlistitem in surveyquestiondata">
<h3 class="">{{questionlistitem.question}}</h3>
<div ng-show="questionlistitem.question_type == 'multiple_choice'">
<div class="radio" ng-repeat="optionofanswers in questionlistitem.options">
<div class="form-group">
<label>
<input type="radio" name="optionforanswer" ng-model="surveydataforparticipate.optionforanswer" ng-value="optionofanswers.option" required checked>{{optionofanswers.option}}
</label>
</div>
</div>
</div>
<div ng-show="questionlistitem.question_type == 'open_text'">
<div class="form-group" >
<textarea class="textAreaMultiligne" name="open_text_field" ng-model="surveydataforparticipate.open_text_field" required placeholder="Answer Here" rows="10" cols="40"></textarea>
</div>
</div>
</div> <!--End Row-->
<div class="row">
<div class="col-lg-12">
<button type="submit" ng-click="participateInSurvey(surveydataforparticipate)" class="btn btn-primary">Complete</button>
</div>
</div><!--row & Submit Button-->
</ng-form>
//Anguar Code
$scope.participateInSurvey = function(surveydataforparticipate){
angular.foreach(surveydataforparticipate, function(value){
$http.put('/api/survey/question/+value._id, surveydataforparticipate).success(function(data){
console.log(data);
});
});
}
not getting values from this surveydataforparticipate function. also
Is it correct that i have put foreach to submit the data using $http?
Thanks for helping.

You can define a function in your controller where the form should go on submit. And, use ng-submit to link that function to your form.
<ng-form name="participateSurveyForm" ng-submit="submitForm ()" novalidate>
In your controller :
$scope.submitForm = function(){
//definition of the function.
//access form data here.
}

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.

Testing a simple javascript button

Hello gentlemen and ladies. I'm trying to test the button to see if it binds to event but it's not working. I have been at this for hours and couldn't find the answer.I'm looking for code that separates the HTML and javsScript. I'm new and I really appreciate your time. I can't get the alert to work when I click button.
var formId;
formId = document.GetElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("submit", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!
</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post" />
<input type="text" />
<label for ="button">add</label>
</form>
</fieldset>
<!--**************Button******-->
<button type="submit" id="button">submit</button>
</div>

Try ...
var formId = document.getElementById("button");
function run(){
alert("Stack overflow");
}
formId.addEventListener("click", run, false);
Where I am using .getElementById (spelling) and the click event on the Listener.
Fiddle: http://jsfiddle.net/rfornal/9duqfgL6/

You could use the following code:
<div id ="content">
<div id ="title">Special Offers
</div>
<div id="colors">Sign-up to receive personalize offers!
</div>
<button type="submit" id="button" onclick="run()">submit</button>
</div>
and your JS should be as follows:
function run(){
alert("stack overflow");
}

Your form tag was self closing. It should be getElementById. Try the click event instead of the submit event.
Your button is outside the form. When you have your button inside it, you can add the submit event listener to your form.
var formId = document.getElementById("button");
function run(){
alert("Stack Overflow");
}
formId.addEventListener("click", run, false);
<div id ="content">
<div id ="title">Special Offers</div>
<div id="colors">Sign-up to receive personalized offers!</div>
<fieldset>
<legend> Please enter your information</legend>
<form action="#" method="post">
<input type="text"/>
<label for="button">add</label>
<button type="submit" id="button">submit</button>
</form>
</fieldset>
</div>

Take data from a form then change a word if it appears and print the result

So I have got this form:
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Text:</label>
<input type="text" id="data" />
</div>
<div class="button">
<button type="submit">Input</button>
</div>
</form>
What I want to do is take the data which has been submitted, then if the word 'good' is in the submitted text I need it to change to 'great' and then for it to be printed on the same or different page. It would be great if someone could help me do this with javascript.

Try something like this : http://jsfiddle.net/29kKX/9/
<div>
<label for="name">Text:</label>
<input type="text" id="data" value="good"/>
</div>
<div class="button">
<button id="submit" onclick="replaceWord()">Submit</button>
</div>
<script type="text/javascript">
function replaceWord(){
var dataElem = document.getElementById("data");
var data = dataElem.value
data = data.replace("good", "great");
dataElem.value=data;
return false;
}
</script>​
Hope this helps.

<script type="text/javascript">
function fnc()
{
data=document.getElementById("data").value;
if(data=='good')
{document.getElementById("data").value='great';
alert(document.getElementById("data").value);}
return true;
}
</script>
<form action="/my-handling-form-page" method="post" onsubmit="return fnc()">