jQuery form submit not triggering - javascript

I have 2 forms in one html file(Not nested). Each do their own thing and do not rely on each other. The problem i'm currently facing is that $(form).submit((event)=>{code}) only works on:
<form id="mainForm" action='' method="POST" enctype="multipart/form-data">
{% csrf_token %}
<!--Cover image-->
<ul class="error" id="coverImageLink_errors"></ul>
<div class="cover-img">
{{ mainForm.coverImageLink|add_class:'actual-img' }}
<img src="#" id="cover" alt="Your image" style="color: black;">
</div>
<!--Music data part-->
<div class="music-data">
<ul class="error" id="albumName_errors"></ul>
<label for="{ mainForm.albumName.id_for_label }">title</label><br>
{{ mainForm.albumName }} <br><br>
</div>
<input id='albumSubmit' type="submit" value="Next" class="main-form-upload">
</form>
<script>
$('#mainForm').submit((event)=>{
event.preventDefault();
console.log('AJAX CALLED FOR MAIN FORM');
});
</script>
But not on:
<form id="AdvancedForm" action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<ul class="last-step-error" id="advancedForm.non_field_errors"></ul>
<section id="main-section">
<!-- compresso page -->
<div id="compresso-page">
<div class="parent">
<div class="name">0. Hello world</div>
<ul class="pre-errors">
<li>Video file is not supported</li>
<li>+2 more</li>
</ul>
</div>
</div>
</section>
<div style="height: 20px;"></div> <!-- prevents collision with button -->
<input type="submit" value="Release" onclick="alert('Advanced form submit pressed')">
</form>
<script>
$('#AdvancedForm').submit((event)=>{
event.preventDefault();
console.log('AJAX CALLED FOR ADVANCED FORM')
const url = '{% url "validate-upload-collection" %}'
})
</script>
I see AJAX CALLED FOR MAIN FORM but not AJAX CALLED FOR ADVANCED FORM.
The advanced form is display='none' by default
console.log(document.getElementById('AdvancedForm')) returns here
If you are confused with {{ something }}, it's just some django(Web framework) variable syntax. Those variables will be filled in on the server side so that is not present in the html.

It might be that onclick="alert('Advanced form submit pressed')" interferes with your handler. Try to remove that from the submit button.
One other thing I see is that the second form has no real fields? That might be another thing. Try adding <input type="text" name="test" />

Related

I am trying to hide form field on submitting the form and display successful message

AS I am new to jQuery I am trying to learn new things so I need little help in this : As I am trying to hide form field on submitting the form and display successful message but the form keep reloading and fields are not hiding.
following is my code
$(document).ready(function() {
$("#contact_form").submit( function() {
$("#contact_form").hide();
$(".successMessage").show();
});
});
<section class="section NPScontainer">
<a name="pagecontent" id="pagecontent"></a>
<div class="container content page NPScontainer">
<div class="feature_divider NPS-divider"></div>
{% render 'page-multi-column', content: page.content %}
<div class="one-whole column">
<div class="rich-text__content center">
<div class="rich-text__text featured_text">
<h1>THANK YOU</h1>
<p><strong>Thank you for giving us a rating</strong></p>
<p>If you have further details to share with us regarding your rating, please don’t hesitate to share them.</p>
<p>Your feedback will help us improve our services for you.</p>
</div>
<p class="successMessage">"Thank you, we value your feedback. If your feedback requires a response, our customer service team will reach out to you via the email address you have provided.”</p>
<div class="nps_feedback_form">
{% form 'contact' %}
{{ form.errors | default_errors }}
<div class="feedback-type">
<label for="feedback-type">Feedback type</label>
<div class="nps-radio">
<span><input type="radio" name="contact[feedback_type]" value="Compliments" id="comments"><label for="comments">Compliments</label></span>
<span><input type="radio" name="contact[feedback_type]" value="Areas for improvement" id="suggestions"><label for="suggestions">Areas for improvement</label></span>
<span><input type="radio" name="contact[feedback_type]" value="Questions" id="questions"><label for="questions">Questions</label></span>
</div>
</div>
<div class="message">
<label for="message">Feedback</label>
<textarea name="contact[body]" id="message" required></textarea>
</div>
<div class="personal-info">
<div class="first-name">
<label for="first-name">Name</label>
<input type="text" name="contact[first_name]" id="first-name" required/>
</div>
<div class="email">
<label for="email">Email</label>
<input type="email" name="contact[email]" id="email" required />
</div>
</div>
<div class="submit">
<input id="submitnpsform" type="submit" value="Submit"/>
</div>
{% endform %}
</div>
</div>
</div>
</div>
</section>
The default flow for forms is reloading the page when submitting, so you need to prevent this using event.preventDefault(). That should stop the form from reloading the page.
$(document).ready(function() {
$("#contact_form").submit( function(event) {
event.preventDefault()
$("#contact_form").hide();
$(".successMessage").show();
});
});

