I am so poor with JQuery & Javascript.

I have a two simple forms. One as primary form with an input type text & and a hyperlink. Another form as JQuery Modal Dialog with select option list.

All I want to do is:

If user click the hyperlink <a>See Milk</a> from the primary form, then will showing a JQuery Modal Dialog.

Then if the option list are selected from the Modal Dialog & click Submit, it should closing the Modal Dialog & showing the value on the input type at primary form.

Here is the HTML of Primary Form:

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" class="milk_a_class" data-target="#milk_modal" data-toggle="modal" href="">See Milk List</a>
</form>

I am so poor with JQuery & Javascript.

I have a two simple forms. One as primary form with an input type text & and a hyperlink. Another form as JQuery Modal Dialog with select option list.

All I want to do is:

If user click the hyperlink <a>See Milk</a> from the primary form, then will showing a JQuery Modal Dialog.

Then if the option list are selected from the Modal Dialog & click Submit, it should closing the Modal Dialog & showing the value on the input type at primary form.

Here is the HTML of Primary Form:

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" class="milk_a_class" data-target="#milk_modal" data-toggle="modal" href="">See Milk List</a>
</form>

Here is the HTML of Modal Form:

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" class="milk_a_class" data-target="#milk_modal" data-toggle="modal" href="">See Milk List</a>
</form>

• javascript
• jquery
• forms
• modal-dialog

• if I understand correctly, You want to open a Modal Dialog on the click of the hyperlink. And than show the selected option from the Modal Dialog on the primary form's input field. – maxspan Commented Apr 16, 2015 at 2:09
• Both code seem same. You can get selected value on form hide event. If you post correct code i can help you better – Manish Shukla Commented Apr 16, 2015 at 2:23
• Updated the Link as it was broken. – maxspan Commented Apr 16, 2015 at 2:52

1 Answer 1

Here is an Demo Code As per your requirement using JQuery UI.

JSFIDDLE

//HTML CODE

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" href="#">See Milk List</a>
</form> 

  <div id="dialog" >
     <select id="myselect" name="Icecream Flavours">
                <option value="double chocolate">Double Chocolate</option>
                <option value="vanilla">Vanilla</option>
                <option value="strawberry">Strawberry</option>
                <option value="caramel">Caramel</option>
        </select>
  </div>

//JQUERY

$(function() {
    var dialog = $("#dialog" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
           "Create an account": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
       //Do Something
      }
    });

    $( "#milk_a_id" ).on( "click", function() {
      dialog.dialog( "open" );
    });

     function addUser(){
         var selectedItem = $("#myselect option:selected" ).text();
        $("#milk_input_id").val(selectedItem);
          dialog.dialog( "close" );
     }
  });