Help on VIew and JS

I have a view...that build a few controls...and has two buttons..with JS events..that need to pass the values from the view in the  javascript function calls..

Please help.


Here is the section of the view where the controls are defined mostly.  My insert call for example here need to pass the contactid..which will be on a hiddenfield passed into the page from another page when this page is rendered.
The other values the user will select.  One is a dropdownlist populated from my controller/model.
The other is a dropdown with static values.
ANd finally the last column is just a decimal value input on screen.
There is also a client value passed fro mthe user selection of an autocomplete dropdown...not seen in this view.  Those values all need to go in my insert ...which is just an ajax call back to a controller method from javascript.

 <table id="new-row-template" style="display:none">
        <tbody>
            <tr>
                <td>
                    <label></label> 
                </td> 
                <td>
                   @Html.DropDownList("DropDownListID", new SelectList(ViewBag.DDLRoles, "Value", "Text"), "--- Please Choose an Item! ---")
                </td>
                <td>
                    <select id="selectdesignate" name="selectdesignate" class="form-control">
                        <option value="1"></option>
                        <option value="2">Primary</option>
                        <option value="2">Secondary</option>
                    </select>
                </td>
                <td>                  
                    <input type="number"  placeholder="0.00" step="0.01"  id="txtAllocation">%
                </td>
                <td>
                    <button type="button" id="btnInsertContactEntity" class="btn btn-primary btn-xs actionButton" onclick="javascript:return insertContactClient(contactId,clientName);">Save</button>                  
                </td>
                <td>
                    <button type="button" id="btnDeleteContactEntity" class="btn btn-danger btn-xs actionButton"  onclick="javascript:return RemoveContactClient(contactId,clientName);">Remove</button>
                </td>
            </tr>
        </tbody>
    </table>   

Open in new window

LVL 11
Robb HillSenior .Net DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robb HillSenior .Net DeveloperAuthor Commented:
I added  this...but do not seem to be getting the value ---

//Dropdownlist Selectedchange event
$('#ddlRole').change(function () {
// Get Dropdownlist seleted item text
$("#Text").text($("#ddlRole option:selected").text());
  var ddlText = $("#Text").text($("#ddlRole option:selected").text());
// Get Dropdownlist selected item value
$("#Value").text($("#ddlRole").val());
})
})

Open in new window

0
Vish KTechnologistCommented:
It will be easy if you wrap it in a <form> then use jquery serialize function.

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robb HillSenior .Net DeveloperAuthor Commented:
not sure I understand
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Robb HillSenior .Net DeveloperAuthor Commented:
Also here is where I load up the dropdownlist in my controller.

I simply need to grab the selected value ...and pass it in the javascript function......that is associated to the save button


 IContactEntityEditService contactEntityEditService = DependencyResolver.Current.GetService<IContactEntityEditService>();
            List<string> roles = contactEntityEditService.GetContactLinkedEntitiesRoles();

            IEnumerable<SelectListItem> selectRoles = roles
                                         .Select(i => new SelectListItem()
                                         {
                                             Text = i.ToString(),
                                             Value = i
                                         });
            ViewBag.DDLRoles = selectRoles;

Open in new window

0
Vish KTechnologistCommented:
Im not really expert in asp.net. But i can help you with js.

If  you are trying to get data from form inputs you have on page, it is easier to get with
https://api.jquery.com/serialize/
Or
https://api.jquery.com/serializeArray/
0
Vish KTechnologistCommented:
And if you are trying to set value for your dropdown select, use $('#text').val(val);
0
Julian HansenCommented:
I am not clear on what you are asking?

You mention AJAX but have not posted any code that includes AJAX.

$("#Text").text($("#ddlRole option:selected").text());

Open in new window


Why are you trying to get the text value of the select? Surely if you have the selected value you can find the text value using this back at the server.

and has two buttons..with JS events..that need to pass the values from the view in the  javascript function calls..
Which values?

My insert call for example here need to pass the contactid..which will be on a hiddenfield passed into the page from another page when this page is rendered
So you have a hidden field somewhere on the page but not shown in the source you posted. You are passing contactid in your insert but we cannot see where how that is defined.

The other values the user will select.  One is a dropdownlist populated from my controller/model.
The other is a dropdown with static values.
ANd finally the last column is just a decimal value input on screen.
There is also a client value passed fro mthe user selection of an autocomplete dropdown...not seen in this view.  Those values all need to go in my insert ...which is just an ajax call back to a controller method from javascript.
You are describing the form but not leaving us any clear indication of exactly what you are trying to do.

Try summarizing what it is you want to do first - for instance
" I have a form with X controls. I need to send the value of these controls by AJAX to the server when button Y is clicked.
In the form below you will see I have a hidden field called Z - what I want is that when you click Y the javascript code fetches the values from X, Z and A and submits them using this AJAX call"

Or similar - so we can get an idea what it is you are wanting.
0
Julian HansenCommented:
To get a value from a select and send it by ajax you can do this

$(function() {
   $('EventToTriggerAjax').click(function() {
        var val = $('#ddlRole').val();
        $.ajax({
           url: UrlToSendDataTo,
           data: {NameServerExpectsForValue: val},
           type: 'POST'
        }).then(function(resp) {
           // handle response (if any)
        });
   });
});

Open in new window

0
Robb HillSenior .Net DeveloperAuthor Commented:
I have the 4 controls on the View as I pasted above.

I need to get the values of these controls when the user clicks select...which will call a javascript function..that will pass the values chosen..


If this way does not work..then what other way.
0
Julian HansenCommented:
As Vish K mentioned above you  can wrap your controls in a form and just do a serialize on them. Adapting my code above
$(function() {
   $('EventToTriggerAjax').click(function() {
        var data = $('#idofform').serialize();
        $.ajax({
           url: UrlToSendDataTo,
           data: data,
           type: 'POST'
        }).then(function(resp) {
           // handle response (if any)
        });
   });
});

Open in new window

This code needs to be customized for your setup but in essence it is correct. When the event that triggers the action of AJAXin'g the data fires you get the data from the form by serializing it and then simply pass that data in the AJAX call.
0
Robb HillSenior .Net DeveloperAuthor Commented:
I dont think we are talking the same thing.


So I have this function  insertContactClient

<button type="button" id="btnInsertContactEntity" class="btn btn-primary btn-xs actionButton" onclick="javascript:return insertContactClient(contactId,clientName,);">Save</button>                

When I click this button ......on the client I want to pass something like this as one of the params

 $("#ddlRole :selected").text();


Can I do that?
0
Julian HansenCommented:
When I click this button ......on the client I want to pass something like this as one of the params  
As one of which parameters?

I am assuming you mean one of the parameters to the insert function?

Yes, but I ask again why do you want to pass the Display value of the select and not its actual value?

I would rather do it with a bound event handler
Example code only
$(function() {
   $('#btnInsertContactEntity').click(function(e) {
     e.preventDefault();
     var contactId =  $("#ddlRole").val();
     var clientName = // get contact Name here
     insertContactClient(contactId,clientName)
   });
});

Open in new window

0
Slick812Commented:
greetings  Robb Hill, , ,  I am still somewhat confused by what information you need to get from the select input, and how you need to transfer - pass to next operation, I can see some about your Click function, to start that process to get a text data, and AJAX it,
BUT
I seem to see that you want the <option> TEXT display and not the VALUE data,
Is this correct, if it is, then I would suggest that you change your server processes for ajax to use the VALUE and not the TEXT to get results.

But maybe I do not really get what you need at all? ?

can you say a small explain about what is in this select list (products, names colors) AND what the server is doing with the AJAX, to send back a response? ?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.