I have a HTML Form set up like this:
<form class="modal-content start-planning " id="ProfileStep2" name="ProfileStep2" method="POST">
<div class="planroll-nav">
<a href="#" class="prev" onclick="GoToStep('ProfileStep1')">Back</a>
<span>2 / 8</span>
<a href="#" class="next" onclick="GoToStep('ProfileStep3')">Skip</a>
</div>
<div class="planroll-imgbx" style="background-image:url(images/icon/pic2.png)"></div>
<div class="start-here-bx">
<div class="">
<div class="planroll-title">
<h3>Select up to 5 ideal Wedding Styles...</h3>
</div>
<input type="hidden" id="userid" name="userid" value="<? echo $user_id; ?>">
<ul class="select-list clearfix list-inline list-2">
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style1" name="style1" value="Traditional">
<label class="custom-control-label" for="style1">Traditional</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style2" name="style2" value="Alternative">
<label class="custom-control-label" for="style2">Alternative</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style3" name="style3" value="Festival">
<label class="custom-control-label" for="style3">Festival</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style4" name="style4" value="Goth">
<label class="custom-control-label" for="style4">Goth</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style5" name="style5" value="Urban">
<label class="custom-control-label" for="style5">Urban</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style6" name="style6" value="DIY">
<label class="custom-control-label" for="style6">DIY</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style7" name="style7" value="Rustic">
<label class="custom-control-label" for="style7">Rustic</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style8" name="style8" value="Historical">
<label class="custom-control-label" for="style8">Historical</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style9" name="style9" value="Religious">
<label class="custom-control-label" for="style9">Religious</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style10" name="style10" value="Vintage">
<label class="custom-control-label" for="style10">Vintage</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style11" name="style11" value="Elegant">
<label class="custom-control-label" for="style11">Elegant</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style12" name="style12" value="Themed">
<label class="custom-control-label" for="style12">Themed</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style13" name="style13" value="Vegan">
<label class="custom-control-label" for="style13">Vegan</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style14" name="style14" value="Eco-Friendly">
<label class="custom-control-label" for="style14">Eco-Friendly</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style15" name="style15" value="Musical">
<label class="custom-control-label" for="style15">Musical</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style16" name="style16" value="Boho">
<label class="custom-control-label" for="style16">Boho</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox checkbox-lg">
<input type="checkbox" class="custom-control-input" id="style17" name="style17" value="Country">
<label class="custom-control-label" for="style17">Country</label>
</div>
</li>
</ul>
</div>
</div>
<div class="modal-footer text-center">
<button type="submit" id="ProfileStep2" name="ProfileStep2" class="btn gradient" data-toggle="tooltip" data-placement="top" onclick="GoToStep('ProfileStep3')" title="Congrats! Even your names look great together.">Next Step</button>
</div>
</form>
I am trying to pass the data through an AJAX script on Form Submit using the following script
$(document).ready(function(){
$('#ProfileStep2').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
var userid2 = $('#userid').val();
var style1 = $('#style1').val();
var style2 = $('#style2').val();
var style3 = $('#style3').val();
var style4 = $('#style4').val();
var style5 = $('#style5').val();
var style6 = $('#style6').val();
var style7 = $('#style7').val();
var style8 = $('#style8').val();
var style9 = $('#style9').val();
var style10 = $('#style10').val();
var style11 = $('#style11').val();
var style12 = $('#style12').val();
var style13 = $('#style13').val();
var style14 = $('#style14').val();
$.ajax({
type: "POST",
url: 'system/wedmanagerdata.php',
data: {userid2: userid2, style1: style1, style2: style2, style3: style3, style4: style4, style5: style5, style6: style6, style7: style7, style8: style8, style9: style9, style10: style10, style11: style11, style12: style12, style13: style13, style14: style14},
success: function(data){
alert(data);
}
});
});
});
And then on the PHP side, I am processing the data with a simple PHP script
$userid2 = false;
if(isset($_POST['userid2'])){
$userid2 = $conn->real_escape_string($_POST['userid2']);
$style1 = $conn->real_escape_string($_POST['style1']);
$style2 = $conn->real_escape_string($_POST['style2']);
}
I had to try this way as I couldn't get the script working with the input as id="style[]" without the page refreshing or breaking the AJAX script. The issue is, the AJAX is sending constant on positions for the checkboxes, which means all variables are showing and not just the ones selected? If anybody has a better functional method which they can help me with that would be great?
Aucun commentaire:
Enregistrer un commentaire