I have been trying to create a submit form that both makes getJSON call to display the response on html template and submits input. But I can only either submit the input or display response received from getJSON call. I have tried removing preventDefault method and adding it to my function but it is still not working.
Thank you in advance for any suggestions!
<form method="post" id="form">
<div>
<input type="text" name="newpost" style="width:300px;" placeholder="post here...">
{% if user %}
<input type="hidden" name="user_id" value="{{ user.key.id() }}">
<input id="inputButton" type="submit" value="Done">
<div id="jsonInfo"></div>
<script>
$(document).ready(function (){
$('#inputButton').click(function (e) {
var URL = 'URLEXAMPLE';
$.getJSON(URL, function(data){
for (var i = 0; i < data.length; i++){
var info = data[i].content;
$("#jsonInfo").append(info);
};
});
e.preventDefault();
});
});
</script>
{% else %}
<input type="button" class="button_active" onclick="location.href='/login'" value="Done">
{% endif %}
</div>
</form>
After the for do a
$('#form').submit(); to submit the form, e.preventDefault(); is currently blocking the default form submission so you can send the ajax request
Related
In my Django/Python application I have fields which are necessary or not, depending on what is selected in previous fields. Thats why those are not mandatory by default. I would like to run a script which would raise an error on the chosen field, depending on the selection. I would like to do that when 'Submit' button is pressed, via script.
My html code:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<form method="POST" id="PostForm" data-sektor-url="{% url 'ajax_load_sektors' %}" novalidate enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Report</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" id="submit" type="submit">Submit</button>
</div>
</form>
</div>
<script>
$("#submit").click(function () {
if (document.getElementById('id_res_person_1').value == '') {
HERE I WOULD RAISE AN ERROR ON THAT FIELD
}
});
</script>
You need to call a function when form is submitted, make your validation and if all good submit to the view
Here is an example:
JS
function validate(url) {
// do your validation
if(allIsOk){
// get the form
my_form.submit();
}
}
On Submit or link
<fom onsubmit="validate()">
I am trying to get submit event triggered for my form and for some reason it is not being activated...
I have added a button to the form of type submit and have a script at the end of the body that references the javascript functions related to the form...
Any ideas??
html
{% extends "layout.html" %}
{% block title %}Upload{% endblock %}
{% block body %}
<div class="container">
<form action="/upload" id="upload-form" method="POST" enctype="multipart/form-data"></form>
<div class="form-group">
<h1>Upload</h1>
<p>Use this form to upload a json file.</p>
</div>
<div class="form-row">
<div class="form-group">
<label for="file-input">JSON file</label>
<input type="file" accept=".json" class="form-control-file" id="file-input" />
</div>
</div>
<div class="form-row">
<pre id="file-contents"></pre>
</div>
<button id="clear-button" type="reset" class="btn btn-primary" disabled="true">Clear</button>
<button id="submit-button" type="submit" class="btn btn-primary" disabled="true">Submit</button>
</form>
</div>
<script src="/static/js/script.js"></script>
{% endblock %}
script.js
/**
* Event handler for form submission
*/
document.querySelector("#upload-form").addEventListener('submit', async event => {
console.log("FORM SUBMIT HANDLER");
event.preventDefault();
const formData = new FormData(event.target);
const fileString = formData.get('file-contents');
const payload = JSON.stringify({
file: fileString
});
console.log("SENDING : " + payload);
const response = await sendFile(payload);
console.log(response);
});
You're having an extra misplaced </form> closing tag immediately following the opening tag for your form. Just remove it and it should work fine.
UPDATE - the contact form is found at this URL.
I am trying to get the following contact form to function, using this tutorial.
I manage to get everything to work as expected on my computer using apache webserver.
After uploading the files to an online website, the ajax function does not kick in.
I seems like the e.preventDefault(); stops working after the upload, and the form is redirected to a new site,and not just being processed on the site without the reload.
I have also been trying to use the return false; instead of e.preventDefault(); without any success.
Her is my code:
.html
<form method="post" action='mail/mail.php'>
<label>Name</label>
<input name="name" id="name" placeholder="Name.." required="true" class="input-field">
<label>Mail</label>
<input type="email" name="email" placeholder="Mail.." required="true" class="input-field">
<label>Msg</label>
<textarea name="message" id="message" class="textarea-field" required="true"></textarea>
<input type="submit" id="submit" name="submit" value="Send">
</form>
<div id="loading">
Sender melding...
</div>
<div id="success">
</div>
.js
$(function(){
$('form').submit(function(e){
var thisForm = $(this);
//Prevent the default form action
//return false;
e.preventDefault();
//Hide the form
$(this).fadeOut(function(){
//Display the "loading" message
$("#loading").fadeIn(function(){
//Post the form to the send script
$.ajax({
type: 'POST',
url: thisForm.attr("action"),
data: thisForm.serialize(),
//Wait for a successful response
success: function(data){
//Hide the "loading" message
$("#loading").fadeOut(function(){
//Display the "success" message
$("#success").text(data).fadeIn();
});
}
});
});
});
})
Please help!
That's because your JS is missing a closing });. Please check this demo to confirm that the default action is indeed prevented and the ajax does kick in. However, I was expecting a POST but instead I am seeing an OPTIONS request.
NOTE: Giving an element a name or id attribute value of submit is bad practice. You cannot for example use JavaScript to submit the form via default form submission -- this.submit() or $('form')[0].submit() without getting the error ...submit() is not a function .....
$(function() {
$('form').submit(function(e) {
var thisForm = $(this);
//Prevent the default form action
//return false;
e.preventDefault();
//Hide the form
$(this).fadeOut(function() {
//Display the "loading" message
$("#loading").fadeIn(function() {
//Post the form to the send script
$.ajax({
type: 'POST',
url: thisForm.attr("action"),
data: thisForm.serialize(),
//Wait for a successful response
success: function(data) {
//Hide the "loading" message
$("#loading").fadeOut(function() {
//Display the "success" message
$("#success").text(data).fadeIn();
});
}
});
});
});
});
}); // <==== MISSING THIS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post" action='mail/mail.php'>
<label>Name</label>
<input name="name" id="name" placeholder="Name.." required="true" class="input-field">
<label>Mail</label>
<input type="email" name="email" placeholder="Mail.." required="true" class="input-field">
<label>Msg</label>
<textarea name="message" id="message" class="textarea-field" required="true"></textarea>
<input type="submit" id="submit" name="submit" value="Send">
</form>
<div id="loading">
Sender melding...
</div>
<div id="success">
</div>
Since you are submitting via AJAX anyway, you may find it easier to change your input type to button, and bind to click instead of form submit, to avoid the default submit behaviour you are trying to circumvent.
In my html I have multiple forms (text inputs, radio buttons, check boxes and select) and one button. I would like to fill all these forms and send values to my php file. For now I am trying to submit values from text input and select but I am stuck at this point.
I have a js submit file:
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
And my forms are like this:
SELECT:
<form id ="form1" name="dists" action="solve.php" method="post">
<select id="demo" name="sadzba" onchange="selectElement1(this.value)>
<option value="">-- vyberte oblasť --</option>
</select>
</form>
Text input form + button:
<form id="form2" action="solve.php" method="post">
<input type="text" name="spotVT" ><label>kWh za rok VT</label>
<div id="nt" style='display:none'><input type="text" name="spotNT" ><label>kWh za rok NT</label></div>
</form>
<input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/>
But this is not working. Can you help me please? Thank you
Once you are submitting one form your page reloads or terminates the javascript after that submission of form so better use Ajax for submitting multiple forms at the same time
with jquery
$("#sub").click(function(){
$("form").each(function(){
var fd = new FormData($(this)[0]);
$.ajax({
type: "POST",
url: "solve.php",
data: fd,
processData: false,
contentType: false,
success: function(data,status) {
//this will execute when form is submited without errors
},
error: function(data, status) {
//this will execute when get any error
},
});
});
});
Above code will submit every form when you click a button with id sub
It will be easier to only submit one form. You can give your select and input tag the same form name by assigning form="your-form-id".
Here's an simple example of a native Javascript implementation.
<!DOCTYPE html>
<html>
<head>
<title>Multiform - JAVASCRIPT</title>
</head>
<body>
<fieldset>
<legend>Form 1</legend>
<form name="f1" id="f1" onsubmit="return validate(this)">
<input type="text" name="username" placeholder="Username" />
</form>
</fieldset>
<fieldset>
<legend>Form 2</legend>
<form name="f2" id="f2" onsubmit="return validate(this)">
<input type="text" name="email" placeholder="Email" />
</form>
</fieldset>
<fieldset>
<legend>Form 3</legend>
<form name="f3" id="f3" onsubmit="return validate(this)">
<input type="text" name="password" placeholder="Password" />
</form>
</fieldset>
<button onclick="submitAll();">SUBMIT ALL</button>
<script>
'use strict';
function validate(form){
//forms processsing goes here...
console.log(form, form.name)
return false;
}
function submitAll(){
for(var i=0, n=document.forms.length; i<n; i++){
document.forms[i].onsubmit();
}
}
</script>
</body>
</html>
You could try this. If submitting all forms is fine for your page
$('form').submit();
Function that's in actual use:
function trySubmitAllForms() {
if ($('.saveSpinner').is(':visible')) {
return;
}
if ($('form').valid()) {
$('.saveSpinner').show();
$('form').submit();
} else {
showValidationErrorMessages();
}
}
Bismillah, try our method below, insyaAllah we hope can provide a solution for you.
document.getElementById("submit").addEventListener("click", function () {
$(function () {
$("#formid01").delay(300).submit();
$("#formid02").delay(300).submit();
});
});
How could I force a specific value within a form field on page load; and have that value 'Submit' with JavaScript or jQuery?
I tried the below; but no cigar.
<script>
window.onload = function(){
document.forms['coolform'].submit()
}
</script>
Mark-Up.
<form id="search" name="coolform" class="navbar-form form-search" action="#">
<div class="input-append">
<input id="query" type="text" class="search-query" value="Bars" >
<button type="submit" class="btn"><i class="icon-search"></i></button>
</div>
Try the following (jQuery):
$(function(){
var s = $('#search');
$('#query', s).val('The value you want to force in.');
s.submit();
});
HTML:
<input id="query" name="query" type="text" class="search-query" value="Bars" >
you could use ajax to submit the value on document.ready...
$(document).ready(function(){
var query = $('#query').value;
$.ajax({
url:'url/to/your.php',
data:'query='+query,
success:function(data){
//handle response
}
});
});
You need a name attribute on the form field, otherwise it won't be included when the form is submitted:
<input id="query" name="query" type="text" class="search-query" value="Bars" >