Solved

json value get in input box

Posted on 2016-10-12
6
44 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 51

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 51

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 108

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 51

Expert Comment

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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now