I'm trying to send ajax post data from a webpage where the data is grabbed from a form consisting of a table, a date selection box and a comment text box. This particular part of the website however isn't static and therefore this webpage is built in a php file on a GET request and returned in base64 to be decoded and added to the site.
The ajax on the 'main' page is:
$.ajax({
type: "GET",
url: 'backend/ajax/webpage.php',
dataType: 'text',
data: {
message: 'UPDATE_WEBPAGE'
},
success: function(result) {
$('#main-content').html(window.atob(result));
},
error: function(error) {}
});
This will return with a lengthy table although i have minimized it below.
<div class="section__content section__content--p30">
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">Rosters</h2>
</div>
</br>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card" style="border-radius: 10px;">
<div class="card-header">
<strong class="card-title">Roster for week starting:<span class="input-group date" style="width: 20%;" id="date" data-target-input="nearest">
<input id="date-input" type="text" placeholder="Week starting" class="form-control datetimepicker-input" data-target="#date"/>
<span class="input-group-append" data-target="#date" data-toggle="datetimepicker">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</span>
</span>
</strong>
<script>
$(function() {
$("#date").datetimepicker({
format: 'D/M/YYYY',
daysOfWeekDisabled: [0, 6]
});
});
</script>
</div>
<div class="card-body">
<form id="roster-form" action="">
<div class="form-group table-responsive table--no-card m-b-30">
<table id="roster" for="roster-form" class="table table-borderless table-earning" align="left">
<thead align="left">
<tr>
<th>Name</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody align="left">
<th id="$days[$day]" name="$days[$day]">
<div class="rs-select2--trans rs-select2--md" style="background-color: transparent;">
<select value="$name" name="$namestart" class="js-select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" style="background-color: transparent;max-width:5%;">
<option selected="selected" value="$pstime">$pstime</option>
";
<option value="05:00 am">05:00 am</option>
<option value="05:30 am">05:30 am</option>
<option value="05:45 am">05:45 am</option>
<option value="06:00 am">06:00 am</option>
<option value="06:15 am">06:15 am</option>
<option value="06:30 am">06:30 am</option>
<option value="06:45 am">06:45 am</option>
<option value="07:00 am">07:00 am</option>
<option value="07:15 am">07:15 am</option>
<option value="07:30 am">07:30 am</option>
<option value="07:45 am">07:45 am</option>
<option value="08:00 am">08:00 am</option>
<option value="08:15 am">08:15 am</option>
<option value="08:30 am">08:30 am</option>
<option value="08:45 am">08:45 am</option>
<option value="09:00 am">09:00 am</option>
<option value="09:15 am">09:15 am</option>
<option value="09:30 am">09:30 am</option>
<option value="09:45 am">09:45 am</option>
<option value="10:00 am">10:00 am</option>
<option value="10:15 am">10:15 am</option>
<option value="10:30 am">10:30 am</option>
<option value="10:45 am">10:45 am</option>
<option value="11:00 am">11:00 am</option>
<option value="11:15 am">11:15 am</option>
<option value="11:30 am">11:30 am</option>
<option value="11:45 am">11:45 am</option>
<option value="12:00 pm">12:00 pm</option>
<option value="12:15 pm">12:15 pm</option>
<option value="12:30 pm">12:30 pm</option>
<option value="12:45 pm">12:45 pm</option>
<option value="1:00 pm">1:00 pm</option>
<option value="1:15 pm">1:15 pm</option>
<option value="1:30 pm">1:30 pm</option>
<option value="1:45 pm">1:45 pm</option>
<option value="2:00 pm">2:00 pm</option>
<option value="2:15 pm">2:15 pm</option>
<option value="2:30 pm">2:30 pm</option>
<option value="2:45 pm">2:45 pm</option>
<option value="3:00 pm">3:00 pm</option>
<option value="3:15 pm">3:15 pm</option>
<option value="3:30 pm">3:30 pm</option>
<option value="3:45 pm">3:45 pm</option>
<option value="4:00 pm">4:00 pm</option>
<option value="Close">Close</option>
</select>
</div>
<div class="rs-select2--trans rs-select2--md" style="background-color: transparent;>
<select value=" $name " name="$namefinish " class="js-select2 select2-hidden-accessible " style="background-color: transparent;max-width:5%; ">
<option value="$pftime ">$pftime</option>
"; <option value="05:00 am">05:00 am</option>
<option value="05:30 am">05:30 am</option>
<option value="05:45 am">05:45 am</option>
<option value="06:00 am">06:00 am</option>
<option value="06:15 am">06:15 am</option>
<option value="06:30 am">06:30 am</option>
<option value="06:45 am">06:45 am</option>
<option value="07:00 am">07:00 am</option>
<option value="07:15 am">07:15 am</option>
<option value="07:30 am">07:30 am</option>
<option value="07:45 am">07:45 am</option>
<option value="08:00 am">08:00 am</option>
<option value="08:15 am">08:15 am</option>
<option value="08:30 am">08:30 am</option>
<option value="08:45 am">08:45 am</option>
<option value="09:00 am">09:00 am</option>
<option value="09:15 am">09:15 am</option>
<option value="09:30 am">09:30 am</option>
<option value="09:45 am">09:45 am</option>
<option value="10:00 am">10:00 am</option>
<option value="10:15 am">10:15 am</option>
<option value="10:30 am">10:30 am</option>
<option value="10:45 am">10:45 am</option>
<option value="11:00 am">11:00 am</option>
<option value="11:15 am">11:15 am</option>
<option value="11:30 am">11:30 am</option>
<option value="11:45 am">11:45 am</option>
<option value="12:00 pm">12:00 pm</option>
<option value="12:15 pm">12:15 pm</option>
<option value="12:30 pm">12:30 pm</option>
<option value="12:45 pm">12:45 pm</option>
<option value="1:00 pm">1:00 pm</option>
<option value="1:15 pm">1:15 pm</option>
<option value="1:30 pm">1:30 pm</option>
<option value="1:45 pm">1:45 pm</option>
<option value="2:00 pm">2:00 pm</option>
<option value="2:15 pm">2:15 pm</option>
<option value="2:30 pm">2:30 pm</option>
<option value="2:45 pm">2:45 pm</option>
<option value="3:00 pm">3:00 pm</option>
<option value="3:15 pm">3:15 pm</option>
<option value="3:30 pm">3:30 pm</option>
<option value="3:45 pm">3:45 pm</option>
<option value="4:00 pm">4:00 pm</option>
<option value="Close">Close</option>
</select>
<span class="dropdown-wrapper" style="background-color: transparent;" aria-hidden="true"></span>
</div>
</th>
</tbody>
</table>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card" style="border-radius: 10px;">
<div class="card-header">
<strong class="card-title">
Comments
</strong>
</div>
<div class="card-body">
<div class="form-group">
<textarea class="form-control" id="roster-comments" rows="4"></textarea>
</div>
</div>
</div>
<button type="submit" form="roster-form" class="btn btn-primary btn-lg btn-block">Submit Roster</button>
<a href="#" id="download">Download Roster</a></br>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#roster-form").submit(function(e) {
e.preventDefault();
var roster = {};
var data = JSON.stringify($("#roster-form").serializeArray());
//I understand this is where i need to loop through the data and create the json object to send to rostersfunc.php although I'm lost.
$.ajax({
type: 'POST',
url: 'backend/ajax/rostersfunc.php',
dataType: 'json',
data: {
message: "UPDATE_ROSTER",
data: data
},
success: function(result) {},
error: function() {}
});
});
$(document).ready(function() {
$('.js-select2').select2({
minimumResultsForSearch: -1
});
});
});
</script>I believe i need to loop through either a serializeArray output of the form data or through a serialize output of the data and snip the day_name_start/finish into the 4 sections, day, name, start/finish & value although I'm failing to do so.
The current output goes like:
post data = [{
"name": "monday_bob_start",
"value": "x am/pm"
}, {
"name": "monday_bob_finish",
"value": "y am/pm"
}, {
"name": "tuesday_bob_start",
"value": "x am/pm"
}, {
"name": "tuesday_bob_finish",
"value": "y am/pm"
}, {
"name": "wednesday_bob_start",
"value": "x am/pm"
}, {
"name": "wednesday_bob_finish",
"value": "y am/pm"
}, {
"name": "thursday_bob_start",
"value": "x am/pm"
}, {
"name": "thursday_bob_finish",
"value": "y am/pm"
}, {
"name": "friday_bob_start",
"value": "x am/pm"
}, {
"name": "friday_bob_finish",
"value": "y am/pm"
}, {
"name": "saturday_bob_start",
"value": "x am/pm"
}, {
"name": "saturday_bob_finish",
"value": "y am/pm"
}, {
"name": "sunday_bob_start",
"value": "x am/pm"
}, {
"name": "sunday_bob_finish",
"value": "y am/pm"
}]and i'm trying to achieve this:
roster = {
"monday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"tuesday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"wednesday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"thursday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"friday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"saturday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"sunday": {
"bob": {
"startTime": x,
"finishTime": y
}
}
}</div>
