Dynamicaly choose select option value as parameter

Mausino

Hi, i am fighting few days with one problem to get from drop down the option value on send button

Still send me as parameter first option... no matter if i choose other one. for input fields works this great but i stack on drop-down... tried xyz stack-overflow possibilities.... but without any solution...

Please how to solve that i can dynamicaly send dropdown value to parameter ?

                    <select id="getSearchModule" name="m"
                        <option value="property" >Properties</option>
                        <option value="todo" >Todos</option>
                        <option value="landlord" >Landlords</option>
                        <option value="offer" >Offers</option>
                        <option value="opportunity" >Opportunities</option>
                    </select>

ajax: {
     url: '{{ path('test_service') }}',
     type: 'POST',
     async: true,
     data: function ( d ) { d.getSearchModule = $('#getSearchModule').val(); }
}

Thank you

kthorngren

I placed your code snippets in this test case and it looks like the parameter changes. You can look at the network inspector headers to see the parameter value changes. Please update the test case or provide a link to your page so we can help debug.
http://live.datatables.net/gefelodu/1/edit

Kevin

tangerine

<select id="getSearchModule" name="m"

You are missing the closing </select>

Mausino

@tangerine sorry... i had complex select for more lines.. i catted it only for that example will shorter ... original version had > on the end my issue that i did mistake in example

 <select id="getSearchModule" name="m"
      class="form-select form-control-lg form-control-solid"
      style="background-color: white; border-color: #a1a5b7; width:200px; text-align:center"
>

Mausino

@kthorngren this line code work fine...

$('#getSearchModule').on('change', function() {
                        table.ajax.reload();
                    });

but i found issue that is in submit phase

$('#getSearchModule').on('submit', function() {
                        table.ajax.reload();
                    });

please look on
http://live.datatables.net/vecateke/1/edit

on live preview
i did this -> in console firefox network,(ctrl+shift+e), checked persist log, request raw
What i see... that on load
first post -> header -> request tab-> getSearchModule=todo
now i changed drop-down to landlord
second post -> header ->request tab ->getSearchModule=landlord
now submit by button form
third post -> header -> request tab -> getSearchModule=todo
but i expected landlord

Also is very interesting fact.. that i load page
fist time i get by persist log in network
i see in request getSearchModule=todo
now i choose offers from dropdown,
i see in request getSearchModule=offer
now reload page
i see in request getSearchModule=offer
now i submit form
i see in request getSearchModule=todo

Do i something wrong or is it some issue of DataTables ???

kthorngren

You code doesn't have a form action. Take a look at this form tutorial. Notice in the test case that the page becomes blank when clicking submit. This has nothing to do with Datatables.. Instead of using a form and trying to submit maybe you can just have the select list and a button to submit, like this:
http://live.datatables.net/fofurome/1/edit

Kevin

Mausino

@kthorngren i have there form http://live.datatables.net/vecateke/1/edit

hmm.. please look on image as i see this link

now i "created milestone" ctrl + s (sorry this editor is little bit new for me)

got new link http://live.datatables.net/vecateke/2/edit

the result is the same as i wrote above... doing i am something wrong in testing ?

JLegault

@Mausino I visited your link and it looks like you still have the <form> tags on your page.

Take a look at this link: http://live.datatables.net/fisekiwa/1/edit

I removed the <form> tags and now the page does not disappear when submit is pressed.

You'll need to build your own javascript/jQuery function to handle and post your form now that it is not in the <form> tags but I believe that is the only way you're going to get a submit button that doesn't post to the <form> target.

Mausino

@JLegault
if you removed the <form> tags... now if you check the network parameters eg firefox that you'll see that on submit button nothing happens... that means... page stay as is but i am working with serverside data and must some parameters to send to backend by 3 ways ...

by harcoded parameters in dataTables ajax data parameters,
or as in form on submit and handled by data parameters in ajax data
or on reload of page and handled by data parameters in ajax data

no other ways i don't see possible... i am fighting that if i will there input field .. that has any issue if you write there something and post it..

<input type="search" name="d" id="getSearchDistance" value="some value" />

d.getSearchLocation = $('#getSearchLocation').val();

i am fighting only with drop downs.... and i have bad idea that radio buttons will also have some issue behavior for parameters ... but step by step

now only way i see how to solve this issue is add inside <option value='something' selected='selected'> and now i is working ... now i need now handle how remove and add dynamically this attribute selected='selected' to option...

my problem is also that i send back requested parameters by "fake column" which i hiding in Datatables from serverside by drawback

 drawCallback: function() {  window.form_data = this.api().rows().data(); }

the data from datatable are creating me markers on maps.. taht means on every change on datatables will changed automatically markers positions or position...

