We Keep Coding

html onclick to load external javascript not working

I am trying to load an external javascript from a html input button. However when I click on the button I get no output or response. I do get a message in console that the script has been loaded though.
HTML:
<div class="split left">
<fieldset class="Receiver Commands">
<legend>Receiver Commands</legend>
<input type="button" value="click me" id="clickMe" onclick="serverStart()" />
<script type="text/javascript" src="{%static 'scripts/ServerResponse.js' %}">
</script>
<form method="post">
</form>
<div id="testtaskbox" class="testtaskbox">
{% csrf_token %}
</div>
</fieldset>
<fieldset class="receiverResponse">
<legend>Receiver Response</legend>
<div class="receiverText">
<textarea id ="response" class="textarea">Digdebugv2 1.11
{{responseContext}}
</textarea>
</div>
</fieldset>
</div>
Javascript:
serverStart()
function serverStart () {
document.getElementById('reponse').innerHTML = '123bob'
console.log('ServerResponse started')
}

Your document.getElementById('reponse').innerHTML = '123bob'
'response' was not correct spelled.
Replace your current code with this and it will work.
function serverStart () {
document.getElementById('response').innerHTML = '123bob'
console.log('ServerResponse started')
}
serverStart();
<div class="split left">
<fieldset class="Receiver Commands">
<legend>Receiver Commands</legend>
<input type="button" value="click me" id="clickMe" onclick="serverStart()" />
<script type="text/javascript" src="{%static 'scripts/ServerResponse.js' %}">
</script>
<form method="post">
</form>
<div id="testtaskbox" class="testtaskbox">
{% csrf_token %}
</div>
</fieldset>
<fieldset class="receiverResponse">
<legend>Receiver Response</legend>
<div class="receiverText">
<textarea id ="response" class="textarea">Digdebugv2 1.11
{{responseContext}}
</textarea>
</div>
</fieldset>
</div>

Thymeleaf foreach loop with button event inside

I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.
The default is hidden
The following is my codes:
<div th:each="post:${posts}">
<div class="panel panel-default" th:object="${post}">
<div class="panel-body">
<p th:text="*{user.username}">username</p>
<p th:text="*{createTime}">time</p>
<p th:text="*{content}">content</p>
<div>
<form th:action="#{/posts/liked/input}" method="post"
style="display: inline">
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">like</button>
</form>
<button class="btn btn-primary commentBt"
style="display: inline">Comment</button>
</div>
</div>
<!-- This is the part I want to show after click Comment -->
<div style="display: none">
<form th:action="#{/posts/comment/input}" method="post">
<textarea class="form-control" name="content" id="contentId"
rows="1"></textarea>
<input type="hidden" name="postId" id="postIdId"
class="form-control" th:value="*{id}">
<button type="submit" class="btn btn-primary">Reply</button>
</form>
<div th:each="comment:*{comments}">
<div th:object="${comment}">
<p th:text="*{content}">content</p>
</div>
</div>
</div>
</div>
</div>
How to do this in the foreach loop?

You can do this by using js, below are example codes.
First, you need to add onclick to commit button:
<button class="btn btn-primary commentBt"
style="display: inline" onclick="showDiv()">Comment</button>
Then, get the hidden div and edit function showDiv to dispaly the div.
<!-- set id -->
<div id="test" style="display: none">
<script>
<!-- function to change display to block -->
function showDiv(){
var div = document.getElementById("test");
div.style.display="block";
}
</script>
Hope this will help you!

Submit form without redirection with ajax

