Develop Reference

How to get table row data in array format wth help of jquery

I am new in JavaScript. I want when I click on edit button that's specific row data fetch out and I want to get the table row data in array with the help of jquery.
$('.role-edit-btn').click(function() {
event.preventDefault();
var formid = $(this).attr("formid");
var data = $(formid).serialize();
json_data = JSON.stringify(data);
alert(json_data);
});
<form id="RoleNae">
<tr class="table">
<td>
<?php echo $Sr; ?> </td>
<td class="text-capitalize RoleName">
<?php echo $value['RoleName']; ?>
</td>
<td>
<div class="row ">
<div class="col">
<a class="btn btn-block">
<i class="fas fa-solid fa-trash btn-delete" style="color:red;" RecordId="<?php echo $value['RoleId']; ?>" TableName="role" PrimaryKey="RoleId" FunctionCallingUrl="controller/RoleController.php" FunctionCalling="DeleteRole" RedirectPage="ViewRole.php" ></i>
</a>
</div>
</div>
</td>
</tr>
</form>

Post For Dynamic Html Form

So this is a kind of follow up to another post I made earlier, I have this application I'm working on where I have a dynamic html form, where a user can add and remove rows. I am trying to come up with a way to capture this data when the user posts it, but I am falling short on how to do this. My idea right now is to capture a JavaScript variable from the html page that keeps track of row numbers, and capture the one row at a time, parse the row for an email, then send it to my function. Where I'm at a loss is how to capture the JavaScript variable, and from there how to I separate the rows into separate objects and loop through them. If someone can direct me towards resources that can help me resolve this or if someone can point me in the right direction, I would highly appreciate it! Please find below the html for the dynamic form, the JavaScript with this form and the post mapping for the page (the code for the post mapping is incomplete, this is really where I need aid). Thank you all in advance for any and all help!!!!
<form th:action="#{/patienthome/contact-trace-report}" method="post">
<div class="card shadow border-start-primary py-2" data-bss-hover-animate="" style="width: auto;height: auto; margin-bottom:50px;">
<div class="form-group mb-3">
<div id="formdiv-1">
<div class="row" style="margin-right:0px;margin-left:0px;padding-top:24px;">
<div class="col-md-8 offset-md-1" style="padding-right: 0px;padding-left: 0px;margin-left: 27.828px;">
<p style="margin-left: 2%;font-family: Roboto, sans-serif;font-size: 47px;text-align: left;"><strong>Contacted Individuals</strong></p>
</div>
</div>
<!-- Here html for addeable rows -->
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
First Name
</th>
<th class="text-center">
Last Name
</th>
<th class="text-center">
Email
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='firstName' placeholder='First Name' class="form-control"/>
</td>
<td>
<input type="text" name='lastName' placeholder='Last Name' class="form-control"/>
</td>
<td>
<input type="text" name='email' placeholder='Email Adress' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<!-- Here is end of html for addeable rows -->
<div class="row d-md-flex d-xxl-flex justify-content-md-center align-items-md-center justify-content-xxl-center align-items-xxl-center" style="margin-right: 0px;margin-left: 0px;padding-top: 24px;width: auto;">
<div class="col-12 col-md-4 offset-md-4 d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="width: auto;margin-left: 0;padding-left: 0;padding-right: 0px;"><button class="btn btn-light btn-lg text-center d-xxl-flex justify-content-xxl-center align-items-xxl-center" style="margin-left: 0px;width: auto;height: auto;color: rgb(255,252,252);background: rgb(231,74,59);" type="submit">Submit </button></div>
</div>
</div>
</div>
</div>
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
var i=1;
$(document).ready(function(e){
$("#add_row").click(function()
{
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='firstName"+i+"' type='text' placeholder='First Name' class='form-control input-md' /></td><td><input name='lastName"+i+"' type='text' placeholder='Last Name' class='form-control input-md'></td><td><input name='email"+i+"' type='text' placeholder='Email Address' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
})});
$(document).ready(function(e){
$("#delete_row").click(function()
{
if(i>1)
{
$("#addr"+(i-1)).html('');
i--;
}
})});
</script>
//Post Mapping Contract Trace Report
#PostMapping("/patienthome/contact-trace-report")
public ModelAndView contractTraceReportPost(ModelAndView modelAndView, User user, #RequestParam String email, #RequestParam String firstName, #RequestParam String lastName ) throws IOException, ParseException
{
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
Patient patient = patientRepo.findByEmail(authentication.getName());
//Will capture variable i from javascript so we know how many rows to capture
//Will try to capture rows as an object, then parse the email from the row
//Will then use the email to find the patient object and send it tot he list
while(i>0)
{
//capturing row as Object
//Parsing Row for email
//Need to capture as many emails as there are rows
Patient contact =patientRepo.findByEmail(email);
//Will add the user to the list
patient.addContactTraceFrom(contact);
i--;
}
modelAndView = new ModelAndView("redirect:/patienthome");
modelAndView.addObject("confirmationMessage", "Patient Profile Was Updated");
return modelAndView;
}

all dataTable pages becomes one when being refreshed via AJAX

I was trying to implement this guide from this page: How to update an HTML table content without refreshing the page?
I somehow managed to implement it, unfortunately the Client-Side dataTable is destroyed when refreshing it.
By destroyed, all the data in the dataTable is in a single page.
This is the table.
<table id="earnings_amendment_account" class="table table-bordered" style="table-layout: fixed; display: none">
<thead>
<th></th>
<th>Account Code</th>
<th>Account Title</th>
<th>Account Type</th>
<th>Tools</th>
</thead>
<tbody id="table-body">
<?php include 'tableBody.php';?>
</tbody>
</table>
This is the tableBody.php
<?php include 'backend/conn.php'; ?>
<?php
$params=array();
$sql = "SELECT accountcode,accounttype,accounttitle,accounttype,postedby,dateposted,approvedby,dateapproved FROM earningsamendmentaccount";
$query = sqlsrv_query($conn, $sql, $params, array("Scrollable" => SQLSRV_CURSOR_KEYSET));
if ($query === false ) { echo "Error (sqlsrv_query): ".print_r(sqlsrv_errors(), true); exit; }
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr data-key-1='".$row['postedby']."' data-key-2='".$row['dateposted']."' data-key-3='".$row['approvedby']."' data-key-4='".$row['dateapproved']."'>
<td class='details-control'></td>
<td>".$row['accountcode']."</td>
<td>".$row['accounttitle']."</td>
<td>".$row['accounttype']."</td>
<td>
<button class='btn btn-default btn-sm view btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-eye'></i> View</button>
<button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-edit'></i> Edit</button>
<button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-trash'></i> Delete</button>
" ?>
<?php if (empty($row['approvedby'])) { echo " <button class='btn btn-warning btn-sm approve btn-flat' data-id='".$row['accountcode']."'><i class='fa fa-check-square-o'></i> Approve</button> "; } ?>
<?php "
</tr>
";
}
?>
This is my jQuery/AJAX - (earnings_amendment_account.php)
function SubmitFormData() {
var add = $("#add").val();
var add_accountcode = $("#add_accountcode").val();
var accounttitle = $("#accounttitle").val();
var accounttype = $("#accounttype").val();
var postedby = $("#postedby").val();
var dateposted = $("#dateposted").val();
$.post("earnings_amendment_account_add.php",
{
add: add,
add_accountcode: add_accountcode,
accounttitle: accounttitle,
accounttype: accounttype,
postedby: postedby,
dateposted: dateposted
},
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
$.get("tableBody.php", function(data) {
$("#table-body").html(data);
$("#earnings_amendment_account").DataTable().ajax.reload();
});
});
}
This is the modal being called.
<form autocomplete='off' id="myForm" class="form-horizontal" method="POST" action="earnings_amendment_account_add.php">
<!-- Table Loader -->
<div class="form-group" id="earnings_amendment_account_modalload">
<div class="col-sm-9" id= "earnings_amendment_account_modalload" style="width:100%">
</div></div>
<div class="form-group">
<label for="accounttitle" class="col-sm-3 control-label">Account Title</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="accounttitle" name="accounttitle" style="text-transform:uppercase;width:90%" required>
</div>
</div>
<div class="form-group" hidden>
<label for="postedby" class="col-sm-3 control-label">Posted By</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="postedby" name="postedby" value="<?php echo $user['firstname'].' '.$user['lastname']; ?>" required>
</div>
</div>
<div class="form-group" hidden>
<label for="dateposted" class="col-sm-3 control-label">Posted By</label>
<div class="col-sm-9">
<input type="text" autocomplete="off" class="form-control" id="dateposted" name="dateposted" value="<?php echo gmdate('Y-m-d h:i:s'); ?>" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default info btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="button" onclick="SubmitFormData();" class="btn btn-primary btn-flat" name="add"><i class="fa fa-save"></i> Save</button>
<div id="results"></div>
</form>
This is the dataTable.
function format ( dataSource ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="table table-bordered">';
for (var key in dataSource){
html += '<tr>'+
'<td>' + key +'</td>'+
'<td>' + dataSource[key] +'</td>'+
'</tr>';
} return html += '</table>'; }
var earnings_amendment_account_table = $('#earnings_amendment_account').DataTable({});
// Add event listener for opening and closing details
$('#earnings_amendment_account').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = earnings_amendment_account_table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format({
'Posted By : ' : tr.data('key-1'),
'Date Posted : ' : tr.data('key-2'),
'Approved By : ' : tr.data('key-3'),
'Date Approved : ' : tr.data('key-4')
})).show();
tr.addClass('shown');
} });
Is there a way for this to be fixed?

