Melis Dekker Melis Dekker - 2 months ago 8
HTML Question

Jquery script not working on page where form is send to

I have a php file with a form. The form action is to another php file.
When I submit the form, the Jquery on the next page (the form action page) is not working. But when i open that page by myself (not by the form action) the Jquery is working perfect.

Code on first page:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="login.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header" id="status">
<h1>Snacks Bestellen</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="evaluatelogin.php">
<label for="company">Bedrijfsnummer:</label>
<input type="text" name="company" id="company">
<fieldset class="ui-field-contain" id="fieldset_user">
<label for="user">Gebruiker:</label>
<select name="user" id="user">
</select>
</fieldset>
<input type="submit" value="Volgende" data-icon="user" data-iconpos="right" data-inline="true">
</form>
</div>
</div>

</body>
</html>


Code on the evaluatelogin.php page:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="getsnacks.js"></script>
</head>
<body>

<div data-role="page">
<div data-role="header" id="status">
<h1>Snacks Bestellen</h1>
</div>
<div data-role="main" class="ui-content">

<fieldset class="ui-field-contain" id="snack1">
<span id="snack1optie1">
<select name="optie1" id="optie1" class="optie1">
</select>
</span>
<span id="snack1optie2">
<select name="optie2" id="optie2" class="optie2">
</select>
</span>
<span id="snack1optie3">
<select name="optie3" id="optie3" class="optie3">
</select>
</span>
</fieldset>
</div>
</div>

</body>
</html>


Jquery on the page (just a test):

$(document).ready(function() {
$('#snack1optie2').hide();
$('#snack1optie3').hide();
$('#snack1optie1').click(function(){
$('#snack1optie2').show();
});
$('#snack1optie2').click(function(){
$('#snack1optie3').show();
});
$('#snack1optie3').click(function(){
$('#snack1optie3').hide();
});
});


Thanks in advance,

Answer

The form submit is performed with AJAX.

On submit, jQuery Mobile will make sure that the Url specified is able to be retrieved via Ajax, and handle it appropriately.

Disabled it with data-ajax="false" form attribute and it will work fine.

<form method="post" action="evaluatelogin.php" data-ajax="false">

jQuery mobile docs

Comments