1

I have a little problem, I have a form, and 2 types of inputs, one for text and one for the image, respectively, separated by tabs. However when typing a text can not upload the image, and when it gets uploaded image can not enter text. Follow the picture below

buttons that will always, regardless of the tabs.

then I need to send to my code only the data of the selected tabs.

I do not know how I can do this. Any idea?

I'm using CodeIgniter, just to note ...

enter image description here

Cœur
  • 37,241
  • 25
  • 195
  • 267

2 Answers2

1

If you are just sending your form to the server using normal GET or POST HTTP request all the fields from this form will be transmitted to the server anyway. Independently of it's visibility status or some other client side tricks.

But you can use javascript to transform the form somehow before sending it to the server. E. g. you can remove unnecessary fields from the form entirely or just mark them as disabled. Or you can add some field so the server can determine what tab is active on it's own and ignore the content of other tabs.

Community
  • 1
  • 1
vbo
  • 13,583
  • 1
  • 25
  • 33
-1
$('.tabs-1').click(function(){
                        $('#upload-enunciado').val('');
                        $("#input-enunciado").removeAttr('disabled');
                        $("#upload-enunciado").prop('disabled', 'disabled');
                    });

                    $('.tabs-2').click(function(){
                        $('#input-enunciado').val('');
                        $("#input-enunciado").prop('disabled', 'disabled');
                        $("#upload-enunciado").removeAttr('disabled');
                    });

                    $('.tabs-3').click(function(){
                        $('#upload-1').val(''); $("#upload-1").prop('disabled', 'disabled'); $("#alternativa-1").removeAttr('disabled');
                        $('#upload-2').val(''); $("#upload-2").prop('disabled', 'disabled'); $("#alternativa-2").removeAttr('disabled');
                        $('#upload-3').val(''); $("#upload-3").prop('disabled', 'disabled'); $("#alternativa-3").removeAttr('disabled');
                        $('#upload-4').val(''); $("#upload-4").prop('disabled', 'disabled'); $("#alternativa-4").removeAttr('disabled');
                    });

                    $('.tabs-4').click(function(){
                        $('#alternativa-1').val(''); $("#alternativa-1").prop('disabled', 'disabled'); $("#upload-1").removeAttr('disabled');
                        $('#alternativa-2').val(''); $("#alternativa-2").prop('disabled', 'disabled'); $("#upload-2").removeAttr('disabled');
                        $('#alternativa-3').val(''); $("#alternativa-3").prop('disabled', 'disabled'); $("#upload-3").removeAttr('disabled');
                        $('#alternativa-4').val(''); $("#alternativa-4").prop('disabled', 'disabled'); $("#upload-4").removeAttr('disabled');
                    });