i'm trying to make some things with ajax and it doesn't work.
I have a view with some divs where i will be all the functionality of the page.
The view's code is this:
#extends('cms.public.layouts.default')
#section('content')
<div class="col-md-10">
<h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">PROYECTOS</h3>
</div>
<div id="listall"> <!-- DIV TO LIST ALL THE PROJECTS START HERE -->
<div class="col-md-2" style="padding:20px;">
<button type="button" id="buttoncreate" class="btn btn-danger">Crear Proyecto</button>
</div>
<table class="table">
<thead style="color:white">
<tr>
<th>Id</th>
<th>Slug</th>
<th>Order</th>
<th>Public</th>
<th>Path header</th>
<th>Path home</th>
<th>Fecha creación</th>
<th>Fecha ultima actualización</th>
<th><span class="glyphicon glyphicon-cog"></span></th>
</tr>
</thead>
<tbody style="color:white">
#foreach ($projects as $key => $project)
<tr>
<th>{{$project->id}}</th>
<td>{{$project->slug}}</td>
<td>{{$project->order}}</td>
<td>{{$project->public}}</td>
<td>{{$project->pathheader}}</td>
<td>{{$project->pathhome}}</td>
<td>{{ date('M j, Y', strtotime($project->created_at))}}</td>
<td>{{ date('M j, Y', strtotime($project->updated_at))}}</td>
<td>View Edit
#endforeach
</tr>
</tbody>
</table>
<br><br>
</div> <!-- DIV TO LIST ALL THE PROJECTS END HERE -->
<div id="form1" style="display:none;" class="col-md-8"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE-->
<div>
<h3>Crear nuevo proyecto</h3>
</div>
<div id="formcreateproject">
<form method="POST" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data" id="myForm" name="myForm">
<div class="form-group">
<label name="title">Slug:</label>
<input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm">
<label name="order">Order:</label>
<input type="number" id="order" name="order" class="form-control form-control-sm">
<label name="public">Public:</label>
<input type="number" id="public" name="public" class="form-control form-control-sm">
<label name="body">Header</label>
<input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp"><br>
<label name="body">Home</label>
<input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br>
<input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md">
<input type="hidden" name="_token" value="{{ Session::token() }}">
<br><br><br>
</div>
</form>
</div>
</div> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 END HERE-->
<div id="form2" style="display:none;" class="col-md-6">
<div class="col-md-">
<h3>Crear nuevo proyecto</h3>
</div>
<form method="POST" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data">
<div class="form-group">
<label name="title">Slug:</label>
<input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm">
<label name="order">Order:</label>
<input type="number" id="order" name="order" class="form-control form-control-sm">
<label name="public">Public:</label>
<input type="number" id="public" name="public" class="form-control form-control-sm">
<label name="body">Header</label>
<input type="file" name="pathheader" id="pathheader" class="form-control-file" aria-describedby="fileHelp"><br>
<label name="body">Home</label>
<input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br>
<input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md">
<input type="hidden" name="_token" value="{{ Session::token() }}">
<br><br><br>
</div>
</form>
</div>
</div>
#stop
And the javascript function is this:
//Javascript view /projects/menu.blade.php
$(document).ready(function(){
$("#buttoncreate").click(function(){
$("#listall").hide();
$("#form1").fadeIn(1000);
$("#createprojectsubmit").submit(function(e){
e.preventDefault();
$.ajax({
url:'/admin/projects/postUpload',
type:'post',
data:$('#myForm'),
success: function(){
$("#form1").fadeOut(1000);
$("#form2").fadeIn(1000);
}
});
});
});
});
The function of hide the first div and fade in the second works, and it submit and create the new project. But url change and show me a white page.
My first thing to do is fadeOut the form1 and fadein the second form. It will be great, if when fadeOut the form1, in her space appears a tick/check.
Thanks a lot, any help will be appreciated.

