We Keep Coding

Post button without refreshing page

I'm a newbie in coding and I need your expertise help.
This is my index.php codes
<div class="container">
<div class="row text-center"><h1>Stamford Network</h1></div>
<div class="row">
<div class="col-md-9">
<input type="textarea" name="text" placeholder="What's on your mind?" class="form-control" id="info" />
<input type="button" name="post" value="Post" class="btn btn-primary" id="post" />
</div>
<div class="col-md-3">
<h3>Hello,
<?php echo $_SESSION['username']; ?>
</h3>
<a class="btn btn-primary" href="login.php" role="button" >Logout</a>
</div>
</div>
<div class="row">
<div class="col-md-9">
<h4 id="display"></h4>
</div>
<div class="col-md-3"></div>
</div>
</div>
My .js code which link to the above index.php
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
document.getElementById("display");
});
}
Can anyone tell me how create a post and display it without refreshing the page. Simply just click on the Post button then the information should appear below the posting form. While the words in the textarea should be gone when the button is clicked.
Please only show me the javascript way

var button = document.getElementById('post'),
info = document.getElementById('info'),
display = document.getElementById('display');
button.addEventListener('click', function(){
display.innerText = info.value;
info.value = '';
});
If you want the value to be uploaded to server for processing, you will need to add ajax XMLHttpRequest in the event listener.
Learn more about ajax here.

You should do it asynchronously.
First, use the tag to surround the data that you want to post:
<form>
...
</form>
Tutorial about forms:
https://www.w3schools.com/html/html_forms.asp
To post form asynchronously, you can use jquery or js. The simple and quick way is jquery. Here is a link to the documentation:
https://api.jquery.com/jquery.post/
There is an example at the end of the page of the jquery post doc's page, that explains how to use it, and basically do the thing that you wanted.

try this.
<script type="text/javascript">
window.onload = function() {
var button = document.getElementById("post");
button.addEventListener("click",
function() {
//document.getElementById("display");
document.getElementById('display').innerHTML = document.getElementById('info').value;
document.getElementById("info").style.display = "none";
});
}
</script>

Bootstrap File Upload clone

I am using Krajee's Bootstrap file upload plugin for file input & I am trying to clone the file input so that users can add multiple files from different folders rather than selecting it at once. The issue I am facing is after the file input gets cloned, it behaves weirdly. I have setup a fiddle for this.
When I am trying to reset or clear the file input, it always clears the first input. Have been trying a lot of options & after spending so many hours decided to post here.
JS Fiddle: https://jsfiddle.net/asfg9mna/
Any ideas as to how to make it work fine? Issue is whenever i click on delete icon, it always deletes the first input's file & not the current one.
HTML code:
<form role="form" id="upload-form" class="form-horizontal">
<div class="addFiles text-nowrap">
<div class="appendClass form-group" style="margin-bottom: 1.5%;">
<label class="col-md-2 control-label" for="input-2">Select Files</label>
<div class="col-md-9 col-9-input uploadFile">
<input placeholder="Select Files" id="input-2" name="input2[]" type="file" class="file input-upload" data-show-upload="false" data-show-preview="false">
</div>
<button type="button" class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
<i class="fa fa-plus"> </i>
</button>
<button type="button" class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
<i class="fa fa-times"> </i>
</button>
</div>
</div>
</form>
JS Code:
//Clone Upload File Div
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(this).tooltip('hide');
$(".appendClass:first").clone(true).appendTo(".addFiles");
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
//$fileInput = $('.input-upload');
//$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
//$('.input-upload').fileinput('clear').fileinput();
$('.uploadFile').next().trigger('reset');
});