try use your datatable object
var earnings_amendment_account_table = $('#earnings_amendment_account').DataTable({});
so on your jQuery/AJAX - (earnings_amendment_account.php) change $("#earnings_amendment_account").DataTable().ajax.reload(); to earnings_amendment_account_table.ajax.reload();

How to multiple update rows with modal bottstrap

hello guys can you help me with my problem, i want to update multiple rows with modal bootstrap
So when I check the line and press the update button, it will appear modal bootstrap and I will update from there
I'm having trouble finding the script, can you help me finish my code?
this is the explanation
I checked the line
After that I press "Pindah Department" or in english "Move Departemen"
this basically updates quickly, just you check the line and press the "Move Departement" button, then bootstrap capital appears and you will select the value in the dropdown to update the line
this is my view :
<div class="row">
<div class="col-md-12">
<div class="panel panel-info">
<div class="panel-heading">Data Siswa Departemen ......</div>
<div class="panel-body">
<table id="emp_id" class="table table-bordered dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th width="1%" align="center"><input type="checkbox" onClick="toggle(this)" id="checkAll" name="checkAll" /></th>
<th width="1%" align="center">No.</th>
<th width="20%" align="center">Nama Lengkap</th>
<th width="5%" align="center">No Induk</th>
<th width="10%" align="center">Jenis Kelamin</th>
<th width="5%" align="center">PIN</th>
<th width="20%" align="center">Departemen</th>
</tr>
</thead>
<tbody>
<?php
foreach($data as $d){
?>
<tr>
<td>
<input class="childbox" width="1%" type="checkbox" name="msg[]" align="center" value="" data-userid="<?php echo $d['emp_id'] ?>"/>
</td>
<td width="1%" align="center"><?php echo $d['emp_id']; ?></td>
<td class="data-check"><?php echo $d['first_name']; ?></td>
<td class="data-check"><?php echo $d['nik']; ?></td>
<td class="data-check"><?php echo $d['gender']=='0' ? 'Laki-Laki' : 'Perempuan'; ?></td>
<td class="data-check"><?php echo $d['pin']; ?></td>
<td class="data-check"><?php echo $d['dept_name']; ?></td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<th width="1%" align="center"><input type="checkbox" onClick="toggle(this)" id="checkAll" name="checkAll" /></th>
<th width="1%" align="center">No.</th>
<th width="20%" align="center">Nama Lengkap</th>
<th width="5%" align="center">No Induk</th>
<th width="10%" align="center">Jenis Kelamin</th>
<th width="5%" align="center">PIN</th>
<th width="20%" align="center">Departemen</th>
</tr>
</tfoot>
</table>
</div>
<div class="panel-footer">
<button class="btn btn-success" onclick="edit_book(<?php echo $d['emp_id'];?>)"> Move Departemen</button>
</div>
</div><!--end panel-->
<script src="<?php echo base_url() ?>assets/baru/jquery-3.2.1.min.js"></script>
<script src="<?php echo base_url() ?>assets/baru/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url() ?>assets/baru/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#emp_id').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
$("input[name='checkAll']").click(function() {
var checked = $(this).attr("checked");
$("#emp_id tr td input:checkbox").attr("checked", checked); });
} );
function toggle(id) {
checkboxes = document.getElementsByName('msg[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = id.checked;
}
}
function save()
{
var url;
if(save_method == 'add')
{
url = "<?php echo site_url('proses/book_add')?>";
}
else
{
url = "<?php echo site_url('proses/book_update')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: prepareData(),
dataType: "JSON",
success: function(data)
{
//if success close modal and reload ajax table
$('#modal_form').modal('hide');
location.reload();// for reload a page
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
}
});
}
</script>
<!--modal-->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Departemen</h4>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="emp_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Departemen</label>
<div class="col-md-9">
<select name="dept_id_auto" class="form-control pull-right">
<?php
foreach($groups as $c)
{
echo '<option value="'.$c['dept_id_auto'].'">'.$c['dept_name'].'</option>';
}
?>
</select>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div><!-- end cols-->
</div><!--end row-->
I have trouble finding the script that will be called in the "Move Departement" button
This is my controller :
public function pindah_departemen()
{
// MASUKKAN PARAMETER DATA DISINI, BIASANYA HASIL DARI QUERY
$data = array(
'title' => 'Pindah Departemen',
'data' => $this->Pindah_dept_model->GetSiswa($this->input->get('filter_departemen'))
);
$data['groups'] = $this->Pindah_dept_model->getAllGroups();
$this->template->load('template','proses/pindah_departemen', $data);
}
public function book_update()
{
$data = array(
'dept_id_auto' => $this->input->post('dept_id_auto'),
);
$this->Pindah_dept_model->update_departemen(array('emp_id' => $this->input->post('emp_id')), $data);
echo json_encode(array("status" => TRUE));
}
public function ajax_edit($id)
{
$data = $this->Pindah_dept_model->get_by_id($id);
echo json_encode($data);
}
This is my Model :
class Pindah_dept_model extends CI_Model
{
var $table = 'emp';
public function GetSiswa($dep=NULL)
{
$this->db->select(array('emp_id', 'first_name', 'nik', 'gender', 'pin', 'dept_name'))
->from('emp AS e')
->join('dept AS d','d.dept_id_auto = e.dept_id_auto', 'left');
if(!empty($dep)) $this->db->where('d.dept_id_auto', $dep);
$data = $this->db->order_by('emp_id','ASC')->get();
return $data->result_array();
}
public function getAllGroups()
{
$query = $this->db->query('SELECT dept_id_auto,dept_name FROM dept');
return $query->result_array();
}
public function get_by_id($id)
{
$this->db->from($this->table);
$this->db->where('emp_id',$id);
$query = $this->db->get();
return $query->row();
}
public function update_departemen($where, $data)
{
$this->db->update($this->table, $data, $where);
return $this->db->affected_rows();
}
please guys help me finish my code, i'm looking for a way out for my code for 2 weeks and still no results
Thanks Before

I don't know if I'm late or not.
You can try do something like below.
HTML
<label>Value 1 <input name='checkme[]' type='checkbox' value='1'></label><br>
<label>Value 2 <input name='checkme[]' type='checkbox' value='2'></label><br>
<label>Value 3 <input name='checkme[]' type='checkbox' value='3'></label><br>
<label>Value 4 <input name='checkme[]' type='checkbox' value='4'></label><br>
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_form" >Open Sesame</button>
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Update Departemen</h4>
</div>
<form action="#" id="form" class="form-horizontal">
<div class="modal-body form">
<input type="hidden" value="" name="emp_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Departemen</label>
<div class="col-md-9">
<select name="dept_id_auto" class="form-control pull-right">
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">* This is supposed to be hidden value</label>
<div class="col-md-9">
<input name='list_check'>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnSave" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
Add hidden input, and we will get the checked value and store here later.
JAVASCRIPT
$(document).ready(function(){
$('#modal_form').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var vals = $('input:checkbox[name="checkme[]"]').map(function() {
return this.checked ? this.value : undefined;
}).get();
var modal = $(this);
modal.find('.modal-title').text("Open Sesame : Most code in here from bootstrap documentation. XD"); // just for fun.
modal.find(".modal-body input[name='list_check']").val(vals);
});
$("form").on("submit",function(x){
var val_submit = $(this).serialize(); // data to be send via ajax
alert("POST DATA : "+val_submit+"\n This is the value you will submit. The rest you can figure it out. Use explode() to split the list_check. And update like you want it.");
x.preventDefault();
});
});
After the button to open the modal. We will get the value from checkbox name checkme[]. This data need to be explode later in your php.
And try submit it.
I'm not going to take all your code. you need to figure out the rest by yourself. I just prepare example code that can be use. Maybe just like you want it. :)
JSFiddle Example : https://jsfiddle.net/synz/pyb7rjdo/