you are calling submit event on button which does not belong to button. It belongs to form. So call the click event on button and use preventDefault() to stop the form to be submitted as
$("#createprojectsubmit").submit(function(e){
e.preventDefault();
//your further code goes here
}
use like this
$("#createprojectsubmit").click(function(e){
e.preventDefault();
//your further code goes here
}
You can also trigger the submit event on your form as
$("#myForm").submit(function(e){
e.preventDefault();
//your further code goes here
}

This is because you are mixing 2 ways to handle the submission of your form: the click on the button and the form submission itself.
The function submit as you call in your script is making the binding of the submit event when the button is clicked.
Here is how to bind your code only on the submit event of your form:
$(document).ready(function(){
$("#buttoncreate").click(function(){
$("#listall").hide();
$("#form1").fadeIn(1000);
$("#myForm").submit();
});
$("#myForm").submit(function(e){
e.preventDefault();
$.ajax({
url:'/admin/projects/postUpload',
type:'post',
data:$('#myForm'),
success: function(){
$("#form1").fadeOut(1000);
$("#form2").fadeIn(1000);
}
});
});
});
EDIT: Edited answer to take in account the click on the button.
At first, we bind the click event on the button to handle animations and trigger the form submission by calling submit function on the form.
Then, we bind the submit event on the form to handle the ajax call in replacement of the classic postback form submission.

function onsuccess(response) show the entire page on the hidden div

every time the images uploaded, it shows the entire page on the hidden div, like the screenshot shows
the webpage before upload
and
after uploaded
I feel there's something wrong in the script tag below, because if I delete the response variable, it won't show the duplicated page anymore, but also no more response, which is supposed to be shown on the page.
Any help will be appreciated!
here's the code:
<form action="" method="POST" id="uploadimg" enctype="multipart/form-data">
<div class="form-group col-md-6"><br />
<label class="col-md-4">Product thumbnail:</label><input type="file" name="thumb" id="thumb"/><br />
<label class="col-md-4">Profile picture01:</label><input type="file" name="file01"/><br />
<label class="col-md-4">Profile picture02:</label><input type="file" name="file02"/><br />
<label class="col-md-4">Profile picture03:</label><input type="file" name="file03"/><br />
<label class="col-md-4">Profile picture04:</label><input type="file" name="file04"/><br />
<label class="col-md-4">Farmer's photo:</label><input type="file" name="farmer"/><br /><br />
<input class="btn btn-warning btn-sm " type="submit" value="Upload" name="submit"/><br /><br />
</div>
<div class="form-group col-md-6">
<div id="loader">
<center><img src="images/loading.gif" /></center>
</div>
<div id="onsuccessmsg"></div>
</div>
</form>
<script>
$(document).ready(function(){
function onsuccess(response){
$("#loader").hide();
$("#onsuccessmsg").html('</b><div id="msg">'+response+'</div>');
}
$("#uploadimg").on('submit',function(){
$("#loader").show();
var options={
success: onsuccess
};
$(this).ajaxSubmit(options);
return false;
});
});
</script>

Redirect Javascript (Jquery) function to homepage

I need to redirect the following JS snippet, to http://localhost/homepage at the end of $('form').submit(); How can I do it ?
<script>
//<![CDATA[
$(document).ready(function() {
$('#myModal .btn.btn-primary').click(function() {
$('#myModal').modal('hide');
$('form').submit();
});
});
//]]>
</script>
the html involved is here :
<div class='modal' id='myModal'>
<div class='modal-header'>
<div class='close'>x</div>
<h3>Add Tags</h3>
</div>
<div class='modal-body'>
<form accept-charset="UTF-8" action="/tagging" data-remote="true" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="7x2CSQ5spL32f1rjCJd5MdwYO6uZ+IwVsLEQ9ZB/Xcc=" /></div>
<input id="tags_string" name="tags_string" type="text" value="zoz" />
<input id="id" name="id" type="hidden" value="4f1c95e51d41c80ff20003f0" />
<div class='modal-footer'>
<!-- .btn.btn-primary= submit_tag "Add tag" -->
<a class='btn btn-primary'>
<input class='hidden' name='commit' type='submit' value='Add Tag'>
</a>
</div>
</form>
</div>
</div>

when you submit the form, it stops processing, it goes to the page where the form's 'action' directs (in your example, whatever page runs at /tagging) and that's it. If you want to do any redirection it'll have to do in the /tagging page after it does whatever it needs to do with the form fields