Solved

json value get in input box

Posted on 2016-10-12
6
72 Views
Last Modified: 2016-10-15
https://www.experts-exchange.com/questions/28972605/Json-result-print-in-html.html
solution of this question append div. i want a hidden input box store value.
 i try but i don't get right solution.
actually  i want to send this value in other page by get or post.
0
Comment
Question by:Amita Singh
  • 3
  • 2
6 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41839836
If I understand you correctly - you want the hidden input to store the selections the user makes from the typeahead?
So if they have PHP, JavaScript, Jquery in the selection you want to be able to send these to another post?

Is that correct?
0
 
LVL 2

Author Comment

by:Amita Singh
ID: 41839878
yes
0
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41840126
I am confused in the sample I posted in the referred question is already adding the value to an input that can then be sent back.

Consider this sample
HTML
  <form action="reflect.php" method="post">
    <div class="form-group">
      <input type="text" id="skills" name="skills" class="col-md-12" value="" readonly style="width:100%; background-color:#ccc;padding:1px 3px; margin-left:3px; cursor:pointer; float:right; margin-left:5px;">
      <span style="float:right; margin-top:-25px; font-weight:bold;font-size:15px; cursor:pointer; position: relative;" id="clear_skills" title="Clear Skills">&nbsp;X&nbsp;</span>
      <br/><br/>
      <div class="skills-container"></div>
      <input type="text" name="typeahead" value="" class="typeahead tt-query form-control col-md-12" autocomplete="off" placeholder="Add More Skills" style="width:200px;"/>
    </div>  
    <div class="alert alert-danger" id="error" style="display: none">You have already selected this skill.</div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Open in new window

<script>
var counter = 0;
$(function() {
  $('input.typeahead').typeahead([{  
      name: 'typeahead',
      valueKey: 'skill',
      remote: {
        url: 't1638.php?key=%QUERY',
        filter: function (parsedResponse) {
          $('#error').hide();
            
            return parsedResponse;
        }
      },                                            
  }]);

  $(".typeahead").focusin(function(){
    if(this.value!='') {
      var skills = $("#skills").val();
      var ifSkillAlreadyExist = skills.indexOf(this.value);   // ifSkillAlreadyExist ending till , comma
      //console.log((checkString.match(/,/g) || []).length);       // Check Occurance count of , (comma)
      if(ifSkillAlreadyExist == '-1') {
        $('.skills-container').append(
        $('<div/>', {
          class: 'skill-item',
          html: this.value
          }).append(
            $('<a/>', {
              class: 'skill-remove glyphicon glyphicon-remove'
            })
          )
        );
        
        if (skills.length > 0) skills += ', ';
        $("#skills").val(skills + this.value);
      } 
      else { 
        // Don't do this - rather add an error to the page
        //alert('You have already selected this skill.');
        $('#error').show();
      }
    }
    this.value = "";
  }); 
  
  $('body').on('click', '.skill-remove', function() {
    var val = $(this).parent().text();
    $(this).parent().remove();
    var inp = $('#skills').val().split(',');
    var res = [];

    while(inp.length > 0) {
      var top = inp.pop().trim();
      if (top != val) {
        res.push(top);
      }
    }

    $('#skills').val(res.join(', '));
  });
});
</script>

Open in new window

Working sample here
0
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
LVL 109

Expert Comment

by:Ray Paseur
ID: 41840158
i want to send this value in other page by get or post
A simple jQuery example showing just the moving parts of the AJAX communication is profiled in this article.
https://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
LVL 2

Author Closing Comment

by:Amita Singh
ID: 41844647
Thank you.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41844726
You are welcome.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
PHP Curl to output a url 7 46
How to create a slidershow with the use of the property cover in css 15 46
Wordpress Query 5 25
Autocomplete with Jquery Question 2 19
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question