Here is jsfiddle
Update your js code like this,
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(this).tooltip('hide');
parent_element = $(".appendClass:first");
$(".input-upload").fileinput('destroy');
element = parent_element.clone();
element.appendTo(".addFiles");
$(".input-upload").fileinput();
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
//$fileInput = $('.input-upload');
//$fileInput.replaceWith( $fileInput = $fileInput.clone( true ) );
//$('.input-upload').fileinput('clear').fileinput();
//$('.uploadFile').next().trigger('reset');
});
And please write your code to update ids of every elements which will be cloned.
EDIT
$(document).on('click', ".addFilesBtn", function(e) {
e.preventDefault();
$(this).tooltip('hide');
$(".has_clone").each(function() {
$this = $(this);
var parent_element = $(this).closest(".appendClass");
var $element = parent_element.clone();
$element.find(".file-input").remove();
var counter = parseInt($("#counter").val()) + 1;
$element.find(".col-md-9").append('<input placeholder="Select Files" id="input-' + counter + '" name="input2[]" type="file" class="file dynamic_clone input-upload " data-show-upload="false" data-show-preview="false">');
$("#counter").val(counter);
$element.appendTo(".addFiles");
$(".input-upload").fileinput({
'showPreview': true
});
});
$('.closeFilesBtn').show();
$('.closeFilesBtn:first').hide();
});
//Close addFile div - Upload files
$(document).on('click', ".closeFilesBtn", function(e) {
e.preventDefault();
$(this).closest(".appendClass").hide();
});
Thanks

Unable to check a checkbox via javascript

