I have a php form with several checkboxes and radio buttons using jqueryMobile. When the user submits the form a javascript function is executed. This function basically checks wether any radio button has been pressed or not and warns the user that he/she has to check a minimum of one radio button. I tried a lot of things to show a simple alert dialog box but cannot seem to make it work in mobile devices. My android form basically shows nothing. Any ideas will be highly appreciated. Thanks.
Here is the form:
<form id="EnviarEnquesta">
<input type="submit" id="submitButton" value="<?php echo(_('SendSurvey')); ?>" onClick="doSomeChecks();" />
</form>
Here is the javascript function
function doSomeChecks(){
var formObj = document.getElementById("enviarEnquesta");
(...)
if(counter == 0){
/*display a jquery mobile alert type*/
}else{
/*just submit the form*/
document.getElementById("enviarEnquesta").submit();
}
}
Basic popup usage:using the open() method:
<div data-role="page" id="page">
<div data-role="header">
<h1>Example Page</h1>
</div>
<div role="main" class="ui-content">
<button id="openpopup">Open popup</button>
</div>
<div data-role="popup" id="popupBasic"> <p>This is a completely basic popup, no options set.</p> </div>
</div>
<script>
$(document).on("pagecreate","#page", function(){
$("#openpopup").click(function(){
var contador=0;
if(contador == 0)
$( "#popupBasic" ).popup( "open");
else alert("contador is not zero!");
})
});
</script>
Related
When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?
You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.
I tried to add the next button on the popup box. Now it is run popups in a specific order. Also, when the final popup open, the button disable automatically. but there is an issue. when I delete some modal, the code is not working. I want to run popups in that order and when I delete some popup, the popups want to run correctly. Also, I want to create the previous button. how can I do it? please help me to fix the issue.
Here is the code I used.
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal++)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
<input class="getAssignment" type="button" value="Open Modal">
<div id="openModal" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
https://jsfiddle.net/Sanjeewani/q1tm8ck2/10/
The condition which you are using in js returns always true and length of the array is not boolean so you do require it to compare it with an integer. Sample below:
$("*[data-modalorder="+currentmodal+"]").length==0
$(document).ready(function() {
$(".getAssignment2").click(function() {
var pNode = $(this).closest(".modalDialog");
if(pNode.prev(".modalDialog")){
var id = pNode.prev(".modalDialog").attr("id");
window.location.href = "#" + id;
}
});
$(".getAssignment").click(function() {
var pNode = $(this).closest(".modalDialog");
if(pNode.next(".modalDialog")){
var id = pNode.next(".modalDialog").attr("id");
window.location.href = "#" + id;
}
});
});
I have an issue with js code. I'm trying to call a Pop-Up Box on click of the certain button and it's not working.
My aim is to assign an action to a certain button to open the pop-up when customer clicks on certain button. But the problem is that Klaviyo Pop-Up Box is set to open on page load by default settings are set in JS File that is located on Klaviyo side and i'm not able to change them directly.
Here is a problem similar to my, but not exactly what i was looking for.
Another option i was thinking about is to break the function that opens a pop-up onPageLoad and then to add this function to assign open action to a button.
This is how i thought i could call the pop-up onButtonClick.
My JS code
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$('.button').on('click',function(){
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
});
</script>
or
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$(':button').click(function() {
if (this.id == 'button') {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
$('.button').popup('open');
}
</script>
Button Html Code
<input type="button" class="button" value="Input Button" />
My Pop-Up HTML Code
<div class="klaviyo_modal" id="MainPage_PP" style="display:none;">
<div class="klaviyo_inner">
×
<form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
<input type="hidden" name="g" value="LIST_ID">
<div class="klaviyo_fieldset">
<p class="klaviyo_header">Interested in our Newsletter?</p>
<p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
</div>
<div class="klaviyo_fieldset">
<div class="klaviyo_field_group">
<label for="MainPage_PP_$email">Email Address</label>
<input type="email" id="MainPage_PP_$email" name="email"></div>
</div><div class="klaviyo_fine_print"></div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">
<span>Subscribe</span>
</button>
</div>
<div class="klaviyo_below_submit" ></div>
</form>
<div class="error_message" ></div>
<div class="success_message" ></div>
</div>
</div>
I assigned id="target" to the button to let the JS to make manipulations with it.
The important thing is that the Klaviyo JS file should be load after all actions to let the embedded button work properly.
HTML Code. Button
<input type="button" class="button" id="target" value="Input Button" />
JS Code
<script>
$( "#target" ).click(function() {
KlaviyoSubscribe.attachToModalForm('#MainPage_PP', {
//some var for Klaviyo
...
});
// It is essentially important to load the Klaviyo JS file after all actions
$.getScript("//www.klaviyo.com/media/js/public/klaviyo_subscribe.js")
});
</script>
I'm using Twitter's Bootstrap modal functionality. When someone clicks submit on my form, I'm testing to see if they have checked any of the available options:
$('form').submit(function(event) {
var $target = $('.column').find(':checkbox');
if( !$target.is(':checked') ){ // if none of the sub-options are checked
event.preventDefault();
$('#my-modal').modal({
show: 'true',
backdrop: 'true',
keyboard: 'true'
});
}
});
... and showing the modal window if they haven't. I'd then like the 'primary' button on the modal to continue with the form submit, and the secondary button to simply close the modal window.
I'm sure this should be fairly trivial to accomplish, but my current knowledge of jQuery is only at the copy/paste level, and the documentation doesn't give an example of how to do this.
I've set up a jsFiddle of what I have here - thanks.
EDIT - I've added below some code (it feels a bit hacky) that will close the modal window when the secondary button is clicked. Still not sure how to give the form the go ahead when the primary button is clicked:
$('#my-modal .secondary').click(function() {
$('#my-modal').modal({
show: 'false'
});
});
The question now comes down to: 'is there a simple way to tell the form "okay, carry on" once the primary button is clicked?'
Well, the problem is that right now Bootstrap does not have any proper callbacks for their action buttons. Therefore, you have to do this in a roundabout way and create your own. Hope this helps!
Here's a JS fiddle showing it work: http://jsfiddle.net/iwasrobbed/rYLWz/3/
And here is the code:
HTML File
<form>
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option1" />
<span>Option 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option2" />
<span>Option 2</span>
</label>
</li>
</ul>
<div class="actions">
Save changes »
<!-- Hide the real submit button /-->
<input type="submit" class="hidden">
</div>
</form>
<div id="my-modal" class="modal hide fade">
<div class="modal-header">
×
<h3>Are you sure?</h3>
</div>
<div class="modal-body">
<p>You haven’t selected any options.</p>
</div>
<div class="modal-footer">
Okay »
Go back
</div>
</div> <!-- /modal -->
JS File
$(document).ready(function() {
// Verify if checkboxes were checked.
// If they weren't, show a modal
$('a.save-button').click(function() {
if ($("input:checked").length === 0) {
$('#my-modal').modal({
show: 'true',
backdrop: 'true',
keyboard: 'true'
});
} else {
$('form').submit();
}
// prevent click jump
return false;
});
// Let's attach a listener on form submission
$('form').submit(function() {
alert('We submitted the form!');
});
// Hide modal if "Go back" is pressed
$('#my-modal .go-back-button').click(function() {
$('#my-modal').modal('hide');
alert('We went back to the form');
});
// Hide modal if "Okay" is pressed
$('#my-modal .okay-button').click(function() {
$('#my-modal').modal('hide');
$('form').submit();
});
});
I added a little CSS as well:
ul.inputs-list li {
margin-left: 10px;
}
.hidden {
display: none
}
I'm working on 'add a link' functionality. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill 3 fields: link, title, tags. However, I want 1) the link field to be pre-filled with the value from the previous step AND 2) the title field is pre-filled with the title of the url.
I can do each of these separately, but I can't do both. In fact, the code below pre-fills the link field leaving title field empty. If I uncomment the AJAX part and add 'onClick="sendRequest()', then the code prefills the title field by executing the php script 'savePostAjax.php' which given the url echoes the title. However, in that case the link field is not filled. I guess, Bootstrap events somehow interfere with AJAX I wrote. One approach I tried is to get the url title in JavaScript, didn't work. How would you go about solving this problem of pre-filling BOTH link and title of the form in the modal dialog? Thanks!
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
<!-- AJAX
<script type="text/javascript" src="ajaxwebform/prototype.js"></script>
<script type="text/javascript">
function sendRequest() {
new Ajax.Request("savePostAjax.php",
{
method: 'post',
parameters: 'linkURL='+$F('linkURL'),
onComplete: showResponse
});
}
function showResponse(req){
$('show-title').value= req.responseText;
}
</script>
AJAX ENDS -->
<script type="text/javascript">
$(document).ready(function()
{
$('#modal-from-dom').bind('show',function()
{
$(".modal-body #wall-post").val($("#linkURL").val());
});
});
</script>
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Add Link</h3>
</div>
<div class="modal-body">
<!-- onsubmit='return false;' -->
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data' >
<div>
<input id='show-title' class='label-inline' name='title' type='text' size='100'>
</div>
<div>
<input id='wall-post' class='label-inline' name='linkURL' type='text' size='100'>
</div>
<div>
<input id='link-field' class='label-inline' name='topics' type='text' size='100' placeholder='topics'>
</div>
</form>
</div>
<div class="modal-footer">
Add Link
</div>
</div>
<!-- Enf of The Modal Dialog -->
<div class="container">
<div class="wall-post">
<input id='linkURL' class='label-inline' name='linkURL' type='text' size='100' autocomplete='off'>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn">Add Link</button>
<!-- onClick="sendRequest()" -->
</div>
</div>
</body>
The reason it doesn't work is because you've included prototype and jquery, both of which try to occupy $. You can easily get around this by using jQuery in noConflict mode but I'd recommend ditching prototype completely as it doesn't make sense to use two libraries in that situation.
I haven't actually run this, but it should be what you need. Of course before actually using it you'll want to add a little spinner indicating that the ajax request is being made etc.
jQuery(document).ready(function($) {
function setTitle(url) {
$.post("savePostAjax.php", { linkURL: $('#linkURL').val() },
function(resp) {
$('show-title').val= resp;
});
};
$('#modal-from-dom').bind('show',function() {
var linkURL = $('#linkURL').val();
$('.modal-body #wall-post').val(linkURL);
setTitle(linkURL);
});
});