jQuery(ajax) submit form

I am having some issues with $.ajax post method.
I would like my form to submit form data while on the current page, however for some odd reason my script is redirecting to the action page.
Please could someone identify what's causing this to happen and how I can resolve this problem?
Here is my script:
$(document).ready(function() {
$('#OverLaySetupScreen').submit(function(e) {
e.preventDefault();
var color1 = $('#color1').val();
var color2 = $('#color2').val();
var color3 = $('#color3').val();
var color4 = $('#color4').val();
var color5 = $('#color5').val();
var bigtext = $('#bigtext').val();
var bgcolor = $('#bgcolor').val();
var lowtextcolor = $('#lowertextcolor').val();
var lowertexttext = $('#lowertextext').val();
var bgimage = $('#bgimage').val();
var bgvideo = $('#bgvideo').val();
var toggle1 = $('#toggle1').val();
var toggle2 = $('#toggle2').val();
var toggle3 = $('#toggle3').val();
var toggle5 = $('#toggle5').val();
var toggle6 = $('#toggle6').val();
var toggle7 = $('#ltoggle7').val();
var discordname = $('#discordname').val();
var discordhash = $('#discordhash').val();
$.ajax({
url: 'actions/save.php',
type: 'POST',
data: {
color1: color1,
color2: color2,
color3: color3,
color4: color4,
color5: color5,
bigtext: bigtext,
bgcolor: bgcolor,
lowtextcolor: lowtextcolor,
lowertexttext: lowertexttext,
bgimage: bgimage,
bgvideo: bgvideo,
toggle1: toggle1,
toggle2: toggle2,
toggle3: toggle3,
toggle5: toggle5,
toggle6: toggle6,
toggle7: toggle7,
discordname: discordname,
discordhash: discordhash
}
})
.done(function(data) {
var result = $.trim(data);
alert(result);
})
.fail(function() {
alert('Failed to login...');
});
});
});
<form action="actions/save.php" method="post" id="OverLaySetupScreen" name="OverLaySetupScreen" pb-autologin="true" autocomplete="off" novalidate>
<table align="center" width="100%;" border="1">
<tbody>
<tr>
<td colspan="2">Event Toggle Control</td>
<td width="46%">
<div align="center">Preview</div>
<?php //<div align="right"><input type="button" value="Update Preview" onClick="preview()"></div>?>
</td>
<td width="5%">
<div align="center">Load Settings</div>
</td>
</tr>
<tr>
<td colspan="2">
<div align="left">
<font color="black">
<ul>
<li>
<input type="checkbox" <?php if($_GET[ "haloween"]=="false" ) { } else { echo "checked"; } ?> id="1toggle" name="1toggle" onChange="updatethis()"> Haloween [Preview]
</li>
<li>
<input type="checkbox" <?php if($_GET[ "xmas"]=="false" ) { } else { echo "checked"; } ?> id="2toggle" name="2toggle" onChange="updatethis()"> Christmas [Preview]</li>
<li>
<input type="checkbox" <?php if($_GET[ "newyear"]=="false" ) { } else { echo "checked"; } ?> id="3toggle" name="3toggle" onChange="updatethis()"> New Years [Preview]
</li>
</ul>
US Based Events
<ul>
<li>
<input type="checkbox" <?php if($_GET[ "4july"]=="true" ) { echo "checked"; } else { } ?> id="5toggle" name="5toggle" onChange="updatethis()"> 4th July [Preview]
</li>
</ul>
Jewish Faith Based Events
<ul>
<li>
<input type="checkbox" <?php if($_GET[ "confetti"]=="true" ) { echo "checked"; } else { } ?> id="6toggle" name="6toggle" onChange="updatethis()"> Rosh Hashanah [
Preview]</li>
</ul>Charity Events
<ul>
<li><input type="checkbox" <?php if($_GET[ "extralife"]=="true" ) { echo "checked"; } else { } ?> id="7toggle" name="7toggle" onChange="updatethis()"> Extra Life [Preview]</li>
</ul>
</font>
</div>
</td>
<td colspan="2" rowspan="9" valign="top"><iframe id="previewframe" src="<?php if($_GET[" importSettings "]) { echo $protocol . $_SERVER["SERVER_NAME "] . "https://crossfire151.gq/twitch/chottis/?chottis=false&preview=true&text=Loading&text2=Importing%20Settings "; } else { ?><?php echo $protocol . $_SERVER["SERVER_NAME "]; ?>/twitch/chottis/preview/<?php if($_GET["chottis "] == "true ") { echo "? "; } else { echo "?chottis=false& "; } ?>preview=true<?php } ?>" frameborder="0" scrolling="no" style="height: 250px; width: 100%;"></iframe></td>
</tr>
<tr>
<td colspan="2">Big Text Customization</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="15%">
<div align="center">Color 1</div>
</td>
<td width="34%">
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c1 "]) { echo $_GET["c1 "]; } else { echo "7E147C "; } ?>" id="color1" name="color1"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 2</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c2 "]) { echo $_GET["c2 "]; } else { echo "7C2B88 "; } ?>" id="color2" name="color2"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 3</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c3 "]) { echo $_GET["c3 "]; } else { echo "AC44AE "; } ?>" id="color3" name="color3"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 4</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c4 "]) { echo $_GET["c4 "]; } else { echo "9633A4 "; } ?>" id="color4" name="color4"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Color 5</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" c5 "]) { echo $_GET["c5 "]; } else { echo "B13DC2 "; } ?>" id="color5" name="color5"></div>
</td>
</tr>
<tr>
<td>
<div align="center">Text</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="text" value="<?php if($_GET[" text "]) { echo $_GET["text "]; } else { echo "be right back "; } ?>" id="bigtext" name="bigtext"></div>
</td>
</tr>
<tr>
<td colspan="4">Lower text customization</td>
</tr>
<tr>
<td>
<div align="center">Text</div>
</td>
<td><input class="input" onchange="preview()" type="text" value="<?php if($_GET[" text2 "]) { echo $_GET["text2 "]; } else { echo "go treat yourselves! "; } ?>" id="lowertexttext" name="lowertexttext"></td>
<td colspan="2">Click here to set this text to blank - This will remove the lower text completely</td>
</tr>
<tr class="ltccollumn">
<td>
<div align="center">Color</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" lowertextcolor "]) { echo $_GET["lowertextcolor "]; } else { echo "702E6D "; } ?>" id="lowertextcolor" name="lowertextcolor"></div>
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="4">Background Customization</td>
</tr>
<tr>
<td>
<div align="center">Custom Background</div>
</td>
<td>
<div align="center">Setup...</div>
</td>
<td colspan="2"> </td>
</tr>
<tr>
<td>
<div align="center">Background Color</div>
</td>
<td>
<div align="center"><input class="input" onchange="preview()" type="color" value="#<?php if($_GET[" bgcolor "]) { echo $_GET["bgcolor "]; } else { echo "37133C "; } ?>" id="bgcolor" name="bgcolor"></div>
</td>
<td colspan="2">
<div id="copystate"></div>
</td>
</tr>
<tr>
<td>
<div align="center"></div>
</td>
<td colspan="3">
<div align="center">
<?php if(isset($_SESSION["brb-authenticated"])) { ?>
<input class="input" onchange="preview()" type="text" id="sourceurl" value="<?php if($_GET[" importSettings "]) { } else { ?><?php echo $protocol . $_SERVER["SERVER_NAME "]; ?>/twitch/chottis/preview/<?php if($_GET["chottis "] == "true ") { echo "? "; } else { echo "?chottis=false& "; }?>c1=7e147c&c2=7c2b88&c3=ac44ae&c4=9633a4&c5=b13dc2&text2=go treat yourselves&text=be right back&chromakey=37133c&text2c=702e6d&bgimg=&bgvideo=&haloween=true&xmas=true&newyear=true&4july=false&confetti=false&extralife=false <?php } ?>" onClick="this.select(),copythis(),document.execCommand('copy');" readonly>
<?php } elseif(!isset($_SESSION["brb-authenticated"])) { ?>
Finish Setup <input type="submit" value="submit"></div>
<?php } ?>
</div>
</td>
</tr>
</tbody>
</table>
<div align="center"><input type="reset" onClick="setTimeout('preview()', 500)" value="Reset to default Settings"></div>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button>
<h3 class="modal-title" id="myModalLabel">Custom Background</h3>
</div>
<div class="modal-body">
<center>
<p>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" <?php if($_GET["bgvideo"]) {} else { echo "checked"; }?> onChange="radioupdate()">
Image</label>
<label>
<input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" <?php if($_GET["bgvideo"]) { echo "checked"; } else {} ?> onChange="radioupdate()">
Video</label>
<br>
</p>
<p id="type1">
<?php if($_GET["bgvideo"]) { ?>Please enter an video location(URL) below.<br/>This video can be from any source but hotlinking must be enabled.<br/>Dropbox is supported, make sure you set "dl=1"<br/>Supported format: MP4.
<?php } else { ?>Please enter an image location(URL) below.<br/>This image can be from any source but hotlinking must be enabled.<br/>Dropbox is supported, make sure you set "dl=1"<br/>Supported formats: jpg,jpeg,png,bmp,gif.
<?php } ?>
</p>
<p>
<div id="type2">
<?php if($_GET["bgvideo"]) { ?><input type="hidden" id="bgimage"><input type="text" id="bgvideo" name="bgvideo" <?php if($_GET[ "bgvideo"]) { echo 'value="' . $_GET[ "bgvideo"] . '" '; } ?>style="width: 60%">
<?php } else { ?><input type="hidden" id="bgvideo"><input type="text" id="bgimage" name="bgimage" <?php if($_GET[ "bgimage"]) { echo 'value="' . $_GET[ "bgimage"] . '" '; } ?>style="width: 60%">
<?php } ?>
</div>
<span id="type3"><?php if($_GET["bgvideo"]) { ?><br/><div align="left" style="color: red"><b>Warning: If you use a background video, the Haloween event will NOT show it's background, meaning this video will over-ride the events background.</b></div><?php } else { ?>Transparent Image<br/>Your image must be at least <b>1920x1080</b> for it to fit within the overlay.<br/><div align="left" style="color: red"><b>Warning: If you use a background image, the Haloween event will NOT show it's background, meaning this image will over-ride the events background.</b></div><?php } ?></span>
</p>
</center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" onClick="preview()" class="btn btn-primary" data-dismiss="modal">Apply</button>
</div>
</div>
</div>
</div>
<div class="modal" id="Authentication" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="AuthCancel()"><span aria-hidden="true"><i class="zmdi zmdi-close"></i></span></button>
<h3 class="modal-title" id="myModalLabel">Authentication</h3>
</div>
<div class="modal-body">
<center>
<p>
<?php //<table border="1" id="disclogin" style="display: none;">
//<tbody>
//<tr>
//<td><div align="right">Discord name:</div></td>
//<td><input type="text" name="discordname" required></td>
//<td><input placeholder="#1245" required name="discordhash" required></td>
//</tr>
//<tr>
//<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-success" id="sub1">Save & Get my URL</button></td>
//</tr>
//<tr>
//<td colspan="3"></td>
// </tr>
//</tbody>
//</table> ?>
<div id="discordbegin" style="display: none;">
To begin you must first join our Discord Server!
<table border="0" align="center">
<tbody>
<tr>
<td>Join Discord</td>
</tr>
</tbody>
</table>
<table border="0" align="center">
<tbody>
<tr>
<td>I already Joined!</td>
</tr>
</tbody>
</table>
</div>
<table border="1" id="adddiscord" style="display: none;">
<tbody>
<tr>
<td>
<div align="right">Discord name:</div>
</td>
<td><input type="text" name="discordname" id="discordname" required></td>
<td><input type="text" placeholder="#1245" name="discordhash" id="discordhash" required></td>
</tr>
<tr>
<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-success" id="regthat">Whitelist my Discord name</button></td>
</tr>
</tbody>
</table>
<?php //<form>
//<table border="1" id="newname" style="display: none;">
//<tbody>
//<tr>
//<td><div align="right">Old Discord name:</div></td>
//<td><input type="text" name="olddiscordname" required></td>
//<td><input placeholder="#1245" required name="discordhash" required></td>
//</tr>
//<tr>
//<td><div align="right">New Discord name:</div></td>
//<td><input type="text" name="newdiscordname" required></td>
//<td><input placeholder="#1245" required name="newdiscordhash" required></td>
//</tr>
//<tr>
//<td colspan="3"><button type="submit" style="border: hidden;" class="btn btn-block btn-raised btn-primary" id="updatethat">Save new my Discord name</button></td>
//</tr>
//<tr>
//<td colspan="3"></td>
//</tr>
//</tbody>
//</table></form> ?>
<?php } ?>
</p>
</center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onClick="AuthCancel()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
Please note that this form contains PHP functionality which will be used to get saved data at a later date, once I can get this script working as it should.
For best results you can see a live testing page over here:
Testing page to this script

