<script>
$(document).ready(function() {
$('#submitButton').submit(function(event) {
event.preventDefault();
$.post('http://sentiment.vivekn.com/api/text/',
$('#myForm').serializeArray(),
function(data, status) {
var json = JSON.parse(data);
$('text').html(document.getElementById('message').innerHTML);
$('sentiment').html(json.result.sentiment);
$('confidence').html(json.result.confidence);
console.log(json.result.sentiment);
console.log(status+"\n");
});
});
});
</script>
<section class="container content-section">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<form id="myForm" method=POST action="http://sentiment.vivekn.com/api/text/">
<p>Enter your sentences:</p>
<textarea rows="5" type=text name="txt" class="form-control" placeholder="Sentences to detect" id="message" required data-validation-required-message="Please enter a message."></textarea>
<br>
<button class="btn btn-primary align-right" type="submit" id="submitButton">Submit</button>
</form>
</div>
</div>
This part should work when the page is loaded, but it doesn't response at all.
EDIT: The script does not execute at all, what we get instead is a GET request to the url: ...index.html/?txt=[inputfrommyform] and nothing changes on the page, instead of the page even hitting the target POST request server.
Just updated according to the comments. Thank you!
The error we get from Chrome Inspect is still
Uncaught ReferenceError: $ is not defined
Four issues:
You need to listen to the submit event of #myForm instead of #submitButton which doesn't emit such an event.
Your post callback receives an already parsed JSON object, parsing again fails as a string is expected but an object given.
You need to prevent the default action on form submit by returning false from your submit event handler.
You need to include jQuery before your script.
Fixed code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').submit(function() {
$.post('http://sentiment.vivekn.com/api/text/',
$('#myForm').serializeArray(),
function(json, status) {
$('text').html(document.getElementById('message').innerHTML);
$('sentiment').html(json.result.sentiment);
$('confidence').html(json.result.confidence);
console.log(json.result.sentiment);
console.log(status + "\n");
});
return false;
});
});
</script>
<section class="container content-section">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<form id="myForm" method=POST action="http://sentiment.vivekn.com/api/text/">
<p>Enter your sentences:</p>
<textarea rows="5" type=text name="txt" class="form-control" placeholder="Sentences to detect" id="message" required data-validation-required-message="Please enter a message."></textarea>
<br>
<button class="btn btn-primary align-right" type="submit" id="submitButton">Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
Related
I am using "Send Email from a Static HTML Form using Google Apps Mail" on my static site. But when I submit a form i have to refresh the whole page to submit another mail. If I don't reload the page success text don't vanish and send button don't work. So i am asking is there any way to refresh my form section without refreshing the whole page? please help me how to do it.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container mail text-center justify-content-center mt-5">
<div class="row">
<div class="col-12">
<h3>Contact Me Now!</h3>
<hr>
</div>
<div class="col-md-12 col-xs-12 form">
<form method="post" role="form"
action="https://script.google.com/macros/s/AKfycbwtLbTgUDGQxi9FY8Jks6bJs3TnYPBNU7rvO8b8_zrdyD4Pa6g/exec"
method="post" role="form" class="gform " data-email="">
<div class="form-row">
<div class="col form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name"
data-rule="minlen:4 " data-msg="Please enter at least 4 chars " required="true" />
</div>
<div class="col form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email"
data-rule="email " data-msg="Please enter a valid email " required="true" />
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
data-rule="minlen:4 " data-msg="Please enter at least 8 chars of subject "
required="true" />
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required"
data-msg="Please write something for me " placeholder="Message " required="true"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-success w-100 submit">Send Message</button>
</div>
<div style="display:none" class="thankyou_message">
<div class="alert" role="alert"> <em>Thanks</em> for contacting me!
I will get back to you soon!<br>
<i class="fas fa-sync fa-spin"></i>
</div>
</div>
</form>
</div>
</div>
</div>
<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
If the form is refreshing the page, you'll need to use preventDefault to cancel its default behaviour then use reset() to reset the form.
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
[...form.elements].forEach(input => console.log(`${input.name}: ${input.value}`)); // Not Important
form.reset();
});
<form method="POST">
<input type="text" name="name" placeholder="name">
<input type="password" name="password" placeholder="password">
<button type="submit">Submit</button>
</form>
In JavaScript there is a function for forms which will reset the form clearing all the data in it, ready for another submit. This can be accomplished by running a JavaScript function on submit. This requires a couple changes in your code.
Firstly, we need to change this:
<button type="submit" class="btn btn-success w-100 submit">Send Message</button>
to this:
<button type="button" onclick="submitForm1()" class="btn btn-success w-100 submit">Send Message</button>
Once done, we can add some JavaScript to your page. If you have a JavaScript file linked to the page already, you can just add this code to that.
function submitForm1() {
let form = document.getElementsByClassName("gform");
form.submit();
form.reset();
}
You can also use document.getElementById("[id]"); and add an ID to your form. This is also preferable.
The first thing that comes to mind it's do all this on js so you can through ajax request send what you want. But I think it's not what you're looking for. You can't send data from page without refreshing, that's how it's work, php or html with some functional. You can change ...
<button type="button" class="btn btn-success w-100">Send Message</button>
... and collect all data by JavaScript and send it through ajax.
I'm a little newbie with jQuery, ajax and JavaScript. I need a little help to find out how to post data to a hidden iframe and then display it with the same button.
Here is what I've tried so far:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12" id="target">
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#target").show();
});
$("#target").hide();
});
$("#target").html('<object name="mydata" data="http://testurl.com/testing"></object>');
</script>
</div>
</div>
Thank you for your help.
What you should do, if you really need to do it this way is:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<iframe id="mydata" style="border:0; height:0;"></iframe>
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#mydata").css("height", 300);
});
});
</script>
How ever I do recomend you to have a look at jQuery's $.post() documentation and .serialize() documentation. you could to something like this instead:
<form id="testform" name="testform" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div id="succesResult"></div>
<script>
$(document).read((function(){
$('#testform').on('submit', function() {
var data = $( this ).serialize();
$.post("http://target.url", data, function(resultFromServer){
//success callback
$("#succesResult").html(resultFromServer); <--result could be html
})
});
}
</script>
I'm having a little problem getting a form to submit via ajax. I think it's one of two problems:
leads.py (which I am able to view, but do not have the ability to modify) is expecting a submit input name of name="submitButtonName" and because I am using e.preventDefault(); to disable normal form submitting the form is not being handled by the handler when submitted.
It could be possibly that the data being serialized is wrong, when i output it to console it looks like this which appears to be duplicated:
first_name=Frank&last_name=TheTank&email_addr=frank%40thetank.com&remarks=&first_name=Frank&last_name=TheTank&email_addr=frank%40thetank.com
any suggestions?
here is the full script:
<!-- Defines element markup -->
<dom-module id="landing-modal">
<template>
<div id="landing-modal" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-body">
<p class=lead>
To view this listing, please provide us with some basic contact information...
</p>
<form class="form-horizontal lead-form" method="post" action="/leads/buy">
<div class="control-group">
<label class="control-label">Required Information</label>
</div>
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" name="first_name" value="" required="" class="style-scope lead-form">
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name</label>
<div class="controls">
<input type="text" name="last_name" value="" required="" class="style-scope lead-form">
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="email" name="email_addr" value="" required="" class="style-scope lead-form">
</div>
</div>
<div class="control-group">
<div class="controls">
<input style="display:none;" type="text" name="remarks" value="" />
<input type="reset" value="Reset" name="reset" class="btn">
<input class="btn btn-primary" type="submit" name="submitButtonName" value="Submit" />
</div>
</div>
</form>
</div>
</div>
</template>
<script>
$(document).on('submit', '.lead-form', function(e) {
$.ajax({
url: $('.lead-form').attr('action'), //gets the action url
type: $('.lead-form').attr('method'), //gets the form method post
data: $('.lead-form').serialize(), //creates the form submit date eg. FirstName=Mickey&LastName=Mouse
success: function(html) {
console.log($('.lead-form').serialize());
}
});
e.preventDefault(); //prevents the submit input from being submitted normally
});
Polymer({
is: 'landing-modal',
created: function() {},
ready: function() {},
attached: function() {},
detached: function() {},
attributeChanged: function(name, type) {}
});
</script>
</dom-module>
edit::
I tried to add
<input type="hidden" name="submitButtonName" />
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
which results in a 500 error in console
server side code:
if "submitButtonName" in kwargs:
errors = []
if not kwargs['first_name']:
errors.append("Please enter your first name.")
if not kwargs['last_name']:
errors.append("Please enter your last name.")
if not kwargs['email_addr']:
errors.append("Please enter your email address.")
if errors:
error_msg = "<ul>" + "".join([
"<li>"+x for x in errors
]) + "</ul>"
result['error_msg'] = error_msg
else:
save = True
if save:
# 'remarks' is an invisible field that can only get filled in by
# spam bots, so if there's a value in it, ignore the submission.
if kwargs['remarks']:
import sys
sys.stderr.write("Ignoring spam submission: %r\n" % ([mode,kwargs],))
else:
self.save_form(mode, kwargs)
raise cherrypy.InternalRedirect("/leads/thankyou/"+mode)
result.update(self.form.render(values))
if mode=="C":
result.update(self.cmaform.render(values))
if mode=="E":
result.update(self.contactform.render(values))
return result
I am newbie to angular JS and i have created a form which is
HTML
<div data-ng-controller="ReservationController"
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-10">
<label>Guest Name</label>
<input type="text" class="form-control" placeholder="" ng-model="res_guest_name" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Phone</label>
<input type="phone" class="form-control" ng-model="res_member_phone">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>FAX</label>
<input type="phone" class="form-control" ng-model="res_member_fax">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label>Email</label>
<input type="email" class="form-control" ng-model="res_member_email" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-8 col-sm-10">
<button type="submit" class="btn btn-success" ng-click="res_save()">Save Changes</button>
</div>
</div>
</form>
</div>
CONTROLLER
function ReservationController($scope, $http, $cookieStore,$location,$filter) {
$scope.res_save = function()
{
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}
My form gets submitted even after the required fields are left empty. it shows the error, then it gets submitted.
Obviously it will submit the form you didn't handled the submission of form.You just managed the errors :-)
Use ng-disabled="myForm.$invalid"
where myForm is the name field on form
<form class="form-horizontal" name="myForm" role="form">
<button type="submit" class="btn btn-success" ng-disable="myForm.$invalid" ng-click="res_save()">Save Changes</button>
If you don't want the button to be disable till then you can use
<button type="submit" class="btn btn-success" ng-click="res_save(myForm.$valid)">Save Changes</button>
And in controller
$scope.res_save = function(valid)
{
if(valid){
var save_res ="https://pbg.com/save_form.html?contactid="+conId+"&token="+token+"&id="+$scope.resId+"&page=edit&guest_name="+$scope.res_guest_name+"&phone="+$scope.res_member_phone+"&fax="+$scope.res_member_fax+"&email="+$scope.res_member_email;
$http.get(save_res).success(function(response) {
alert('success');
});
}
}
You are not checking for Form valid state before saving it , don't expect angular to magically stop saving when form is invalid.
You should look into the documentation for ng-submit. If you move the res_save function into an ng-submit on the form (and removed the ng-click on the submit input) it will validate against required fields, prevent execution of the function until they are valid.
How can we empty a ajax loaded form using pure JavaScript or jQuery.
I have tried document.forms[0].reset(); and $('#new-staff-form')[0].reset(); both didn't work it returns undefined.
Update
<div class="box col-md-12 new-staff">
<form id="new-staff-form" method="post">
<div class="row">
<div class="col-md-6">
<label for="f_name">First Name</label>
<input type="text" name="f_name" placeholder="First name"/>
</div>
<div class="col-md-6">
<label for="l_name">Last Name</label>
<input type="text" name="l_name" placeholder="Last name"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="user_name">User name</label>
<input id="user_name" type="text" name="user_name" placeholder="User name"/>
</div>
<div class="col-md-6">
<button id="user-avail" class="btn btn-primary">Check available</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary pull-left">Save</button>
</div>
</div>
</form>
</div>
Javascript:
$('#new-item').click(function(){ // works fine until I load new html form using ajax with same ids and class
$('#new-staff-form')[0].reset();
$('.new-staff').slideToggle(); // show new form
});
$('.edit-item').click(function(){ // ajax call this loads everything correctly
var id = $(this).data('staf_id'); //item to delete
$.ajax({
url:url_view_staff+id,
type:'get'
}).done(function(data){
edit_item_id = id;
$('.new-staff').html(data).slideDown();
}).fail(function(data){
$('#errors').html(data.responseText);
$('.valid-error').slideDown();
});
});
JavaScript:
document.getElementById("myForm").reset();
Jquery :
$('#form_id')[0].reset();
Make sure your form id is valid.
FIDDLE
$('#configreset').click(function(){
$('#configform')[0].reset();
});