Ok, so I've been scratching my head for the past 3 days. Can't figure out what I am doing wrong.
I have the following html structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form class="form" action="test2.php" method="get" autocomplete="off">
<label class="form__label" for="services">
<span class="form__icon form__icon--service"><img src="./img/service.svg" alt="pencil"></span>
<input class="form__input form__input--service" id="services" name="services" type="text" placeholder="What service do you need?" autocomplete="off">
</label>
<label class="form__label form__label--location" for="location">
<span class="form__icon form--icon--location"><img src="./img/location.svg" alt="location"></span>
<input class="form__input form__input--location" id="location" name="location" type="number" placeholder="Location" pattern="[0-9]*" inputmode="numeric" autocomplete="off">
</label>
<button class="form__btn" type="submit">
Search
</button>
<input id="category" name="category" type="hidden" value="0" autocomplete="off">
<input id="service_type" name="service_type" type="hidden" value="0" autocomplete="off">
</form>
<script src="./js/test.js"></script>
</body>
</html>
and the following test.js function:
//SUBMIT FORM AND BASIC VALIDATION
$(document).ready(function() {
// Form submission handler
$('.form').on('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting normally
// Get form input values
var services = $('#services').val();
var location = $('#location').val();
// basic format validation //
// Validation passed, submit the form
$(this).unbind('submit'); // Unbind the current submission handler
// Construct the action URL with the form values
var actionUrl = $(this).attr('action');
actionUrl += '?services=' + encodeURIComponent(services);
actionUrl += '&service_type=' + encodeURIComponent($('#service_type').val());
actionUrl += '&category=' + encodeURIComponent($('#category').val());
actionUrl += '&location=' + encodeURIComponent(location);
//console.log('actionUrl:', actionUrl);
// Navigate to the constructed URL (not preferred)
//window.location.href = actionUrl;
$(this).attr('action', actionUrl);
$(this).submit();
});
});
What I am trying to do is, block the form from submitting initially, do some stuff and then change the action url for the form with the new parameters.
Everything works great with one exception, that is driving me crazy. When I build the actionUrl, I am trying to get the variables in a specific order:
?services=&service_type=0&category=0&location= (specifically I want location to be last)
If I comment out //$(this).submit(); I can see in the console log that the url is being built exactly as I want it.
However, if I submit the form the end point is: ?services=&location=&category=0&service_type=0
Double-U-Tee-Eff? Losing my mind!!!
Any help to point out what I'm missing is greatly appreciated
Your issue is that
calls the jquery submit handler... which you just removed.
If you want to call/continue to the "real" submit from within a jquery submit handler, change this line to:
so that it calls the brower's
form.submit()instead of jquery's$("form").submit(). They have the same name, but they're not the same function.Note:
unbindwas deprecated a long time ago, consider changing to.on()and.off()