This resolved my issue:
$(document).ready(function() {
$('#overlaysetupscreen').submit(function(e){
e.preventDefault();
var color1 = $('#color1').val();
var color2 = $('#color2').val();
var color3 = $('#color3').val();
var color4 = $('#color4').val();
var color5 = $('#color5').val();
var bigtext = $('#bigtext').val();
var bgcolor = $('#bgcolor').val();
var lowtextcolor = $('#lowertextcolor').val();
var lowertexttext = $('#lowertextext').val();
var bgimage = $('#bgimage').val();
var bgvideo = $('#bgvideo').val();
var toggle1 = $('#toggle1').val();
var toggle2 = $('#toggle2').val();
var toggle3 = $('#toggle3').val();
var toggle5 = $('#toggle5').val();
var toggle6 = $('#toggle6').val();
var toggle7 = $('#ltoggle7').val();
var discordname = $('#discordname').val();
var discordhash = $('#discordhash').val();
$.ajax({
url: 'actions/save.php',
type: 'POST',
data: {
color1: color1,
color2: color2,
color3: color3,
color4: color4,
color5: color5,
bigtext: bigtext,
bgcolor: bgcolor,
lowtextcolor: lowtextcolor,
lowertexttext: lowertexttext,
bgimage: bgimage,
bgvideo: bgvideo,
toggle1: toggle1,
toggle2: toggle2,
toggle3: toggle3,
toggle5: toggle5,
toggle6: toggle6,
toggle7: toggle7,
discordname: discordname,
discordhash: discordhash
}
})
.done(function(data){
var result = $.trim(data);
alert("Success");
})
.fail(function(){
alert('Failed');
});
});
});
I simply counted each of the opening and closing tags and realized a slight problem with the end tags.
So I added }); }); onto the end, that resolved the issue.