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.
Related
I have an html form which gets submitted via a bootstrap modal which pops up when i click the submit button in the form itself . The submit buttons opens the bootstrap modal that throws a notification. In that modal I have a "Continue" button which submits the form but the required attribute on the form fields does not work if I submit it using the submit on modal.
here's my modal n form:
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body"> <p style="font-weight:600">We'll take you through a few simple questions to help you hire the best professionals.</p>
</div>
<div class="modal-footer">
<button id="finalsubmit" class="btn btn-success" >Continue</button>
</div>
</div>
<form class="searchform" name="search" role="search" method="POST" id="searchform" action="/search"><input class="abc" required type="text" id="keyword" value="" name="keyword"/><input class="xyz" required type="text" id="word" value="" name="location"/><input class="qwer" type="button" id="searchsubmit" data-toggle="modal" data-target="#confirm-submit" value="Submit" /></form>
And the Javascript code:
/* when the submit button in the modal is clicked, submit the form */
$('#finalsubmit').click(function(){
$('#searchform').submit();
});
Put The modal Inside The form
<form class="searchform" name="search" role="search" method="POST" id="searchform" action="/search">
<input class="abc" required type="text" id="keyword" value="" name="keyword"/>
<input class="xyz" required type="text" id="word" value="" name="location"/>
<input class="qwer" type="button" id="searchsubmit" data-toggle="modal" data-target="#confirm-submit" value="Submit" />
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<p style="font-weight:600">We'll take you through a few simple questions to help you hire the best professionals.</p>
</div>
<div class="modal-footer">
<button id="finalsubmit" class="btn btn-success" >Continue</button>
</div>
</div>
</div>
</div>
</form>
change your searchsubmit input type"button" to type"submit" and trigger this button on finalsubmit button click event
$('#finalsubmit').click(function(){
$('#searchsubmit').trigger("click");
});
I tried this one and its working for me.
I have a code in java script for disabling a button until the checkbox is checked. It doesn't grey this out in bootstrap. It just shows the button.
https://jsfiddle.net/soljohnston777/wg00ymg8/
Bootstrap attempt to make this work:
Modal / Html:
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Terms and Conditions</h3>
</div>
<div class="modal-body">
<h4>Text in a modal <input type="checkbox" required="required" id="myCheck"></h4>
<p>You can add some text here.</p>
<div class="checkbox">
<input id="check" name="checkbox" type="checkbox">
<label for="check">Some Text Here</label>
</div>
</div>
<div class="modal-footer">
<input type="submit" name="" class="btn" id="btncheck" value="I Agree" />
Close
</div>
</div>
Without the Modal classes:
http://www.bootply.com/nV8ShsZUH5
What am I doing wrong?
You want to use attributes instead of properties.
http://api.jquery.com/prop/
Instead of:
btn.prop("disabled", !this.checked);
You can directly access the disabled attribute from the checkbox object and modify it.
this.disabled = !this.checked;
In case anyone else has this issue, I had to upgrade to bootstrap 3, then this code worked great
http://www.bootply.com/AlUZOz0zXB
I wrote a code for pop up form for submitting data when clicked on Edit link in a bootstrap website:
Code is:
<script type="text/javascript">
$(document).ready(function(){
$("#modal-body").modal('show');
});
</script>
<div id="form-content" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send me a message</h3>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<label class="label" for="name">Your Name</label><br>
<input type="text" name="name" class="input-xlarge"><br>
<label class="label" for="email">Your E-mail</label><br>
<input type="email" name="email" class="input-xlarge"><br>
<label class="label" for="message">Enter a Message</label><br>
<textarea name="message" class="input-xlarge"></textarea>
</form>
</div>
<div class="modal-footer">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
Nah.
</div>
</div>
<div id="thanks"><p><a data-toggle="modal" href="#form-content">Edit!</a></p></div>
But pop up form isn't appearing. Where is the mistake?
Two things:
1) Remove the "hide" class from your modal html:
<div id="form-content" class="modal fade in" style="display: none;">
2) Target the actual modal with your jQuery instead of the modal-body:
$(document).ready(function () {
$("#form-content").modal('show');
});
This seems to work for me, as shown here. Let me know if this is not the effect you are looking for. Good luck!
modal-body is a class, but you're treating it like an id in the script.
You should change the class to an id, or amend the script.
Change this $("#modal-body").modal('show'); to $(".modal-body").modal('show');
Have problem with passing value to modal pop up.
This is link to modal edit.
<a href=\"#edit\" data-toggle=\"modal\">
<button class=\"btn btn-primary image-id-btn\" data-image=$id>edit</button></a>
here is code for modal pop up it works fine
<!-- MODAL START -->
<div id="edit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">edit content</h4>
</div>
<div class="modal-body">
<<form id="modal-form" accept-charset="UTF-8" method="POST" action="edited.php" data-remote="true" >
<fieldset>
<div class="image-id-holder">
<input type="text" value=imageID />
</div>
</fieldset>
</div>
<div class="modal-footer">
<input id="modal-form-submit" type="submit" name="submit" class="btn btn-primary" href"#" value="edit"/>
<button class="btn btn-danger" data-dismiss="modal">close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- MODAL END -->
My javascript code :
<script>
$(".image-id-btn").on("click", function(){
var imageId = $(this).attr("data-image");
$(".image-id-holder").children("input").val(imageId);
});
</script>
The problem is, i can not pass the $id to pop up window, to edit content i am trying to.
thanks for help in advance
theextra < change from
<<form id="modal-form" accept-charset="UTF-8" method="POST" action="edited.php" data-remote="true" >
<fieldset>
to
<form id="modal-form" accept-charset="UTF-8" method="POST" action="edited.php" data-remote="true" >
<fieldset>
for these code is belongs to jquery
$(".image-id-btn").on("click", function(){
var imageId = $(this).attr("data-image");
$(".image-id-holder").children("input").val(imageId);
});
if you like to use these code, I would like to include jquery js file and wrop these js code into
$(function(){
});
Your js looks fine to me. If this<input type="text" value=imageID /> is what you have in you code try to changing it to <input type="text" value="" /> that might be causing your problem.
Displaying modal dialog only once, then not displaying again until user has cleared cache or cookies.
I have a modal dialog that I'd like to display when a user visits my website, but only once. If the user closes out of it or uses it, I'd like to not display it again for a very long time.
My jsFiddle is at:
http://jsfiddle.net/B84tq/
My html is:
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 id="myModalLabel">Email Deals</h3>
</div>
<div class="modal-body">
<p>Sign up for email-only specials and news updates. We will not sell or rent your email address.</p>
<p>Sign up now!</p>
<form class="form-horizontal" method="post" action="http://www.gliq.com/cgi-bin/subunsub">
<div class="input-prepend">
<input type="hidden" name="acctname" value="amleo"/>
<input type="hidden" name="action" value="subscribe"/>
<input type="hidden" name="url" value="http://www.amleo.com/subscribe-successful/a/47/"/>
<input type="text" placeholder="Your email address" id="inputIcon" class="input-xlarge" name="email">
<input value="SUBSCRIBE" class="btn btn-orange" type="submit">
</div>
</form>
<p>Privacy Policy.</p>
</div>
</div>
Use cookies.
You can google how to handle cookies in js.
eg. in pseudocode
if (document.cookies['testvalX']!=1)
{
//display modal
document.cookies[] = 'testvalX=1';
}