Jump to content

Search the Community

Showing results for tags 'jquery'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (Dreamweaver, Zend, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Donation Link

Found 93 results

  1. This twitter style button I found. http://jsfiddle.net/jakie8/ZECEN/ I have managed to modify it to my liking. And yes I know the ".live" is depreciated and instead use "on". Anyways, the only thing I noticed is that if I click "Follow" button and it turns green; once I refresh the page, it goes back to default "follow" mode. I was wondering how can I keep it green even if I refresh the page?
  2. I need to figure out how to give this input a name so when i submit it i can get the data from it. <!doctype html> <html> <head> <meta charset="utf-8"> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet"/> <style> input{font-size:1.3em;} #log{position: absolute; top: 10px; right: 10px;} span{color:blue; text-decoration: underline; cursor: pointer;} </style> </head> <body> <div id="inputs"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script> <script src="jquery.googleSuggest.js" type="text/javascript"></script> <script> $.each("web".split(" "), function(i, v){ var div = $("<div>").appendTo("#inputs") , input = $("<input>").appendTo(div) , span = $("<label>").text(v).appendTo(div); input.googleSuggest({ service: v }); }); </script> </body> </html>
  3. Hi, I have server side data that populate a datatable, I stack when trying to pass array data from html page to jquery to fill the detail, as you can see in this fiddle, the detail is hard coded : http://jsfiddle.net/mlotfi/c918of1t/ I am looking for a way to send an array to that format function. Thanks, your help is appreciated.
  4. Hi.. I really need help. I'm completely stuck and waaaay out of my depth here. I don't even know where to begin. I am desperate to learn how to use existing API services - but I find the whole concept completely overwhelming. I can't even get something from a Google search because everything on this subject just goes over my head. I have created an account with tvrage.com and got an API key. With that, I can get a list, in XML, of all the current TV shows in the UK and the US. It starts like this; <currentshows> <country name="US"> <show> <showid>69</showid> <showname>Who Wants to Be a Millionaire (US)</showname> <showlink>http://tvrage.com/Who_Wants_to_Be_a_Millionaire_US</showlink> </show> <show> <showid>237</showid> <showname>Jack Van Impe</showname> <showlink>http://tvrage.com/jack-van-impe</showlink> </show> <show> <showid>286</showid> <showname>Figure It Out</showname> <showlink>http://tvrage.com/figure-it-out</showlink> </show> <show> <showid>548</showid> <showname>TNA Pay-Per-View</showname> <showlink>http://tvrage.com/TNA_Pay-Per-View</showlink> </show> <show> <showid>576</showid> <showname>WWE After Burn</showname> <showlink>http://tvrage.com/wwe-after-burn</showlink> </show> All I want, is to list this out on MY website... I am a complete beginner. I imagine I have to copy and paste the URL in to my code, right? A javascript link? But then, what after that? I have barely touched javascript or jquery as a developer. Can someone just give me some guidance on this please? It's really starting to stress me out :-(
  5. Hi, I have a PHP script sendEmail.php that given some data (receiver, content, etc), sends an email to the receiver. When i click the Send button i fire the sendEmail.php script using AJAX: $('#sendbutton').on('click', function(){ $.ajax({ type: "POST", url: "js/ajax/sendEmail.php", data: {receiver:receiver, content: content} }); }); I want to add a feature call "Schedule send" where the user can select in how many minutes the email will be send. What i did, was to take the minutes value, insert it into a countDown timer, and as soon as the time is Zero, to fire the same AJAX call. This is working only if the browser is open. And i can understand this, since it is Javascript's responsibility to fire the AJAX call since its the one on client site. QUESTION: Is there a way to fire this sendEmail.php scipt even if the web browser is closed?Using PHP/MYSQL of course.. For example the user will select the recipient, write the email, schedule it to be sent 20 minutes later, and close the browser. If not, what are your suggestions? Thanks in advance, Christos
  6. I have made an ajax call (using file activedirectory.php) to active directory to retrieve information such as name,thumbnail photo,mail etc. the ajax call is made on click of a name in a leaderboard ,to fetch only that person's info by matching the post['id']. The problem is that I am unable to retrieve any information and the console gives me an error saying : SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data the error type makes it clear that it is unable to pull any data whatsoever. .php file that has been used here :(activedirectory.php) -- <?php /** * Get a list of users from Active Directory. */ $ad_users = ''; $message = ''; $ldap_password = 'Qwerty@33xxxxxx'; $ldap_username = 'maxxxxxxxxxxxx'; $server = 'ldap://xxxxxxxxxx'; $domain = '@asia.xxxxxx.com'; $port = 389; $ldap_connection = ldap_connect($server, $port); if (FALSE === $ldap_connection){ // Uh-oh, something is wrong... } // We have to set this option for the version of Active Directory we are using. ldap_set_option($ldap_connection, LDAP_OPT_PROTOCOL_VERSION, 3) or die('Unable to set LDAP protocol version'); ldap_set_option($ldap_connection, LDAP_OPT_REFERRALS, 0); // We need this for doing an LDAP search. if (TRUE === ldap_bind($ldap_connection, $ldap_username.$domain, $ldap_password)){ $base_dn = "OU=Employees,OU=Accounts,OU=xxxxx,DC=xxxxx,DC=xxxxxx,DC=com"; $kid = 'NonExistingAccount'; if (preg_match('#SAM_NAME_MATCHING_REGEX#', $_POST['id'])) { $kid = $_POST['id']; } $search_filter = "(&(objectCategory=person)(samaccountname={$kid}))"; $attributes = array(); $attributes[] = 'givenname'; $attributes[] = 'mail'; $attributes[] = 'samaccountname'; $attributes[] = 'sn'; $result = ldap_search($ldap_connection, $base_dn, $search_filter, $attributes); $maxPageSize = 1000; if (FALSE !== $result){ $entries = ldap_get_entries($ldap_connection, $result); for ($x=0; $x<$entries['count']; $x++){ if (!empty($entries[$x]['givenname'][0]) && !empty($entries[$x]['mail'][0]) && !empty($entries[$x]['samaccountname'][0]) && !empty($entries[$x]['sn'][0]) && 'Shop' !== $entries[$x]['sn'][0] && 'Account' !== $entries[$x]['sn'][0]){ $ad_users[strtoupper(trim($entries[$x]['samaccountname'][0]))] = array('email' => strtolower(trim($entries[$x]['mail'][0])),'first_name' => trim($entries[$x]['givenname'][0]),'last_name' => trim($entries[$x]['sn'][0])); } } } ldap_unbind($ldap_connection); // Clean up after ourselves. } $message .= "Retrieved ". count($ad_users) ." Active Directory users\n"; ?> the javascript that has been used here : $('.leaderboard li').on('click', function () { $.ajax({ url: "../popupData/activedirectory.php", // your script above a little adjusted type: "POST", data: {id:$(this).find('.parent-div').data('id')}, success: function(data){ console.log(data); data = JSON.parse(data); $('#popup').fadeIn(); //whatever you want to fetch ...... // etc .. }, error: function(){ alert('failed, possible script does not exist'); } }); });
  7. Why does this source file seem to cause the ajax to crash after the first call to the function? function swapContent(href, url_data, target) { $.ajax({ type: 'GET', cache: false, url: href+'?' + url_data, //add a variable to the URL that will carry the value in your i counter through to the PHP page so it know's if this is new or additional data success: function (data) { // this param name was confusing, I have changed it to the "normal" name to make it clear that it contains the data returned from the request //load more data to "target" value div target.innerHTML = (data); // as above, data holds the result of the request, so all the data returned from your results.php file are in this param but please see below } }) }
  8. Hi Here is my problem https://jsfiddle.net/mphur5eq/14/ I have two tables on the left section1 on top and section2 at the bottom each section has its own button to insert row section 1 has different number of fields than that on section 2. the problem is when i clicked on New Row on section 2 it clones the row from section 1 which is wrong, it should clone the row of the section where it belongs. can you help me with this? Thank you
  9. Hello, I have a navigation bar which opens up a submenu with a mouseover event on pc and with a touch for ios. For ios devices the following code is utilized to close the menu on a touch event to the document. <script> document.onclick = mclose(); window.addEventListener('load', function (){ // on page load document.body.addEventListener('touchstart', function(e){ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }, false) }, false) </script> My question is - how can I remove the above EventListener from the div displayed as the submenu so that touching within that div does not close it and the links are functional? I am guessing there is a method using preventdefault that may be applied but I am uncertain.
  10. This is jquery dialog box. http://jqueryui.com/dialog/#modal-confirmation I am wondering where would be the best place to add the dialog box div, in below html page? <html> <head> </head> <body> </body> </html>
  11. Say I have button 1 and I want to replace it with button2 on click. How would I do that? <button id="button1">butto 1</button> <button id="button2">butto 2</button>
  12. How do you solve an error where a soft refresh of data causes an accordion to fail, but on a hard refresh it works just fine? example: $(function() { $( "#accordion" ).accordion({ collapsible: true, active: false, heightStyle: "content" }); console.log('ran'); });
  13. links in header looks like.. <link rel="icon" href="images/favicon.ico"> <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script src="js/jquery-migrate-1.1.1.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/script.js"></script> <script src="js/superfish.js"></script> <script src="js/jquery.equalheights.js"></script> <script src="js/jquery.mobilemenu.js"></script> <script src="js/tmStickUp.js"></script> <script src="js/jquery.ui.totop.js"></script> <script src="js/validjs.js"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <link rel="stylesheet" href="css/homestyle.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="css/side-slider.css" rel="stylesheet" type="text/css" media="screen"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery.side-slider.js"></script> if i comment the below jq library.. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> then my stuck-container works on scroll down the page.. but my "username checker" plugin does not work.. and... VICE-VERSA... Please help me to get out of this prob...
  14. Hi Peeps So basically im creating a "customer page" i have 2 tabs, 1 is customer info which is the primary and the invoicing tab I have a date picker in the invoicing tab which im hoping will populate a table below. I tried having the form post to php but this resets the page which then goes to the customer info tab so im guessing this will have to be done with jquery and ajax. could someone please point me in the right direction to do this? here is the current page for better explanation: All help is greatly appreciated in advance Mooseh
  15. Hi, I have the below code and jquery in wordpress. I would like the form to auto submit, but at the moment I just get a 0 in the place of the heart icon. it seems to refresh but the form is not submitting the query. Thank you in advance <form id="lastviewer" class="ajax-form" action="<?php echo AJAX_URL; ?>" method="POST"> <?php if(ThemexUser::islastviewed(ThemexUser::$data['active_user']['ID'])) { ?> <a href="#" title="<?php _e('Remove from lastviewed', 'lovestory'); ?>" data-title="<?php _e('Add to Last Viewed', 'lovestory'); ?>" class="icon-heart submit-button current"></a> <input type="hidden" class="toggle" name="user_action" value="remove_lastviewed" data-value="add_lastviewed" /> <?php } else { ?> <a href="#" title="<?php _e('Add to Last Viewed', 'lovestory'); ?>" data-title="<?php _e('Remove from Last Viewed', 'lovestory'); ?>" class="icon-heart submit-button"></a> <input type="hidden" class="toggle" name="user_action" value="add_lastviewed" data-value="remove_lastviewed" /> <?php } ?> <input type="hidden" name="user_lastviewed" value="<?php echo ThemexUser::$data['active_user']['ID']; ?>" /> <input type="hidden" class="nonce" value="<?php echo wp_create_nonce(THEMEX_PREFIX.'nonce'); ?>" /> <input type="hidden" class="action" value="<?php echo THEMEX_PREFIX; ?>update_user" /> </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { window.setInterval(function() { AutoPost(); }, 3000); }); function AutoPost() { $.ajax({ type: "POST", url: "<?php echo AJAX_URL; ?>", success: function(data) { $("#lastviewer").html(data) ; } }); } </script>
  16. Hello everyone, I am working on a form that is similar to a shopping cart system and I am thinking of creating a button that submits the checked value and saves them to a $_SESSION variable. And also a link that links to a cart.html that takes the values of a $_SESSION variable. I am have trouble figuring what tag/attribute should I use in order to achieve that. Right now my code attached below submits the checked values to cart.html directly. However I want my submit button to save the checked box to a $_SESSION variable and STAY on the same page. And then I will implement a <a> to link to the cart.php. I researched a little bit about this subject and I know it's somewhat related to ajax/jquery. I just wanted to know more about it from you guys. I appreciate your attention for reading the post and Thanks! Below is the form that I currently have: <form name= "finalForm" method="POST" action="cart.php"> <input type="Submit" name="finalSelected"/> <?php foreach($FinalName as $key => $item) {?> <tr> <td><input type="checkbox" name="fSelected[]" value="<?php echo htmlspecialchars($FinalID[$key])?>" /> <?php echo "$FinalID[$key] & $item";?> </td> </tr> <?php } ;?> Below is the code for cart.php <?php require ('connect_db.php'); if(isset($_POST['finalSelected'])) { if(!empty($_POST['fSelected'])) { $chosen = $_POST['fSelected']; foreach ($chosen as $item) echo "aID selected: $item </br>"; $delimit = implode(", ", $chosen); print_r($delimit); } } if(isset($delimit)) { $cartSQL = "SELECT * from article where aID in ($delimit)"; $cartQuery = mysqli_query($dbc, $cartSQL) or die (mysqli_error($dbc)); while($row = mysqli_fetch_array($cartQuery, MYSQLI_BOTH)) { $aTitle[] = $row[ 'name' ]; } } ?> <table> <?php if(isset($delimit)) { $c=0; foreach($aTitle as $item) {?> <tr> <td> <?php echo $aTitle[$c]; $c++;?> </td> </tr> <?php }}?> </table>
  17. Hi All, I have tried with no luck the navigation just doesn't want to stay on the same line... HTML: <div id="nav-menu" class="navbar navbar-style-dark navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><span><img src="img/Logos/george-little-logo.png" alt="George Little Logo" /></span></a> <button type="button" id="navbar-toggle-menu" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="search"> <button type="button" class="navbar-toggle"> <span><i class="glyphicon glyphicon-search search-mobile-btn"></i></span> <div class="search-box"> <form action="" method="get"> <input type="text" placeholder="Search..." name="search"> </form> </div> </button> </div> </div> <div id="myNavmenu" class="collapse navbar-collapse" id="navbar-ex-collapse" role="navigation"> <ul class="nav"> <li> <a class="active" href="#">Home</a> </li> <li> <a href="#">Showings</a> </li> <li> <a href="#">Photos</a> </li> <li> <a href="#">Videos</a> </li> <li> <a href="#">Mixes</a> </li> <li> <a href="#">Hire</a> </li> </ul> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="/users/sign_up">Sign Up</a></li> <li class="divider-vertical"></li> <li> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="more-drop"> <form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal"> <input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em"> <input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In"> </form> </div> </li> </ul> </div> </div> jQuery: function renderMenu() { if($(window).width() < 768 || isMobile.any()) { $("#myNavmenu").removeClass("collapse"); $("#myNavmenu").removeClass("navbar-collapse"); $("#myNavmenu ul.nav").removeClass("navbar-nav"); $("#myNavmenu ul.nav").removeClass("navbar-left"); $("#myNavmenu ul.nav").addClass("navbar-right"); $("#myNavmenu").addClass("navmenu-fixed-right"); $("#myNavmenu").addClass("offcanvas"); $(".navbar-toggle").css("display", "block"); $(".navbar-header").css("float", "none"); } else { $("#myNavmenu").removeClass("navmenu-fixed-right"); $("#myNavmenu").removeClass("offcanvas"); $("#myNavmenu").addClass("collapse"); $("#myNavmenu").addClass("navbar-collapse"); $("#myNavmenu ul.nav").addClass("navbar-nav"); $("#myNavmenu ul.nav").addClass("navbar-left"); $("#myNavmenu ul.nav").removeClass("navbar-right"); $(".navbar-toggle").css("display", "none"); $(".navbar-header").css("float", "left"); } } $(window).ready(function() { renderMenu(); }); $(window).resize(function() { renderMenu(); }); if($(".navbar").width() >= 768) { alignMenu(); } $(window).resize(function() { $("#myNavmenu .nav").append($("#myNavmenu .nav li.more ul").html()); $("#myNavmenu .nav li.more").remove(); alignMenu(); }); function alignMenu() { var w = 0; var mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - 350; if($(".more").length) { mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - $(".more").outerWidth(true); } var i = -1; var menuhtml = ''; jQuery.each($("#myNavmenu .nav").children(), function() { i++; w += $(this).outerWidth(true); if($(".navbar").width() >= 768 && !isMobile.any()) { if (mw < w) { menuhtml += $('<div>').append($(this).clone()).html(); $(this).remove(); } } }); if(menuhtml != "") { $("#myNavmenu .nav").append('<li class="more">' + '<a href="#">More <i class="glyphicon glyphicon-chevron-down"></i></a>' + '<div class="more-drop"><ul>' + menuhtml + '</ul></div>' +'</li>'); } } I'll attach two screenshots to show the menu before and after. Any help would be much appreciated.
  18. Need little help with the quiz problem. I want to set time limit for each question in quiz module (say 30 seconds) and after that time, the form will auto submit the question (auto submit = no option selected = unanswered). There are 3 questions, so total time limit is 90 sec (30 sec each). I'm doing this via XAMPP. The link below provide the work so far https://www.dropbox.com/s/4dzlgjtjzvs48vw/quiz.rar?dl=0 Thanks
  19. Hi there, I was trying to do a live table edit for our site. Everything seemed to be going ok, till i realised that its not actually updating the database, there are no error messages, you have to refresh the page to see it hasn't worked. I'm at a loss as to why was hoping someone might be able to point me in the right direction. thanks, MsKazza tableedit.php table_edit_ajax.php
  20. If you search for images on Google images, you will see how they setup their images, side by side and have infinity scroll. I don't care about the infinity scroll part, but I am interested in how they set up the images? My plan is to retrive the images from the database and use pagination numbers.
  21. I have this html to let people select how how many color div wants to have from 1-3 <div class="color-side-a"> <p class="sideABCD-header">Side A</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="1">Select A Number</option> <option value="1" group="1">1</option> <option value="2" group="1">2</option> <option value="3" group="1">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideA color1"></div> <div name="color2" class="sideA color2"></div> <div name="color3" class="sideA color3"></div> </div> </div> </div><!-- end side A --> <div class="color-side-b"> <p class="sideABCD-header">Side B</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="colors">Select A Number</option> <option value="1" group="colors">1</option> <option value="2" group="colors">2</option> <option value="3" group="colors">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideB color1"></div> <div name="color2" class="sideB color2"></div> <div name="color3" class="sideB color3"></div> </div> </div> </div><!-- end side B --> I have this jquery to show /hide depend on the value chosen which is really just depend on value then show() /hide() the other divs which I didn't show since it's just simple something like value == 1, color1.show() color2.hide() and so on I have this function which then lets people pick the color they wanted in the selectColorBox div I know this code is duplicating but I tried a few ways and not sure how I can combine them in order to reuse most of the codes and if I have side C D E F G I wouldn't need to just copy and paste my codes var colorHolder = null; //used to store the location where color is picked <div class="color-side-a"> <p class="sideABCD-header">Side A</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="1">Select A Number</option> <option value="1" group="1">1</option> <option value="2" group="1">2</option> <option value="3" group="1">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideA color1"></div> <div name="color2" class="sideA color2"></div> <div name="color3" class="sideA color3"></div> </div> </div> </div><!-- end side A --> <div class="color-side-b"> <p class="sideABCD-header">Side B</p> <div class="dimension-width"> <p class="dimension-WHC">Colors</p> <select name="number-of-colors" class="number-of-colors"> <option value="" group="colors">Select A Number</option> <option value="1" group="colors">1</option> <option value="2" group="colors">2</option> <option value="3" group="colors">3</option> </select> <div class="number-of-color-field"> <div name="color1" class="sideB color1"></div> <div name="color2" class="sideB color2"></div> <div name="color3" class="sideB color3"></div> </div> </div> </div><!-- end side B --> this is my simple div box for user to pick colors <div class="colorSelectBox"> <div>Special</div> <div> <div class="pink" value="pink"></div> <div class="black" value="black"></div> <div class="yellow" value="yellow"></div> </div> <div class="clear"></div> <div>Original</div> <div> <div class="red"></div> <div class="blue"></div> <div class="grey"></div> <div class="green"></div> <div class="white"></div> </div> </div> how can I combine those two duplicated jquery into one function that I can further use more later if needed?
  22. Hello all, I have a website with a form that I want a user to fill out then if it is valid I have the button submit and I want it to email me. The message. If success full I want a message to popup on screen saying success I am using bootstrap 4 <div class="messageSuccess"></div> <div class="row"> <div class="col-md-9 mb-md-0 mb-5"> <form id="contact-form" name="contact-form" action="" method="post"> <!--action="contactEmail.php" --> <div class="row "> <div class="col-md-6 "> <div class="md-form mb-0 "> <input class="form-control" type="text" id="txtName" name="txtName" required /> <label for="txtName">Your Name </label> <div class="nameError"></div> </div> </div> <div class="col-md-6 "> <div class="md-form mb-0 "> <input class="form-control" type="text" id="txtEmail" name="txtEmail" required /> <label id="lblEmail" for="txtEmail">Your Email Address </label> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="md-form mb-0"> <input class="form-control" type="text" id="txtSubject" name="txtSubject" data-error="Subject Here" required /> <label for="txtSubject">Subject </label> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="md-form"> <textarea class="form-control" type="text" id="txtMessage" name="txtMessage" rows="4" required data-error="Please leave us a message."></textarea> <label for="txtMessage">Your Message </label> </div> </div> </div> <div class="text-center text-md-left"> <input type="submit" id="BtnFormSubmit" class="btn btn-primary btn-xl text-white" value="Send Message" /> </div> <div class="status"></div> </form> <!-- JavaScript Inner File Form Validation --> <script type="text/javascript"> $(document).ready(function () { var form = $("#contact-form"); var name = $("#txtName").val(); var email = $("#txtEmail").val(); var subject = $("#txtSubject").val(); var message = $("#txtMessage").val(); var btnSubmit = $("BtnFormSubmit"); $(form).submit(function (event) { if (this.checkValidity() == false) { $(this).addClass("was-validated"); event.preventDefault(); event.stopPropagation(); } alert("Form Valid to create message"); if (!event.isDefaultPrevented) { alert("passed prevent default"); var url = "testemail.php"; // POST values 'ajax' $.ajax({ type: "POST", url: url, data: $(this).serialize(), success: function (data) { // done: // data = JSON object object for contactEmail.php // recieve message type: success | danger var messageAlert = "alert- " + data.type; var messageText = data.message; // Bootstrap alert box HTML var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" ' + 'data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>'; // if messageAlert and messageText if (messageAlert && messageText) { // Put message on page in messageSuccess section. $(form).find("#messageSuccess").html(alertBox); // Reset the form. $(form)[0].reset(); } } }); //return false; } }); //$(name).blur(function () { //}) // Validate :inputs $(":input").blur(function () { let controlType = this.type; switch (controlType) { case "text": case "password": case "textarea": validateText($(this)); break; case "email": validateEmail($(this)); break; default: break; } }); // each :input focusin remove existing validation messages if any. $(":input").click(function () { $(this).removeClass("is-valid is-invalid"); }) /* OPTIONAL ':input' KEYDOWN validation messages remove */ // Reset Form and remove all validation messages. $(":reset").click(function () { $(":input").removeClass("is-valid is-invalid"); $(form).removeClass("was-validated"); }); }); // Validate Text Function function validateText(control) { let textField = control.val(); if (textField.length > 1) { $(control).addClass("is-valid"); } else { $(control).addClass("is-invalid"); } } // Validate Email Function (Email newer regex: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/ ) function validateEmail(control) { let textField = control.val(); let regexPattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}\b$/i; if (regexPattern.test(textField)) { $(control).addClass("is-valid"); } else { $(control).addClass("is-invalid"); } } </script> <?php $from = 'SampleEmail@YourEmail.com'; $sendTo = 'sample@Gmail.com'; $subject = 'Your Message Subject Here';// Email Message Contact Form Fields // Array - ($varName => Text from controls) $controls = array('txtName' => 'Name', 'txtEmail' => 'Email', 'txtSubjext' => 'Subject', 'txtMessage' => 'Message'); $successMessage = 'Contact Message Successfully Sent. Thank you, I will get back to you soon.'; $errorMessage = 'There was an error submitting your message, Please try again. Or try later.'; error_reporting(E_ALL & ~E_NOTICE); try { if(count($_POST) == 0) throw new \Exception('Contact Form Message is empty'); $emailText = "You have a new message from your contact form\n------------------------------------------------------\n"; foreach($_POST as $key => $value) { if(isset($controls[$key])) { $emailText .= "$controls[$key]: $value\n"; } } $headers = array('Content-Type: text/plain; charset="UTF-8";', 'From: ' . $from, 'Reply-To: ' . $from, 'Return-Path: ' . $from, ); // Send email mail($sendTo, $subject, $emailText, implode("\n", $headers)); $responseArray = array('type' => 'success', 'message' => $successMessage); } catch(\Exception $e) { $responseArray = array('type' => 'danger', 'message' => $errorMessage); } // If AJAX request return JSON response **RARE** if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $encodedJSON = json_encode($responseArray); header('Content-Type: application/json'); echo $encodedJSON; } else { echo $responseArray['message']; } ?>
  23. Hello, So I have this program I'm trying to create where there are 9 articles (the html tag) and I want 3 random ones to display at any one time. When you click the link in the article, it should bring up that link in an iframe. A skip button then appears and when you click it, the iframe should disappear and three different random articles should come up. It works fine for the first time you click, but any time after that it just gets more and more messed up. If anyone can look at my code and tell me where I've gone wrong, it would be a great help. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>New Path Page</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <!-- JavaScript --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <style> article { color: white; } article a, article a:visited, article a:hover { color: white; } .offer-one, .offer-two, .offer-three, .offer-four, .offer-five, .offer-six, .offer-seven, .offer-eight, .offer-nine { height: 300px; padding-top: 18px; text-align: center; font-size: 20px; } .offer-one { background-color: #93104d; } .offer-two { background-color: #285b6c; } .offer-three { background-color: #368a2c; } .offer-four { background-color: #93104d; } .offer-five { background-color: #285b6c; } .offer-six { background-color: #368a2c; } .offer-seven { background-color: #93104d; } .offer-eight { background-color: #285b6c; } .offer-nine { background-color: #368a2c; } iframe { width: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe></iframe> <a class="skip">SKIP</a> <div class="offers"> <div class="row"> <article class="col-md-4 offer-one"> <h2>test</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-two"> <h2>test2</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-three"> <h2>tes3</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-four"> <h2>test4</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-five"> <h2>test5</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-six"> <h2>tes6</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-seven"> <h2>test7</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-eight"> <h2>test8</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> <article class="col-md-4 offer-nine"> <h2>tes9</h2> <a href="/newpath-sample.php">CLICK HERE</a> </article> </div> <? // end of row ?> </div> </div> <? //end of container ?> </body> </html> and the Jquery: <script> $(window).load(function() { $('.offers article').hide(); $('iframe').hide(); $('.skip').hide(); var offers = [".offer-one",".offer-two",".offer-three",".offer-four",".offer-five",".offer-six",".offer-seven",".offer-eight",".offer-nine"]; var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); $('.offers article a').click(function(e) { e.preventDefault(); var setSRC = $(this).attr('href'); $('iframe').attr('src',setSRC); $(offerOne).fadeOut(1); $(offerTwo).delay(200).fadeOut(1); $(offerThree).delay(400).fadeOut(1, function() { $('iframe').fadeIn(1, function() { $('.skip').show(); }); }); }); $('.skip').click(function(e) { e.preventDefault(); $('.offers article').hide(); $('.skip').hide(); $('iframe').fadeOut(1); $('iframe').hide(); var offerOne = ""; var offerTwo = ""; var offerThree = ""; while (offerOne == offerTwo || offerOne == offerThree || offerTwo == offerThree) { var offerOne = offers[Math.floor(Math.random()*offers.length)]; var offerTwo = offers[Math.floor(Math.random()*offers.length)]; var offerThree = offers[Math.floor(Math.random()*offers.length)]; } $(offerOne).fadeIn(1); $(offerTwo).delay(200).fadeIn(1); $(offerThree).delay(400).fadeIn(1); }); }); </script>
  24. hi mate its me again asking questions on jquery clone. As solved before, i have a form that contains rows that is being cloned. (works perfect). Make a Copy of that form to the right side (Works great) here is my problem, when i make a copy of that form to the right the click event is lost on the New Row button to the form on the right. can you help me with this? Here is a working jsfiddle: https://jsfiddle.net/mphur5eq/5/
  25. I'm using a plugin to include a photo gallery on a wordpress site. At the bottom of the page in the footer I include <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> just like the samples I look at do it here http://getbootstrap.com/getting-started/#examples The problem is that the plugin doesn't work when I include jquery. I posted the probelm here https://wordpress.org/support/topic/huge-it-doesnt-work-with-google-ajax-jquery And the reply was jQuery should not be called this way? That's the way the samples do it You try to call jQuery in no standard way? It's the same in every footer Sooo, how do you call jquery and what is the standard way? Thanks in advance
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.