I have a form on a page, with a checkbox input field. I also have a table on the page with a column that has true/false values. Each row in the table also has a checkbox with id="selectedReviewTypeYear". There is also a button with id="getDataToEdit".
When the getDataToEdit button is clicked, the javascript checks to see if any id="selectedReviewTypeYear" boxes are checked. If a box is checked, a div is opened up with form fields prepopulated based on the row selected. If no boxes are checked, the div remains hidden.
My problem is that the checkboxes aren't getting checked when the table data is "true." Here is the javascript:
$('#getDataToEdit').on('click', function (){
$('#reviewTypeTable').find('tr').each(function (){
var row = $(this);
if (row.find('input[id="selectedReviewTypeYearID"]').is(':checked')){
var idx = table.row(this).index();
var vReviewName = document.getElementById("editReviewTypeYear-name");
var vAllowMultiple = document.getElementById("allowMultiple");
var vAllowMultipleSpan = document.getElementById("allowMultipleSpan");
vReviewName.innerHTML = table.cell(idx, 2).data();
if (table.cell(idx, 3).data() == "true"){
$("#allowMultiple").prop("checked", true);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
else {
$("#allowMultiple").prop("checked", false);
vAllowMultipleSpan.innerHTML = table.cell(idx, 3).data();
}
showHide.style.visibility = 'visible';
}
})
});
For testing purposes, I added a span element to the form called allowMultipleSpan. This was simply so I could see if the javascript is able to read the data in the table field, which it is. When I select a row, then click the button, the div opens up with the vReviewName.innerHTML populated correctly as well as the allowMultipleSpan populated correctly. However, the checkbox is not getting checked if the data is "true".
I am running JQuery 2.1.1. So far, I have tried using the following variations of the script, all with the same result:
From the JQuery (1.6+) spec:
$("#allowMultiple").prop("checked", true);
From the jQuery (1.5-) spec:
$("#allowMultiple").attr("checked", true);
From the Javascript spec:
document.getElementById("allowMultiple").checked = true;
Here is the HTML for my form:
<div class="widget-header"><h3>Edit: <span id="editReviewTypeYear-name" style="color: blue"></span></h3></div>
<div class="widget-content">
<form id="editReviewTypeYear-form" class="form-horizontal" url="submitReviewTypeYear.htm">
<div class="form-group">
<label class="col-sm-2 control-label">Allow Multiple: </label>
<div class="col-sm-10">
<input type="checkbox" id="allowMultiple" name="allowMultiple" />
<span id="allowMultipleSpan" style="color: blue"></span>
</div>
</div>
<div class="form-actions">
<button id="submitReviewTypeYear" type="submit">Save</button>
<button class="btn btn-small btn-warning reg-cancel" id="submitReviewTypeYear-cancel" type="button" name="Cancel" value="cancel">Cancel</button>
</div>
</form>
</div>

Have you tried if (table.cell(idx, 3).data() == true)?
You were always getting the false condition because you were comparing a boolean with "true" as a string.

Trouble with binding events to Bootstrap 3 (button.js) button radios

I'm having trouble getting the correct value from a segmented control I made with the radio button component of button.js in Twitter Bootstrap 3. When I bind a click event to the segmented control that runs $.serialize() on the parent form, it return the unchecked value of the radio button along with all the other correct values from the other inputs.
I suspect it might be related to the fact that I can't bind this event directly to the segmented control's input. When I tried to bind the event directly to the input I didn't get a response back, so I bound it to the label.
Here's an example of the problem in a fiddle: https://jsfiddle.net/stevekas/9w94pL4o/
<form id="form">
<div id="radios">
<div class="radio">
<label class="major-category">
<input facet="exclusive" type="radio" name="hipsum" value="hashtag" />hashtag</label>
</div>
<div class="radio">
<label class="major-category">
<input facet="exclusive" type="radio" name="hipsum" value="farm-to-table" />farm-to-table</label>
</div>
<div class="radio">
<label class="major-category">
<input facet="exclusive" type="radio" name="hipsum" value="gastropub" />gastropub</label>
</div>
</div>
<!--/ #radios -->
<div id="segmented-control" class="btn-group btn-group-justified" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="segmented-control" id="roof" value="roof" autocomplete="off" checked />roof</label>
<label class="btn btn-default">
<input type="radio" name="segmented-control" id="party" value="party" autocomplete="off" />party</label>
</div>
<!--/ #segmented-control -->
</form>
<script>
$('.radio input').on('click', function () {
var data = $('#form').serialize();
});
$('#segmented-control label').on('click', function () {
var data = $('#form').serialize();
});
</script>

It probably happens because the click for the label is processed before the click for the input (the label is higher in the DOM tree).
You can force debug to be called after all the events have been processed using setTimeout() without any delay, like this:
$('#segmented-control label').on('click', function () {
setTimeout(function() {
debug();
}, 0);
});
This works because setTimeout() enqueues a new event, which will be run after all the current pending ones.

Grails: g:uploadForm inside a modal div supress submission

I have a g:uploadForm that appears inside of a modal dialog. I don't want it to close if no file is chosen for upload and the user presses the Upload button, instead, I want it to display an error like "please choose a file". Currently it does close and I was wondering if there is any way to suppress this. There are a few radio button on this form also in a group and I also don't want the form to close if no choice is made from the radio button group. Currently it does close if no choice is made. Here is my form as it is currently:
<div class="modal" id="promptUpload">
<h3></h3>
<div id = "uploadborder">
<g:uploadForm action="upload">
<div id = "fileType">
<p><u>File Type</u></p>
<label for="excelFile">Excel:</label><g:radio id = "excelFile" name="fileTypegrp" value="1" checked="true"/><br>
<label for="textFile">Text File(delimited):</label><g:radio id = "textFile" name="fileTypegrp" value="2" disabled="true"/><br>
<label for="xmlFile">XML:</label><g:radio id = "xmlfile" name="fileTypegrp" value="3" disabled="true"/>
</div>
<div id = "dataType">
<p><u>Data Type</u></p>
<label for="accData">Account Data:</label><g:radio id = "accData" name="dataTypegrp" value="1"/><br>
<label for="entData">Entity Data:</label><g:radio id = "entData" name="dataTypegrp" value="2"/><br>
<label for="indData">Individual Data:</label><g:radio id = "indData" name="dataTypegrp" value="3"/><br>
</div>
<div id = "uploaderfield">
<input id = "chseFile" type="file" name="file"/><br>
<input id = "submFile" type="submit" value="Upload" />
<button id = "cancel1" class = "close" type="button"> Cancel </button>
</div>
</g:uploadForm>
I am using jQuery UI Tools to bring up this modal which contains the form. I've notice that if I change my upload button to simply:
<button id = "submFile"></button>
it still closes the modal and submits the form. That I find strange. The reason I included the radio buttons in my g:uploadForm is because I need their values in my params.

You have to set the type = button to supress the form submission.