Html / jquery multiple forms submit

I am working on Django File Sharing Project and in file view on click on file preview div it will pop-up modal with description of file . I have problems in IDing multiple forms
FileView.html
<div class="parent">
<div class="child" onclick="fo()">
<form class="form" method="post" action="django-script.py">
<h5 > File.jpg</h5>
<input type="hidden" name="file" value="file.jpg">
<h6 class="title">Image</h6>
<img class="image" src="/images/icons/file.png" >
</form>
</div>
<div class="child" onclick="fo()">
<form class="form" method="post" action="django-script.py">
<h5 > File.pdf</h5>
<input type="hidden" name="file" value="file.pdf">
<h6 class="title">PDF</h6>
<img class="image" src="/images/icons/pdf.png" >
</form>
</div>
<div class="child" onclick="fo()">
<form class="form" method="post" action="django-script.py">
<h5 > File.csv</h5>
<input type="hidden" name="file" value="File.csv">
<h6 class="title">CSV FILE</h6>
<img class="image" src="/images/icons/file.png" >
</form>
</div>
</div>
script
function fo()
{
document.querySelectorAll(".child")].forEach(child => {
const forms= child.querySelector(".form")
forms.submit();
})
}
It works well only for 1 div I dont know how to make it for all div elements
Original Django Code
ViewFile.html
<div class="parent">
{% for f in file %}
<div class="child" onclick="fo();">
<form class="form" method="post" action="{% url 'fileview' %}">
{% csrf_token %}
<h5 >{{f.title}}</h5>
<input type="hidden" name="file" value="{{f.filename}}">
<h6 class="title">{{f.filename}}</h6>
<img class="image" src="{% static '/images/icons/file.png' %}" >
</form>
</div>
{% endfor %}
</div>
Views.py
def fileview(request):
global loginFlag,loginUser
if request.method == 'POST':
fil=request.POST['file']
about=Transaction.objects.filter(filename=fil)
emp=about[0].userid
aname=Employee.objects.filter(emp_id=emp)[0].name
print(about)
files=Transaction.objects.all()
name=loginName
context={'files':files,'name':name,'about':about,'aname':aname}
return render(request,'detailedview.html',context)
else:
file=Transaction.objects.all()
name=loginName
context={'file':file,'name':name}
return render(request, 'viewfile.html',context)
I think the issue is in HTML multiple form class. Any solutions will be of great help
Thanks inadvance
All your form tags have the same ID (which isn't what you want) and your onclick was instructing JS to submit the first matching ID, hence it was submitting the first form only. Instead make it a relative association. Use a JS function and pass this which will refer to the container element. Then in the function find the form inside the element and submit that.
<div class="parent">
{% for f in file %}
<div class="child" onclick="showFile(this)">
<form method="post" action="{% url 'fileview' %}">
{% csrf_token %}
<h5 >{{f.title}}</h5>
<input type="hidden" name="file" value="{{f.filename}}">
<h6 class="title">{{f.filename}}</h6>
<img class="image" src="{% static '/images/icons/file.png' %}" >
</form>
</div>
{% endfor %}
<script>
showFile(div) {
div.querySelector('form').submit()
}
</script>

Meteor: Building a custom form and need help redirecting after submission

EDIT: I did add action="/results" to the form element but it does not do anything. I also set the page /results on my routes.
New to Meteor and I'm working on a app that collect form entries for multiple categories. Form is custom built:
/*------------------- Template.html ----------------------------*/
<form class="word_of_day">
<div class="page 1 view">
<h1>Word of the day</h1>
<p>Enter the word and fill out the fields as you go.</p>
<input type="text" name="word" placeholder="Word of the day" />
</div>
<div class="page 2">
{{> day_two}}
</div>
<div class="page 3">
{{> day_three}}
</div>
<div class="page 4">
{{> day_four}}
</div>
<div class="page 5">
{{> day_five}}
<div class="error"></div>
<div class="pull-down">
<span>Would you like to send this to yourself? (not required)</span>
<input type="text" name="user_email" placeholder="Your Email" />
</div>
<button type="submit">Submit</button>
</div>
</form>
/*---------------------- app.js ---------------------------------------*/
Template.form.events({
"submit .word_of_day":function(event){
event.preventDefault();
});
Currently I have the form pushing the data into the Collections I have created but I can't figure out how to redirect the form after submission. I have flow-router set up on the app, not sure if that helps. I appreciate any help and guidance!
In your events
"submit .word_of_day":function(event){
event.preventDefault();
Meteor.call('updateYourData', $(event.target).serializeArray(), function(err, res){
if (!err) {
FlowRouter.go('path/to/some-where');
}
});
}

2 forms with one submit button $_POST method

i want to combine 2 forms into one submit button on separate parts of the website. its pretty much a check box deletion mysql row script. here is a picture.
What I am trying to do is have DELETE SELECTED, delete the selected checkedboxes rows that are on the left side.
I am unable to get that to work.
My form names are delete1 for the button and delete2 for the whole table as a form.
I tried to combine both forms into one by using javascript.
function functionCaller()
{
document.getElementById('delete1').submit();
document.getElementById('delete2').submit();
}
It doesnt seem to work.
Does anyone have any ideas, I pretty much want to use a submit button on another part of the page that corresponds to being the submit button for the check boxes, while not being part of the same form. I hope it makes sense.
UPDATE. ADDED CODE.
The form for the DELETE SELECTED button seperated from the table
<form action="" method="post" name="delete">
<div style=" float: right;">
<input type="submit" value="Delete Selected" id="delete" onclick="functionCaller()" name="delete">
</div>
</form>
Here is the form that contains the table
<form action="" method="post" name="delete">
<div class="table">
<div class="table-head">
<div data-label="select" class="column"><input type="checkbox" id="selectall"></div>
<div data-label="id" class="column">ID</div>
<div data-label="avatar" class="column">Avatar</div>
<div data-label="username" class="column">Username</div>
<div data-label="email" class="column">Email</div>
<div data-label="active" class="column">Active</div>
<div data-label="level" class="column">Level</div>
<div data-label="modify" class="column">Modify</div>
</div>
<div class="row">
<div data-label="select" class="column"><input type="checkbox" class="selectedId" name="checkbox[]" id="checkbox[]" value="94" onclick="resetSelectAll();"></div>
<div data-label="id" class="column">94</div>
<div data-label="avatar" class="column"><img alt="" src="uploads/540d248343caa.JPG"></div>
<div data-label="username" class="column">admin</div>
<div data-label="email" class="column">brian.cherdak#gmail.com</div>
<div data-label="active" class="column">Yes</div>
<div data-label="level" class="column">Admin</div>
<div data-label="modify" class="column"><img alt="" src="images/tool.png"> <a onclick="delete_user(94);" href="#"><img alt="" src="images/delete.png"></a></div>
</div>
<div class="row">
<div data-label="select" class="column"><input type="checkbox" class="selectedId" name="checkbox[]" id="checkbox[]" value="287" onclick="resetSelectAll();"></div>
<div data-label="id" class="column">287</div>
<div data-label="avatar" class="column"><img alt="" src="uploads/54052a0accd62.gif"></div>
<div data-label="username" class="column">Quyn</div>
<div data-label="email" class="column">brian.cherdak#gmail.com</div>
<div data-label="active" class="column">Yes</div>
<div data-label="level" class="column">Regular</div>
<div data-label="modify" class="column"><img alt="" src="images/tool.png"> <a onclick="delete_user(287);" href="#"><img alt="" src="images/delete.png"></a></div>
</div>
</div>
</form>
They are both on seperate sides of the page, but I want the delete button to pretty much be the delete button for the table form.
This is what my delete php code looks like
<?php
if(isset($_POST['delete']))
{
for($i=0;$i<count($_POST['checkbox']);$i++){
$del_id = $_POST['checkbox'][$i];
$sql_del = "DELETE FROM users WHERE id='$del_id'";
$result_del = mysql_query($sql_del);
}
}
?>
Updated answer after comment:
<form action="" method="post" name="delete1" id='form1' method="POST" onsubmit="merge(); return true;">
<div style=" float: right;">
<input type="submit">
</div>
</form>
<form action="" method="post" name="delete2" id='form2'>
// your checkboxes...
</form>
<script type="text/javascript">
function merge() {
$result = $("#form1");
$("#form2 input, #form2 select").each(function() {
if($(this).is(':checked')){
$result.append("<input type='hidden' name='"+$(this).attr('name')+"' value='"+$(this).val()+"' />");
}
});
}
</script>
That submit function is no good. Only the first submission is happening.
I would set a hidden input value in the delete form. I haven't tested this, but I think everyone will get the idea.
Here's some jQuery:
functionCaller = function(e){
e.preventDefault(); // Just to be sure the submit doesn't go without us
var a = []
$(':checkbox').each(function(){
if($(this).prop('checked') === true) a.push($(this).val());
});
$('#hidden_input').val(a.toString()); // Explode by , (comma) in php
document.getElementById('delete1').submit(); // Do form submit now
}
Some PHP:
if(isset($_POST['delete'])){
$a = explode(','$_POST['hidden_input']);
for($i=0;$i<count($a);$i++){
$del_id = $a[$i];
$sql_del = "DELETE FROM users WHERE id='$del_id'";
$result_del = mysql_query($sql_del);
}
}
HTML!:
<form action="" method="post" name="delete">
<div style=" float: right;">
<input type="submit" value="Delete Selected" id="delete" onclick="functionCaller()" name="delete">
<input type="hidden" value="" id="hidden_input" name="hidden_input">
</div>
</form>

jquery addslashes to an entire form on submit

I am working with an annoyingly encrypted PHP script which doesn't let me at the source. The script outputs API results data via an HTML template file which uses variables like this:
%%Author%%
Amazon.com %%ListPrice%%
%%Price%%
%%ReviewLink%%
%%Description%%
I cannot convert this file to a php file. The encrypted php script looks for "phpzon.template.html". I want to grab the data loaded in each result i.e. %%Description%% and submit it to a php script for storage in a database. However, the content of %%Description%% for example contains html, so the data is breaking when entered into the database because of the " quotes and stuff in the data.
If it was a php file I could addslashes() to clean up the data before adding it to hidden form values, but I can't in this case. What is the jQuery way of doing this?
I tried serialize() thinking it might do this but it doesn't.
The form looks like this:
<form class="uk-form" method="post" id="add-to-cart" action="index.php?option=com_entrusters&view=itemform&Itemid=351">
<div class="uk-panel uk-panel-box uk-margin-small-bottom" style="box-shadow:none;padding: 15px 15px 0px;">
<div class="uk-grid">
<div class="uk-width-medium-8-10"><h4>%%Title%%</h4></div>
<div class="uk-width-medium-2-10"><button type="submit" href="" class="uk-button uk-button-small uk-button-primary uk-width-1-1">
<i class="uk-icon-shopping-cart"></i> Review & Order</button></div>
</div>
<div class="uk-grid" style="margin-top:0;">
<div class="uk-width-medium-2-10"><img src="%%Image%%" alt="%%Title%%" border="0" style="height:100px" /></div>
<div class="uk-width-medium-3-10">
<small>
%%Author%%
Amazon.com %%ListPrice%%
%%Price%%
<!-- %%YouSave%% -->
%%ReviewLink%%
</small>
<i class="uk-icon-external-link"></i> See on Amazon.com
%%AverageRating%%
</div>
<div class="uk-width-medium-5-10 ">
<input type="hidden" name="item" id="item" value="%%Title%%"/>
<input type="hidden" name="itemlist" id="itemlist" value=""/>
<input type="hidden" name="itemurl" id="itemurl" value="%%Link%%"/>
<input type="hidden" name="details" id="details" value="%%Description%%"/>
<input type="hidden" name="category" id="category" value="%%ProductGroup%%"/>
<input type="hidden" name="features" id="features" value="%%Features%%"/>
<input type="hidden" name="imageurl" id="imageurl" value="%%Image%%"/>
<input type="hidden" name="price" id="price" value="%%Price%%"/>
<div style="overflow-y: scroll; height:100px;"><p><small>%%Description%%</small></p></div>
<h5>%%ProductGroup%%</h5>
<!--<h5>%%FeaturesTitle%%</h5>
<p><small>%%Features%%</small></p>-->
</div>
</div>
</div>
</form>
<script>
jQuery( "form" ).on( "submit", function( event ) {
jQuery( this ).serialize();
});
</script>
When this form is submitted the results page shows broken html as in this image:

Categories