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 154 results

  1. exceedinglife

    Php bootstrap 4 email from form

    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']; } ?>
  2. ajoo

    inline to file.js

    Hi all ! The following piece of code works fine. <?php $myVar1 = "best1"; $myVar2 = "best2"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>SWFObject 2 dynamic publishing example page</title> <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> --> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var myVal1 = "<?php echo $myVar1; ?>"; var myVal2 = "<?php echo $myVar2; ?>"; var flashvars = { myVar1: myVal1, myVar2: myVal2 }; swfobject.embedSWF("AS3_swf_php_comm_1.swf", "myswf", "550", "400", "9.0.0", false, flashvars); </script> </head> <body> <div id="myswf"> <h1>Alternative content</h1> <h2> Best </h2> </div> </body> </html> I wish to convert the following bit : <script type="text/javascript"> var myVal1 = "<?php echo $myVar1; ?>"; var myVal2 = "<?php echo $myVar2; ?>"; var flashvars = { myVar1: myVal1, myVar2: myVal2 }; swfobject.embedSWF("AS3_swf_php_comm_1.swf", "myswf", "550", "400", "9.0.0", false, flashvars); </script> into a file jquery file movie.js thereby removing the above inline code. Please can someone help me convert this or convert it for me. Thanks all !

    PHP Gallery

    Hi all, I don't know if there's a gallery for this already or the right place to ask the question. User uploads multiple images. Images are store in a different folder and a unique name stored on the database. All images have a unique group for referencing purpose . When a user clicks on a link in his table he can view all images pertaining to a group. How can i go about that? What i want to achieve is for example SELECT ALL FROM IMAGE_TABLE WHERE USERNAME = USERNAME AND GROUP_ID = GROUP_ID Thanks
  4. Hello, I’d have a question to ask. First, let me explain what I want to achieve. In a table I display several links whose value (user id) is extracted from a database. By clicking on the link appears a modal pop up in which I would like to pass the selected value in a query using MySQL. Here is the table <table> <tr> <td>Username</td> <td>Id</td> </tr> <?php include ‘db_connection.php’; $sql = "SELECT * FROM users"; $result = mysql_query($sql); while($row = mysql_fetch_array($result)){ ?> <tr> <td><?php echo $row[userID]?></td> <td> <div id='basic-modal'> <a href="?id=<?php echo $row[userID]?>" class='basic'>Show</a> </div> </td> </tr> <?php } ?> </table> This is the link <div id='basic-modal'> <a href="?id=<?php echo $row[userID]?>" data-mydata="<?php echo $row[userID]?>" class='basic'>Show</a> </div> and this is the script which retrieves data. <script> jQuery(function ($) { $('#basic-modal .basic').click(function (e) { $('#basic-modal-content') .text($(this).data('mydata')) .modal(); return false; }); }); </script> Now I would like to pass the value in a SELECT through a variable named $userId as shown below in order to show the user data. <div id="basic-modal-content> $sql = "SELECT * FROM user WHERE id = $userId"; $res = mysql_query($sql); $row = mysql_fetch_array($res); ?> </div> Since I have little familiarity with the jQuery plugin I would like to ask you how to pass the selected id in the variable named $userId within the SELECT. Thanks
  5. FooKelvin

    Jquery return

    Hi i have stuck with the ajax return success. Firstly let me explain what i going to do. i have a input form, the form have 3 field text. 1) start Date 2) end Date 3) quarter the "quarter" field is a drop down list. i have a database to store the date of period of Q1,Q2,Q3,Q4. so i want to have, when a user select a drop down, the date will return the Q1 Period. For now, i'am able to return the result like this: [{"qstartDate":"11/1/2014","qendDate":"1/31/2014"}] But, when i wanted to return the date into my form, it fail. So, Here is my Code $("#slc-quarter").change(function () { var quarter = $(this).val(); $.ajax({ url: "searchQuarterDetails.asp?term=" + quarter, success: function (data) { var a = qstartDate; alert(a) } //$("#qstartDate").val(ui.item.qstartDate); //$("#qendDate").val(ui.item.qendDate); }) }) The result that i get from this code after i change the drop down menu is: [object htmlinputelement]
  6. Hello, so I am a new member here and I would need some help. I could'nt decide if I post my problem to ajax or javascript topic . I have bought dating site software called eMeeting. I tried to add a custom javascript slider to the header. The slider needs jquery library to work, but when I import the library, other scripts from the webpage stop working. So here is a quick demo. This is my sites header. When I click to "SMS Kuulutused" link (marked with red circle) this appears: So the problem is now when I click to the status box on the same page nothing happens. But if I comment the line below (located in sliders js file) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Other javascripts from the page will work again and the result for this demo when clicked the red circle would be this: It would be really nice if someone has some time to help me or give me some suggestions. Also the webpage is http://flirt.ee Best Regards, Mairo
  7. Okay so i have a file that i need some php variables from. This is the code that i am using. please help ! This is the ajax that i am trying to use to get the variable and then set it to a php variable. $.ajax({ url : 'pagination_data.php?page=1', type : 'POST', data : data, dataType : 'json', success : function (result) { var k=result; <?php $next ?>=var k; }, error : function () { alert("error"); } }); Now here i am setting the varialbes in the other file. $next = $page+1; $prev = $page-1; echo json_encode($next); echo json_encode($prev); and this is where i need the variables... <?php echo "<div class='controls' id='$prev'></div><div class='controls' id='$next'>"; ?>
  8. Great site!, Im trying to understand a bit more pdo.. I have the following: I have a svg and when I click on the map the country name is loaded into a var on the click event by the code below: <script> function fill_contact(evt) //display click event { var country_id = evt.target.id document.getElementById('country_name').firstChild.data = country_id } </script> My php code is as follows: <?php //Define constants define('DB_DRIVER', "mysql"); define('DB_SERVER', ""); define('DB_DATABASE', "aeea"); define('DB_USER', "root"); define('DB_PASSWORD', "root"); //Database connection try { $dbh = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER, DB_USER, DB_PASSWORD); $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e){ die("Sorry, we could not connect you to this database, please contact the Administrator to sort this out.". $e->getMessage()); } //Get data $query = "SELECT firstname, lastname, email, photo FROM reps WHERE country like ?"; $country = 'country_name'; //Create the statement $stmt = $dbh->prepare($query); $stmt->execute(array($country)); //Use data $row = $stmt->fetch(PDO::FETCH_ASSOC); echo '<pre>', print_r($row), '</pre>'; ?> My Html code is as follows: <div id="IndexPage"> <div id="IndexPage_Left"> <div id="IndexPage_Left_top"> <h3>Country: <span class="label" id="country_name"> </span></h3><!—This works fine--> <p></p> <h4>Regional Representative: <span class="label" id="firstname"> </span></h3></h4><!--get Rep ” firstname, lastname” from database based on country from svg to display--> <p></p> <h4>Photo</h4><!--get Rep “photo” from database based on country from svg to display--> <p></p> <input style='margin-top: 20px;' type="submit" value="Contact me." id='jqxSubmitButton' /><!-- if clicked, it opens a contact form below, the email address is hidden--> </div> <div id="IndexPage_Left_bottom"> <h4>email form here<h4><!-- if email is clicked, it opens a contact form here with “email” address from database --> </div> </div> <div id="IndexPage_Right"> <svg id="map" version="1.1" and rest of svg code. My database has a table called reps. It had dta of representatives in each country in Africa. It has a number of fields ie. rep_id(unique indexed), firstname, lastname, email, postal, city, state, country, contact_no, photo etc. I want to be able to get the fields in the database and display them in the html form on the click events. Ie. The database must also refresh the query every time a click event happens. Guests might click a few countries to look at reps. If they click off the map, it blanks out the details. How do I go about doing this? I’ve heard about XMLHttpRequest but don’t know how to go about doing it. Another question: Once I get the information, how do I display it correctly in the Html? I used <span>, but is it correct? Last question: Once I get the information email address, how do I show a contact form on "conact me" button? and then when guests click on another country, remove the contact form? This is my first website. Please help
  9. The code is for generated a home page with two div's: 'left_menu' and 'right_menu', where I want to navigate with the links from left_menu should display the content on the right_menu. I have two links (reports and roles) on the left_menu and two tabs (tab1 and tab2) on the right_menu. 1. When I click on reports, it should open the tab1 and clicking on users should open the tab2. 2. When I launch home.php, the first item(reports) should be opened by default and the tab1 accordingly. Here is the my code I tried, when I click the roles on left_menu, it is opening the default one i.e. tab1 and the left_menu isn't opened by default. home.php <html lang="<?php echo _SITE_LANGUAGE ?>"> <head> <script src="../js/jqueryv1.10.2.js"></script> <script type="text/javascript"> //accordion left menu $ (document).ready(function() { $ (".wings").click(function(event) { $(".box").slideUp("slow"); if ($(this).next().is(":hidden") == true) { $(this).next().slideDown("slow"); } }); //(".box").hide("slow"); }); //Tab (rightbox) $(document).ready(function() { $('#tabs li a:not(:first)').addClass('inactive'); $('.contain').hide(); $('.contain:first').show(); $('#tabs li a').click(function() { var t = $(this).attr('id'); if($(this).hasClass('inactive')) { //this is the start of our condition $('#tabs li a').addClass('inactive'); $(this).removeClass('inactive'); $('.contain').hide(); $('#'+ t + 'C').fadeIn('slow'); } }); }); </script> <style> .wings { width:200px; float:left; padding:7px 11px; } .box { width:195px; float:left; display:none; margin:0px 20px; } </style> </head> <body> <?php echo '<div class="left_menu"> <div class="wings"> <div style="float:left;"><img src="images/right_arrow.gif"/></div> <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Reports</a></div> <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div> </div> <div class="box">'; $reports = $reports->get_report(); $reports_count = count($reports); if ($reports_count > 0 ) { foreach ($reports as $ds) { echo '<div style="float:left;margin:5px 14px;width:180px;"> <div style="float:left;"><img src="images/right_arrow.png"></div> <div style="float:left;padding:0px 6px;">'.$ds['dsource_name'].'</img></div> <div style="float:left;"><a href="edit_dsource.php?id='.$ds['id'].'"><img src="images/edit.gif"/></a></div> <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div> </div>'; } } else echo 'No Datasources'; echo '</div> <div class="wings"> <div style="float:left;"><img src="images/right_arrow.gif"/></div> <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Roles</a></div> <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div> </div> <div class="box">'; $roles = $roles->get_report(); $roles_count = count($roles); if ($roles_count > 0 ) { foreach ($roles as $ds) { echo '<div style="float:left;margin:5px 14px;width:180px;"> <div style="float:left;"><img src="images/right_arrow.png"></div> <div style="float:left;padding:0px 6px;">'.$ds['dsource_name'].'</img></div> <div style="float:left;"><a href="edit_dsource.php?id='.$ds['id'].'"><img src="images/edit.gif"/></a></div> <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div> </div>'; } } else echo 'No Datasources'; echo '</div>'; echo '</div> <!--left_menu-->'; echo '<div class="right_menu"> <ul id="tabs"> <li><a id="tab1">Configuration</a></li> <li><a id="tab2">Report Viewer</a></li> </ul> <div class="container" id="tab1C"> <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br> ( Report Tab content ) </div> </div> <div class="container" id="tab2C"> <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br> ( Report Tab content ) </div> </div>'; echo '</div><!--right_menu-->'; ?> </body> </html> JS Fiddle : http://jsfiddle.net/gansai/s9NvX/1/
  10. Glenskie

    Auto Refresh not working

    Here is a script i wrote so i could refresh a div with content every 5 seconds but for some reason it doesnt work ... i wanted it to load it with the page then start the refresh i didnt want it to have to wait for the refresh to show up. <script type="text/javascript"> function page_load(){ $('#contentforads').load('<?php print $actual_link ?>/ads.php').fadeIn("slow"); } function refresh(){ page_load() var auto_refresh = setInterval(page_load(),5000); } </script>
  11. Glenskie

    php and jquery button

    I have this button for my like system and for some reason i have to refresh after i click it again... i would like it to be that when i click it it changes the class and i can click it again and do the other function... please help thank you... JQUERY: <script type="text/javascript"> $(document).ready(function(){ $('[name="like"]').on("click", function(){ if($(this).attr('title')=='like'){ $.post('/like.php',{imid:$(this).attr('id'),action:'like'}); $(this).removeClass('like').addClass('unlike'); $(this).attr('title','unlike'); $(this).attr('name','unlike'); } }); $('[name="unlike"]').on("click", function(){ if($(this).attr('title')=='unlike'){ $.post('/like.php',{imid:$(this).attr('id'),action:'unlike'}); $(this).removeClass('unlike').addClass('like'); $(this).attr('title','like'); $(this).attr('name','like'); } }); }); </script> PHP: $likes = mysql_query("SELECT lid FROM likes WHERE uid='$id' AND imid='$photoid'"); if(mysql_num_rows($likes)==0){ $likethis = '<div class="like" title="like" id="'.$photoid.'" name="like"></div>'; }else{ $unlikethis = '<div class="unlike" title="unlike" id="'.$photoid.'" name="unlike"></div>'; }
  12. Adam_Duski

    Countdown not working

    Hey Guys ! i'm not sure if i posted my topic in the right side anyway .. i have a countdown.js file everything is OK , but the big problem is the countdown not working at all ,( Days , Hours ,Min , Sec) all of this keeps in zero but the count UP work normal this is the source code : http://jsfiddle.net/NdfPR/2/ in line 29 and 30 until: new Date(2014, 4 - 1, 4, 0, 0, 0), since: null, nothing happen with this code but if i changed to this until: null, since: new Date(2014, 4 - 1, 4, 0, 0, 0), the count up will work and i don't count up ,, this js file is linked to my template so if there's anything to solve this problem ,, i'm here if i forget anything to
  13. FooKelvin

    Calendar View

    Hi Guys, I have created a calendar view with this plug in. http://fullcalendar.io/ The calendar view will show calendar view by Start Date and End Date. So I have some problem with some of the event, the start date is from 01-January-2015 until 15-Jan-2015, but in between actually there is a break. For example, 01-January-2015 until 03-January-2015 13-January-2015 until 15-January-2015 So, because of the start date and the end date is so long, so in the calendar view, it block the calendar from 01/Jan until 15/Jan. Its look weird. Actually i have actual dates column in my database column in this format: 01-01-2015,02-01-2015,03-01-2015,13-01-2015,14-01-2015,15-01-2015Start Date column 01-01-2015 End Date column 15-01-2015So, i was wondering is there any script to detect each of date to separate the break in between the start date and end date. Thank You
  14. Hi, what I'm tryng is to append a table row with associated jquery code... I have a jquery code just like this <script type="text/javascript"> jQuery(function($) { var rowCtr = 0; $('.addRow').click(function(){ $('#tableID > tbody:last').append('<tr name="rowEq['+rowCtr+']" id="rowEq['+rowCtr+']"><td>'+ '<select id="stype'+rowCtr+'" name="rowData['+rowCtr+'][equipment_type]">'+ '<option value="0"> -- </option>'+ '<option value="1"> Type 1 </option>'+ '<option value="2"> Type 2 </option>'+ '<option value="3"> Other </option>'+ '</select>'+ '<input id="other_type'+rowCtr+'" type="text" name="rowData['+rowCtr+'][other_type]">'+ ); $('#stype'+rowCtr).change(function() { if(jQuery('#stype'+rowCtr).val() == '3') { jQuery('#other_type'+rowCtr).show(); }else{ jQuery('#other_type'+rowCtr).hide(); } }); if(jQuery( '#stype'+rowCtr ).val() != '3') { jQuery('#other_type'+rowCtr).hide(); } rowCtr++; }); }); </script> And html like this.. <input type='button' class='addRow' value="Add Row"> <form> <table id="tableId"> <thead> <tr> <th> Type </th> </tr> </thead> <tbody> <tr> <td> dummy text.. </td> </tr> </tbody> </table> </form> The appending is ok but the hidding/showing of "other_type" field is not working. It always hide "other_type" field even if I already selected the 'other' option.
  15. I always thought that the use of jQuery(document).ready(f() ... simply insured that before f() was called, the DOM was loaded and secured for use. So what is happening here? I'm misunderstanding something very basic. function f() { return 'something'; } jQuery(document).ready(function() { jQuery('#idb_submitstory_submit').on('click',function(){ var val = f(); // the value used here ... works fine jQuery(document).ready(function() { jQuery('#idb_submitstory_submit').on('click',function(){ var val = jQuery(document).ready(f()); // use the value here ... fails I do realize that the second wrap of ready is not necessary, since the click event already has insured the environment. Thank you.
  16. I'm trying to learn jquery and ajax and not doing so well I am trying to pass the id from this dropdown when it is selected to the next ajax script and it is not working. Both scripts pull there data from the same table so if there is a way to do this with one script I would be interested. <select name="customer"id="customer" class="form-control input-sm responsetext" > </select> $( document ).ready(function() { $.ajax({ //create an ajax request to load_page.php type: "GET", url: "customer.php", dataType: "html", //expect html to be returned success: function(response){ $(".responsetext").html(response); //alert(response); } }); }); <?php include("connect.php"); $id = $_SESSION['profile']['id']; echo "<option value=''>SELECT A CUSTOMER</option>"; foreach($db->query("SELECT * FROM customers WHERE pid = '$id'") as $row) { echo "<option value=" . $row['id'] . ">" .$row['name'] . "</option>"; } The above script creates the select box and it works. Now I need the $row['id'] To be picked up by the next script to fill in the input field. <input name="contact" class="form-control input-sm contactresults" id="contact"> $(function() { // document.ready $("#id").on("change", function() { $.ajax({ url: "contact.php", type: "GET", data: { id: $(this).val() }, success: function(data) { $(".contactresults").html(data); } }); }); }); <?php include("connect.php"); $id= $row['id']; echo "<option value=''>SELECT A CUSTOMER</option>"; foreach($db->query("SELECT * FROM customers WHERE id = '$id'") as $row) { echo $row{contact"}; }
  17. I have started playing around with jQuery mainly to allow me to create complicated forms without clicking through several php pages collecting all the data. It's is probably not relevant but I will give the full picture of what i am attempting feel free to ignore this paragraph if it is of no use! I have a table of MySQL rows with checkboxes. There will be 3 different options for bulk processing of the checked rows and on clicking one of the options a hidden div will fade in and the options buttons will disappear (to prevent several options divs being opened at the same same). In the div there will be form elements relevant to the bulk processing option chosen. For the first one it is simply one text input. Upon Submit it will validate that the input is not empty and if so, execute the function that posts the data. The data gets posted, the div gets replaced and a success message is displayed, plus the bulk option buttons return ready to choose another option. This new div gets hidden once a bulk option next gets clicked. This all works correctly but there is an issue with clearing the validation. So the problem I actually have is that after successful validation and script execution the data is still in memory so if I run through the process again with an empty field, you see the validation error message again, briefly, but the script still runs. Is there any way to clear everything still in memory at the end of script execution? I have tried a few suggestions I have seen and a few things I have tried as a complete guess-up but no joy.... $('#bulkMatchActions').valid=false; $('#bulkMatchActions').validate=false; $('#bulkMatchActions').valid=null; $('#bulkMatchActions').validate=null; removeData(validator); removeData($.post); removeData('#bulkMatchActions'); I am sure that there must be a way to do this but I am completely stumped. If anyone can offer any suggestions I would be grateful. Also, although this code is something I am just playing around with and will not be used on a production site, if there is anything in the scripts that could be done better, feel free to say. but don't be too harsh!! Thanks in advance Steve The Validation part //Validate Defaults jQuery.validator.setDefaults({ debug: true, success: "valid" }); //Validate Rules $(function(){ var validator = $('#bulkMatchActions').validate({ rules: { ppReason:{ required: true } }, messages: { ppReason: "Please enter a reason" } }); //On Submit, run the posting script $('#postponeSubmit').click(function(){ if($('#bulkMatchActions').valid()){ postponeSubmit(); //After the above script is run, I want everything set to NOT VALID ready to validate an empty field again }else{ return false; } }); //Empty the form validator.resetForm(); }); The actual posting script //Postpone function postponeSubmit(){ $('#postponeSubmit').click(function() { var ppSubmit = 'ppSubmit'; var ppReason = $('#ppReason').val(); var checkBox = $.map($('input:checkbox:checked'), function(e,i) { return +e.value; }); var checkBox2 = $('#checkbox'); $('#postpone').fadeOut('fast'); $('#postpone2').fadeIn('fast'); $('#postpone2 p').text('Loading....'); $.post('inc/processForm.php', { ppReason : ppReason, ppSubmit : ppSubmit, checkBox : checkBox }, function(data){ $('#postpone2 p').html(data); showBulkControls(); }); }); }
  18. I am trying to create a dynamic form using Jquery but don't know how to post those data using $_POST. The page <html> <head> <title> Dynamically create input fields- jQuery </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { var addDiv = $('#addinput'); var i = $('#addinput p').size() + 1; $('#addNew').live('click', function() { $('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><input type="text" id="p_new2" size="40" name="p_new_2' + i +'" value="" placeholder="I am New 2" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv); i++; return false; }); $('#remNew').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); i--; } return false; }); }); </script> </head> <body> <h2>Dynammically Add Another Input Box</h2> <form action="gen.php" method="post"> <div id="addinput"> <p> <input type="text" id="p_new" size="40" name="p_new" value="" placeholder="Input Value" /><input type="text" id="p_new2" size="40" name="p_new2" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a> </p> </div> </form> </body> </html> Here is live example.. A Pen by Captain Anonymous Whatever, The new fields got an unique name="" value as p_new_1, p_new_21 for first new field, p_new_2, p_new_22 for second new field ...... ...... Now, I know I can display inserted data using <?php echo $_POST["p_new_1"]; ?> and similar way like this... But as a growing field, this form can have unlimited input field. How can I display all of those data in the page gen.php? It must be something like this example: <html> <body> <div class="header">Generated content<div> <p><a href="inserted data of first field of default row">inserted data of second field of default row</a></p> <p><a href="inserted data of first field of first new row">inserted data of second field of first new row</a></p> <p><a href="inserted data of first field of 2nd new row">inserted data of second field of 2nd new row</a></p> <p><a href="inserted data of first field of 3rd new row">inserted data of second field of 3rd new row</a></p> <p><a href="inserted data of first field of 4th new row">inserted data of second field of 4th new row</a></p> And list go on according to submitted form.... </div></body></html> I actually lake of knowledge of PHP and no idea about array or something named loop. Can someone do it for me? What I have to do in gen.php?
  19. Hey guys, i am trying to create a box to show images or content once a user selects a link within a gallery. So for example i have an image --> user scrolls over --> image overlay shows a link ---> link actions to a jquery action to where a hidden field shows more data. right now i have everything to the point to where the links default action is disabled and the "overlay" div that will show the content is hidden. when i then go ahead and add some jquery to add a class when the link is clicked nothing seems to happen. <section class="work_area" id="WORK"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div class="work_title wow fadeInUp animated"> <h1>demo<span style="color: #64bdec; font-weight: bolder;">33</span> PORTFOLIO</h1> <img src="images/arrow486.png" alt=""> </div> <div id="dataBox"></div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-2 no_padding"> <div class="single_image"> <img src="images/REGISTERE.png" alt=""> <div class="image_overlay"> <h2>Lorem ipsum</h4> <a id="link" href="portfolio.php" >Popup link</a> </div> </div> </div> </div> </div> </section> CSS #dataBox{ width: 800px; height: 500px; margin: auto; padding: 100px 100px; position: relative; border: 2px solid black; margin-bottom: 10px; } #pData{ background: red; width: 800px; height: 500px; margin: auto; padding: 100px 100px; position: relative; border: 2px solid black; } JS. $(document).ready(function(){ $('#dataBox').hide(); $('#link').click(function(e){ e.preventDefault(); $('div #dataBox').removeClass().addClass('pData'); console.log("link is working"); }); }); everything works other than the div showing up.
  20. Hello I would like to populate the select onload. or document ready with jquery I dont see why not working' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>xml to select</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script> $(document).ready(function() { $.ajax({ type: "GET", url: "test.xml", dataType: "xml", success: function(xml) { $("#myDiv").append("<select id='mySelect'>"); $(xml).find('value').each(function(){ var a = $(this).text(); $("#mySelect").append("<option class='nice' value='" + a + "'>" + a + "</option>"); }); $("#myDiv").append("</select>"); } }); }</script> </head> <body> <div id="myDiv"></div> </body> </html> Thank you for your advice.
  21. Jeisson

    mobile click not working

    I have a php file in a iframe from where I take a form result to the parent with following jquery code. In the example there is both appendTo to a <p> and an input element. Anyway works fine on desktop browsers as far as I have tested, but not on my phone . <script> $('#order').click(function() { var free = $('#iframeid').contents().find('#free').text(); $("<span>"+free+" </span>").appendTo("#g"); $('.g').val($('.g').val() + vapaa); }); </script> <button id="order">'order domain</button> <p> <div id="wrap"> <p id="g"></p><p> <input type="text" class="g" id="inputbox" name="input" placeholder="www.example.com" width="100px"/> </div> Any other solutions? I managed only to make these. Preferable I use input text element. The span was just for a test. Thanks.
  22. MsKazza

    Editing prepopulated form

    Hi, I have been reading up on ajax using jquery, and theres something I can't seem to find, i have a form that gets the field values from mysql when the page loads, what is the best way to use ajax to edit this form? Obv the ajax request will execute the mysql update statement but how do i get the edited data back into the form, ready to be worked with again. thanks, hope i made sense, just looking for a little direction. MsKazza
  23. Here is my java script $.each(data, function() { var myTable1 = '<tr bgcolor=#ffffff>' + '<td align=center>'+this.vehiclelog_plate+'</td>' + '<td align=center>'+this.vehiclelog_name+'</td>' + '<td align=center>'+this.vehiclelog_date+'</td>' + '<td align=center>'+this.vehiclelog_reftype+'</td>' + '<td align=center>'+this.vehiclelog_refid+'</td>' + '<td align=center>'+this.vehiclelog_description+'</td>' + '</tr>'; $('#tableField').append(myTable1); }); And here is my HTML <div id="tabs-6"> <div id="rform"> <form action = "home.php" method="post"> <fieldset> <legend>View Vehicle Service</legend><br><br> <div> <label class="label-left">Vehicle Name:</label> <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span> <input id="autocomplete" title="type "a"" class="ui-autocomplete-input" name="vehicle_service_search" autocomplete="off"> </div> <div> <button id="searchVehicleDesc" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"> <span class="ui-button-text">View</span> </button> </div> <div> <table border="1" width="650" id = "tableField"> <tr bgcolor=#c0c0c0> <td width=100 align="center"><font face="helvetica"><b>Vehicle Name</b></font></td> <td width=80 align="center"><font face="helvetica"><b>Service Type</b></font></td> <td width=80 align="center"><font face="helvetica"><b>Others</b></font></td> <td width=100 align="center"><font face="helvetica"><b>Reference No.</b></font></td> <td width=80 align="center"><font face="helvetica"><b>Reference Date</b></font></td> <td width=80 align="center"><font face="helvetica"><b>Reference Type</b></font></td> </tr> </table> </div> </fieldset> </form> </div> </div> And here is my response [{"success":1,"plate":"SIX666","name":"YAMAHA ISUZU","date":"0000-00-00","type":"Add Vehicle","id":"0","desc":""},{"success":1,"plate":"VIE597","name":"Resource id #6","date":"2014-05-09","type":"OIL","id":"332142","desc":"castroil"}] Im getting the right response from ajax but I can't put my value to a table I get an alert that says undefined.
  24. Is there some way to make it to where a user is only allowed to the site if they have donated to the site ? otherwise they get a page where it askes to donate to the site and then they can access the content in the back ? I would like to do this in PHP
  25. Basically I have a very long form select option drop down list. What I would like to do is that for each option "value", I want to remove the spaces and instead add dash to it. Doing each option value by hand would take me a very long time, so I thought I might try jquery for short cut. If you have another method, let me know. Here's what I have so far. Doesn't seem to work. <script> $(document).ready(function () { $('#model').change(function(){ var str = $(this).val(); str = str.replace(/\s+/g, "-"); }); }); </script> // here's an example of select options <select id="model" name="model"> <option value="john doe" >John Doe</option> <option value="john smith lu" >John Smith Lu</option> </select>

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.