also by my 'fake column' i wand prefill the form values on reload of datatable... that user will see their changes sent by form on new reload of page prefilled...

only last part which block my long journey are dropdowns ( later maybe radio buttons)

tangerine

Your form needs an "action" attribute.
https://www.w3schools.com/html/html_forms_attributes.asp

Mausino

@tangerine the best think on symfony 5+ in my case is that you can handle this data by request object.. here the action in my case i not needed because all post is handled by Datatables (ajax url part) which take the parameters from FORM and will post them to ajax defined url which i need and there (in backend) is the logic to handle all operations that bring me back json for dataTables.

What i need to solve is, why datatable send by post as parameter still first option in dropdowns (select element) and not this which is selected... if you look above you can test by console.. as i am trying with @kthorngren i am using firefox ... to look what POST data tables to backend ... and this is my main pain...

kthorngren

I updated your example:
http://live.datatables.net/vecateke/2/edit

I added the following console log statements:

  $('#getSearchModule').on('submit', function() {
    console.log('submit')
    table.ajax.reload();

  });
  
        $('#getSearchModule').on('change', function() {
          console.log('change')
    table.ajax.reload();
   });

In this example:
http://live.datatables.net/vecateke/3/edit

You will see that when changing the input the change event executes. But when clicking the submit button the submit event doesn't execute. This is outside of Datatables. As both Tangerine and I suggested you need an action attribute. I don't think a form is what you want if all you need is to use ajax.reload(). Will this solution not work for you?
http://live.datatables.net/fofurome/1/edit

Kevin

Mausino

Hi @kthorngren

Thank you for your example, but i disagree with you that on submit button is outside of dataTables. After hours spend with many tries i found partially solution

http://live.datatables.net/paseworu/2/edit

There is the form and i added the selected="selected" to option. now it post also to data tables on submit (i think)...

Now i am trying find way how unselect option and add this to other option...

I see the light on end the tunnel with this... but i found that normal 'selected' isn't working.... must be selected='selected' in option..

Please if any has working solution to remove and add the selected part into option on click/change of drop-down has the beer

kthorngren

but i disagree with you that on submit button is outside of dataTables.

The form is an HTML process which is independent of Datatables. Datatables doesn't know about it. Datatables didn't create it. This is why I say its outside of Datatables.

There is the form and i added the selected="selected" to option. now it post also to data tables on submit (i think)...

Take a look at this forms tutorial. The tutorial states this about the submit button:

The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.

You haven't defined a handler for the submit button using the action attribute. Please describe what you expect to happen with the submit button.

Now i am trying find way how unselect option and add this to other option...

This Stack Overflow thread has many suggestions. I updated your example to show one way using $('#getSearchModule').val('offer');:
http://live.datatables.net/paseworu/3/edit

Stack Overflow is a good place to learn how to use standard HTML, Javascript and jQuery methods.

This is the third time I've asked... Will this solution not work for you?
http://live.datatables.net/fofurome/1/edit

Kevin

gyrocode

@Mausino, I have updated the example by @kthorngren and made the following changes:

• Prevent submit button from submitting the form. Additionally submit event handler seems not even necessary since the table is reloaded on select element change.
• Added mising closing </select> statement.

See this example for code and demo.

---

See more articles about jQuery DataTables on gyrocode.com.

Mausino

First i want thank you @kthorngren and @gyrocode

I want apologize you to tooked your time..but i leaned so much new thing because of you.

The issue was on my side..because I built on faulty conclusions from code which now i know that worked with luck and this took me to wrong concept.

Now i understand that the submit action will send the request on 'backend' which we can define by 'action' attribute in form and after page starts new render(draw) from beginning....

Now i know that because i am using initComplete() will first render the html page and after will render the dataTables which will POST the request on 'backend' (eg it should be only json file) or as in my case php Symfony v5 (where i dont need action in form) where i prepare the json object for DataTables and sends it. After when receive the object will DataTables draws with data.

Now i know that exists only 2 way to get data from FORMS to parameters.

1. Redraw DT or Reload ajax the dataTables in real time on one/same page..

2. Serverside world. If i needed also get other objects to my page from backend that i needed submit form... and here was the problem that i misunderstood the processes that i need send data by submit request to backend, handle it and response it before the datatable will initialized on page... dataTables will look on form which was rendered by data from response of backend and will make POST request to own url and look and took the parameters which i defined.

That was the main problem why i cant send the parameters which i expected after submit button.. because start load/render from default and any my before changes on DOM (like click, change etc) after submit was lost. Only options was proceed this data on backend and return by respond changed.. that dataTables can on initialization took them and send by POST them as new parameters.

Now i changed my workflow and works great, as i expected.

Thank you all which help me understand and find the answers