www.webdeveloper.com
Results 1 to 4 of 4

Thread: Pass JavaScript selected fields to PHP

Hybrid View

  1. #1
    Join Date
    Sep 2013
    Posts
    3

    Pass JavaScript selected fields to PHP

    Hi

    Basically I have downloaded a script that converts a drop down list into checkboxes. I have the code working fine, but I'm having difficulty in passing what is checked/selected to a PHP loop to upload to a MySQL database.

    The form element is this:

    Code:
    <label for="Borough">Domiciliary service available in the following Boroughs</label>
    <select class="selectlong" multiple="multiple" name="borcodes[]" id="Borough"> 
            <?
                    $BRQuery = @mysql_query ("SELECT * FROM B_TABLE ORDER BY Title ASC",$mdbc);
                    while ($BRPrint = mysql_fetch_array ($BRQuery)) {
            ?>
                    <option value="<?php echo $BRPrint['BCode'] ?>"><?php echo $BRPrint['Title'] ?></option>
            <? } ?>
    </select>
    The JavaScript function to change the dropdown to a checkbox is this:

    Code:
    <script>
    $( document ).ready(function() {
    	$("#Borough").multiselect({
    	   position: {
    		  my: 'left bottom',
    		  at: 'left top'
    	   },
    		noneSelectedText: "No Boroughs chosen",
    		selectedText: "# of # Boroughs chosen",
    		show: ['fade', 600],
    		height: 260
    	});
    });
    </script>
    And the PHP loop is this:

    Code:
    $BCodes = mysql_real_escape_string($_POST['borcodes']);
    $SPCodeQuery = mysql_query ("SELECT SPCode FROM S_TABLE ORDER BY SPCode DESC LIMIT 1",$mdbc);
    $SPCodePrint = mysql_fetch_array ($SPCodeQuery);
    $SPCode = $SPCodePrint['SPCode'];
    if (isset($BCodes)) {
    	foreach ($BCodes as $borcodes) {
    		$InsertB = mysql_query ("INSERT INTO TABLE_B_V_S (BCode, SPCode) VALUES ('".$borcodes."','".$SPCode."');");
    	}
    }
    The developer of the code said to use:

    Code:
    $( document ).ready(function() {
    		var array_of_checked_values = $("#Borough").multiselect("getChecked").map(function(){
    			 return this.value;    
    		}).get();
    });
    But I'm not quite sure if this should go into the original function or on it's own.

    Does anyone know what I need to do to get the checked boxes into an array and then pass this array to PHP please?

    Cheers
    G

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    since you provide only several pieces of code, it's not clear how your js converts the drop down list into checkboxes and why do you need such convertion at all. so i've tried to reconstruct the js convertion to demonstrate how to pass the checked boxes' values to the php-script. the server-side script does not make mysql queries but it returns the recieved $_POST['borcodes'] so we can see whether the js works or not.

    html + javascript

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;}
    p{color:green;}
    p b{color:red;}
    #result{text-align:center;padding:50px;}
    #snd, input[type=checkbox]{cursor:pointer;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    function doc(id){return document.getElementById(id);}
    function getPositionData(element){var left=element.offsetLeft;var top=element.offsetTop;for(var parent=element.offsetParent;parent;parent=parent.offsetParent){left+=parent.offsetLeft;top+=parent.offsetTop;}return{left:left,top:top,width:element.offsetWidth,height:element.offsetHeight};}
    $(document).ready(function(){
    var arr=[],sel=doc("Borough"),
    tt=getPositionData(sel)['top'],ll=getPositionData(sel)['left'],
    hh=getPositionData(sel)['height'],ww=getPositionData(sel)['width'];
    $('#Borough').after('<div id="temp"></div><br /><br /><input type="button" id="snd" value="Send" />');
    $('#Borough option').each(function(){
    $('#Borough').next().append('<input type="checkbox" value="'+$(this).val()+'" /> '+$(this).text()+'<br />');
    });
    $('#Borough').next().css({
    'display':'inline-block',
    'width':'auto',
    'height':hh+'px',
    'padding':'5px',
    'overflow-y':'scroll'
    });
    alert('Replacing the SELECT with a set of checkboxes');// just for demonstration
    $('#Borough').remove();
    $('#temp').attr('id','Borough').css({'border':'1px solid #ccc','border-radius':'5px'});
    $('#snd').click(function(){
    var chb=$('#Borough input:checked').map(function(){return $(this).val();}).get().join(", ");
    if(chb.length>0){
    $('#result').html('<h1>Uploading values...</h1>');
    $('p').html('<b>jQuery.post() will be:</b> jQuery.post("here_goes_the_php_script_url",{"borcodes[]" : ['+chb+']},function(){here goes callback function});');
    $.post("php.php",{"borcodes[]" : [chb]},function(data){$('#result').html('<b>The server-side script answer is:</b> '+data);});
    }
    else{$('p').html('<b>Select at least one checkbox!</b>');}
    });
    });
    </script>
    </head>
    <body>
    <p></p>
    <form>
    <label for="Borough">Domiciliary service available in the following Boroughs</label>
    <select class="selectlong" multiple="multiple" name="borcodes[]" id="Borough">
    <option value='elem_1'>elem 1</option>
    <option value='elem_2'>elem 2</option>
    <option value='elem_3'>elem 3</option>
    <option value='elem_4'>elem 4</option>
    <option value='elem_5'>elem 5</option>
    <option value='elem_6'>elem 6</option>
    <option value='elem_7'>elem 7</option>
    <option value='elem_8'>elem 8</option>
    <option value='elem_9'>elem 9</option>
    <option value='elem_10'>elem 10</option>
    </select>
    </form>
    <div id="result"></div>
    </body>
    </html>
    php

    Code:
    <?php
    $output='';
    if(isset($_POST['borcodes']) && !empty($_POST['borcodes'])){
    $output.=var_dump($_POST['borcodes']);
    }
    else{$output.='$_POST ERROR';}
    echo $output;
    ?>
    live demo
    Last edited by Padonak; 09-11-2013 at 12:06 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Sep 2013
    Posts
    3
    Hi Padonak

    Thank you for getting back to me. The use of a checkbox is so that the user can select multiple fields from the drop down list.

    This code is great, thank you.

    G

  4. #4
    Join Date
    Sep 2013
    Posts
    3
    Also I didn't post the code, as the website I got the plugin from was down. This is the website:

    http://www.erichynds.com/examples/jq...ndex.htm#basic

    Cheers
    G

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles