I've got little problem because I don't really know how should I do this.
Let's say I've got this HTML form:
<form action="#" method="post">
<select name="change_reason" required>
<option value="">Please choose</option>
<option value="1">Getting apple</option>
<option value="2">Walking outside</option>
<option value="3">Other</option>
</select>
<input type="submit" value="Submit">
Depending on the selected answer I want to present second (different) form but without reloading the page (AJAX) and which would be submitted to PHP script. So let's say someone chose 'Getting apple', hit Submit so then the form would changed to:
<form action="/my_script.php" method="post">
<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>
<input type="submit" value="Submit">
Let's say someone chose 'Walking outside' so the form would change to:
<form action="/my_script.php" method="post">
<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>
<input type="submit" value="Submit">
Can anyone please tell me how can I get this done?
Just place a switch on your script and load form content from the ajax response.
<form action="#" method="post">
<div class="dynamic-inputs">
<select name="change_reason" required>
<option value="">Please choose</option>
<option value="1">Getting apple</option>
<option value="2">Walking outside</option>
<option value="3">Other</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
<script>
$(document).ready(function(){
$("form").submit(function(){
var myForm = $(this);
var data = $(this).serializeArray();//serialize form inputs and pass them to php
$.post("/myscript.php",data,function(data){
myForm.find(".dynamic-inputs").html(data);
});
return false;
});
});
</script>
While you can place a switch on your PHP script and return a value based on the change_reason input parameter
<?php
$change_reason = isset($_REQUEST["change_reason"]) ? $_REQUEST["change_reason"] : null;
if($change_reason){
switch ($change_reason) {
case 1:
echo '<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>';
break;
case 2:
echo '<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>';
break;
}
}
?>
Steps
1)Add each form into a modal or in lightbox
2)open each modal onchange event of select box
3)Write ajax for each individual form and close modal after submission.
$(":select[name='change_reason']").change(function() {
/*If you are using Bootstrap the create sprate modal for this.
For more details
http://getbootstrap.com/javascript/#modals
Add each form in separate modal and open that on by giving name to each form
*/
$('#' + $('select[name=selector]').val()).modal()
});
/* Write Ajax for sumission of indivusal forms and close that modal after submission of each form
http://api.jquery.com/jquery.ajax/
Take a look at it.
*/
<!-- Add this forms into modal and give it a id -->
<div class="modal fade" id="same-id-as-value-of-select-box">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<form action="/my_script.php" method="post">
<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>
<input type="submit" value="Submit">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Add this forms into modals -->
<form action="/my_script.php" method="post">
<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>
<input type="submit" value="Submit">
Hope this will Help you
If the forms are reasonably small like the ones you presented. I would just load them on the page in separate hidden div's. Then as stated in the comments, use a submit handler to determine which form to show on the page and hide the initial form.
If the forms are "too long" for this concept, I would definitely use jQuery AJAX to submit the form data and load the new form into a destination div on the page. . . maybe even replacing the existing form.
Related
I look for a way to display a progress bar in the following scenario in PHP:
search button is clicked at search.php
display a progress bar (showing percentage) over the page (a small popup window at the centre, for example)
Just before the search results are displayed at result.php, stop and hide the progress bar
Currently, JQuery and Bootstrap are available, but others can be added. I like simplicity. Do you have a good idea? Cheers!
search.php
<form class="form_container validationForm" action="result.php" method="post">
<input type="text" class="form-control validationInput" name="search" placeholder="Type a search keyword"><br>
<button class="btn btn-primary" type="submit" >Search</button>
</form>
result.php
<main>
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="col-sm-12">
// Below is the query function
<?php include('_partials/query_functions.php'); ?>
</div>
</div>
</div>
</div>
</main>
add this in result.php
<div class="spinner-border" id="loader" role="status">
<span class="sr-only">Loading...</span>
</div>
add attribute id your submit button
<button class="btn btn-primary" id="submit" type="submit" >Search</button>
And in your javascipt file
$("#loader").hide();
$("#submit").on('click', function(){
$("#loader").show();
})
I'm using the jSignature plugin to add signature capture to a simple Bootstrap modal window - the signature capture displays correctly and I can draw and save the signature without any issues. Here's a screenshot showing the signature modal window in action:
At present the user must enter their signature then click the Save button below the signature for it to be saved. They then have to click the Submit button to submit the form which updates a database etc.
Here's the html code for the modal window:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Approver Signature</h4>
</div>
<div class="modal-body">
<form id="saveEvent" action="update.php" method="post">
<div class="form-group">
<input type="hidden" name="id" value="123456">
<input type="hidden" id="hiddenSigData" name="hiddenSigData" />
<label for="yourName">Approver Name</label>
<input type="text" class="form-control" id="managerName" name="managerName" placeholder="Manager's Name" value="Peter Rabbit">
<label for="managerNotes">Approver Notes</label>
<input type="text" class="form-control" id="managerNotes" name="managerNotes" placeholder="Manager's Notes" value="">
</div>
<div class="form-group">
<label for="yourSignature">Approver Signature</label>
<div id="signature"></div>
<button type="button" class="btn btn-default" onclick="$('#signature').jSignature('clear')">Clear</button>
<button type="button" class="btn btn-primary" id="btnSave">Save</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
We have found them many users are forgetting to click the Save button to first save the signature and simply clicking the Submit button which submits the form but doesn't include the signature, and by the time we notice it's too late to get the signature again.
Here's the Javascript that runs when the signature Save button is clicked:
$(document).ready(function() {
$('#btnSave').click(function() {
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
})
We're looking for a way, when the Submit button is pressed, to automatically save the signature first and then submit the form. Not sure if this is possible or how to achieve this?
You can use an event handler.
$("#saveEvent").submit(function(){
var sigData = $('#signature').jSignature('getData', 'default');
$('#hiddenSigData').val(sigData);
console.log('jSignature saving signature');
});
You're done!
Need to create food ordering system.
I'm quite stuck, where I would like to summarized the user's choice in modal form before storing in my database. It is said that modal is recommended inorder not to restart all over again using other page.
Its in wizard template where clicking NEXT $('.buttonNext').addClass('btn btn-success');, it works fine and the choices doesn't reset if I go back to the first step:
Here's what I've got so far.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
<div id="step-11"><fieldset>
<input type="radio" id="food1" name="burger" value="bigburger"/> BB
<input type="radio" id="food2" name="burger" value="reg_burger"/> RB </fieldset> </div>
<div id="step-22"> <fieldset>
<input type="radio" id="drink1" name="drink" value="coca-cola"/> CC
<input type="radio" id="drink2" name="drink" value="juice"/> J </fieldset> </div>
<div id="step-33"><input type="text" id="other_food" name="other"/> </div>
</form>
<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />
<!-- pop out modal -->
<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Confirm Order</div>
<div class="modal-body">
<p> Your Burger: <span id="burger_type"></span> </p>
<p> Your Drinks: <span id="drink_type"></span> </p>
<p> Others: <span id="otherfood"> </span></p></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> Submit </div>
</div>
</div>
</div>
this is my JS, which in same file HTML:
<script type="text/javascript">
$('#review').click(function () {
$('#burger_type').html($('#burger').val());
$('#drink_type').html($('#drink').val());
$('#otherfood').html($('#other_food').val());
}); </script>
So only my "other_food" does displays what text you've input, others won't. I don't know how to check in radio mode.
Thank you in advance, I'm no expert in JS or javascript.
try $('#burger_type').html($('input[name="burger"]:checked').val());
basicly javascript doesn't read the value of radio buttons in a simple way.
what we're doing is getting all the inputs named burger and filtering (: pseudo class) only the one who is checked - i.e the selected option.
I have an area made up in a navigation by bar some PHP code that either shows a inline login form or the users username. The login form is submit using jQuery so no page load is required to set the users session variables etc. but how can I get around not having to refresh the page so that the correct text is shown (i.e. the users username rather than the inline form)?
At the moment the login works seamlessly without having to refresh the page but I need to somehow update that area also.
<div id="divLogin">
<?php if (!logged_in()) { ?>
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" id="user">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control" id="pass">
</div>
<button type="button" class="btn btn-success" id="login">Sign in</button>
<button type="button" class="btn btn-primary" id="register">Register</button>
<?php } else { ?>
<div class="form-group">
<p>You are logged in as <strong><?php echo $_SESSION['user']; ?></strong></p>
</div>
<?php } ?>
</div>
You can do that using load() function or by using AJAX.
$('.your_button').on('click', function(){
$('#divLogin').load('your_page_url_here');
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Issue:
I have a modal window with input fields that trigger a disabled save button once filled in. I now want to integrate a select box into this modal instead of the normal text inputs and can't figure out how to get the script to recognize them seeing as it's not a true text input, it's a select. I have an example here of the working code prior to addition of the select box: DEMO
Question:
What do I need to place in my script to be able to use the select fields instead of input fields? I think it may have something to do with telling it to look for a variable coming from a text input rather than an option coming from a select. This is an example of what I want to work: DEMO
Thanks!
You cannot listen to the keyup event as <select></select> elements do not use this in the same way as <input></input> elements. In order to listen for a change in the selected option you need to use the .change() event.
You cannot use the placeholder="" attribute on a <select></select> as the element will select by default the first <option></option> child. Change this to having the first option as <option val="">Please Select</option> or similar.
You have to check the selected option of a <select></select> in order to see if the value is blank. To do this you have to use $('#select').find('option:selected').val() == "").
Full Code:
HTML:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="projectName" value="Johnny Appleseed" style="display: inline; width: 325px;">
</div>
<div class="cloudcontainer">
<!-- NEW FIELD ADDED HERE -->
</div>
Add New Field
</form>
</div>
</div>
</div>
<!-- MODAL -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">New Field</h3>
</div>
<div class="modal-body">
<form role="form">
<div class="field">
<label>State:</label>
<select id="fieldtitle">
<option value="">Enter State</option>
<option value="AL">Alabama</option>
<option value="AL">Alaska</option>
<option value="AL">Arkansas</option>
</select>
<br>
<br>
<label>City:</label>
<select id="fieldtitle">
<option value="">Enter City</option>
<option value="BR">Burmingham</option>
<option value="JN">Juneau</option>
<option value="LR">Little Rock</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="clickme" disabled="disabled" data-dismiss="modal">Save changes</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(".field select").change(function(){
var empty = false;
$(".field select").each(function(){
if ($(this).find('option:selected').val() == "") {
empty = true;
}
});
if(empty) {
$("#clickme").attr('disabled', 'disabled');
} else {
$("#clickme").attr('disabled', false);
}
});
});
Link to bootply: http://www.bootply.com/1cpZMLBuwv
Instead of listening to the keyup event you need to use the change event to know when the value of the select fields has change.
$(".field select").change(function(){ ...