Hidden input text submit with jquery

Question

I have a javascript var that returns the value of a input text ID "ven_prod", with the value of "ven_prod" I need to make a search in my database without submiting the page.

I can't use a javascript var in the java code, so i've setted the value in a hidden input text ID "prod_hidden", but I need to submit it to get the value with the java code and make the search...How do I do it ?

<input id="ven_prod" type="text" placeHolder="Código de Barras" autofocus>
        <input id="prod_hidden" type="text" value="">

        <script>    
            $('#ven_prod').keypress(function (e)
                    {
                        if(e.keyCode==13)
                        {
                            var table = document.getElementById('tbprodutos');
                             var tblBody = table.tBodies[0];  
                             var newRow = tblBody.insertRow(-1);
                             var prod = document.getElementById('ven_prod').value;
                             var qtd = document.getElementById('ven_qtd');
                             var barra = prod.substring(0, 12);
                             var num = prod.substring(14, 16);
                             document.getElementById('prod_hidden').value = barra;
                             var ref = <%=pd.getProdutosBarra(request.getParameter("prod_hidden")).getPro_referencia()%>;
OR
                             var ref = <%=pd.getProdutosBarra(JS VAR 'barras HERE).getPro_referencia()%>;

                             if(prod.length==16) { 
                               var newCell0 = newRow.insertCell(0);  
                               newCell0.innerHTML = '<td>'+ref+'</td>';

                               var newCell1 = newRow.insertCell(1);  
                               newCell1.innerHTML = '<td>'+num+'</td>';  

                               var newCell2 = newRow.insertCell(2);  
                               newCell2.innerHTML = '<td>'+qtd.value+'</td>';

                               var newCell3 = newRow.insertCell(3);  
                               newCell3.innerHTML = '<td>R$ '+valor+'</td>';

                               var newCell4 = newRow.insertCell(4);  
                               newCell4.innerHTML = '<td>'+barra+'</td>';

                                document.getElementById('ref').value = '6755';
                                document.getElementById('imgsrc').src = './?acao=Img&pro_id=1';
                                document.getElementById('valortotal').value = 'Testando novo valor';
                                document.getElementById('ven_prod').value = '';
                                document.getElementById('ven_qtd').value = '1';

                            } else {

                                document.getElementById('ven_prod').value = '';
                                document.getElementById('ven_qtd').value = '1';
                                alert("Código de barras inválido!");
                            }

                            return false;
                        }
            });
        </script>

Yes, I'm not using jquery yet @Pit Digger, but I think that I need to use jquery to do it... — Lucas Silva de Freitas, Oct 21 '13 at 03:54
u can try this link ajax call using pure javascript http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_callback — Shashank, Oct 21 '13 at 03:57
use a simple code: `$('.someClass').submit()` or `$('#someId').submit()` — Ulug'bek, Oct 21 '13 at 04:04

score 1 · Answer 1 · answered Oct 21 '13 at 04:05

1

you can make ajax call using jQuery as follows. will submit your form data as well along with hidden elements.

var form = jQuery("#YourFormID");
jQuery.ajax({
        type: "POST",
        url: form.attr("action"), 
        data: form.serialize(), // serializes the form's elements.
        success: function(data) {
            console.log(data);
        }
});

answered Oct 21 '13 at 04:05

Ahsan Shah

3,931
1
34
48

my problem don't is submiting a form with hidden elements, the problem is that I need to recover in java one input parameter without submiting the form... If I make this call with ajax, the page will reload ? Or I will be able to recover any value with "request.getParameter('id') on java ? – Lucas Silva de Freitas Oct 21 '13 at 04:12
@LucasSilvadeFreitas, no, if you use ajax the page will not get submitted and won't reload. – th1rdey3 Oct 21 '13 at 04:18
@th1rdey3, How do I call in my page this ajax function ? – Lucas Silva de Freitas Oct 21 '13 at 04:22
you have to attach it with a event. for example, a button click. – th1rdey3 Oct 21 '13 at 04:28

score 0 · Answer 2 · edited May 23 '17 at 12:05

a) You can use like that:

$("#pro_barras").bind("change paste keyup", function() {
   //$('.someClass').submit();    
   $('#it_is_form_id').submit();   // it call form's submit function
});

The piece of code detected when input text change. To more info see also here If you want to customize form submit function

$('#it_is_form_id').bind("submit", function(){
  //alert("submit");
  // make here simple ajax query
  return false; //<-- it is used so that default submit function doesn't work after above code. 
});

Don't forget, all code will be inside

<script>
  $(function() {
   // your code must be here
  });
</script>

b) If you don't want to use form, you can do like that:

<script>
    $(function() {
        $("#pro_barras").bind("change paste keyup", function() {     
            var text = $("#pro_barras").val();
            $.ajax({
                type: "POST",
                url: "yourUrl",
                data: text,
                success: function(res){
                    console.log(res);
                },
                error: function(err){
                    console.log(err); 
                }
            });
        });

    });
</script>

Making simple ajax query:

score 0 · Answer 3 · answered Oct 21 '13 at 04:58

0

value of a input text named "pro_barras"

Are you sure? Look at this:

<input type="hidden" id="pro_barras">

its not the name of the input, its the ID. You can try using this:

<input type="hidden" name="pro_barras">

And now, you can use $.ajax to send the request to a new page, where you will request the data from the database. And then you'll write the response, and take it back on the first page.

What it will do depends on how you use it. I will try to ask you to simply use serialize() method by jQuery API, this will let you to create a simple URL param with the data from the form, use it as:

$.ajax({
  var data = $('#formid').serialize(); // serialize the form..
  url: "link/to/file.cshtml",
  data: data,
  success: function (datares) {
    $('#resultid').html(datares); // write the result in the element
  }
})

If you want to get only the value from that field you can use

var data = $('input[name=pro_barras]').val();

without submiting the page.

Your page will have to be submitted when you click on input type="submit" button. To prevent that you can use

$('#idofsubmitbutton').click(function () {
  return false; // stop execution and stay on page..
}

Then the ajax will continue, other method is to remove the input type="submit" and use <button></button> which won't cause any submission.

get the value with the java code

This isn't java :) Its JavaScript, they are totally different. :)

answered Oct 21 '13 at 04:58

Afzaal Ahmad Zeeshan

15,669
12
55
103

I know that its JS, but its the problem, I need to get the information from JavaScript to JAVA without submiting the page... I need to do a search on my database when the user finish to input the "pro_barras" field, but If I submit the page I will lost a table created early..I need to get the parameter spelled by the user without submiting the page, but I need to use it on JAVA code.. Like this. var ref = <%=pd.getProdutosBarra(request.getParameter("pro_barras")).getPro_referencia()%>; – Lucas Silva de Freitas Oct 21 '13 at 05:05
You might have read `without submitting the page` tag in my answer, it has a `return false` which you need to stop page submission. Or try replacing `input` with a `button` so that form does not reloads.. – Afzaal Ahmad Zeeshan Oct 21 '13 at 05:06
I just updated the question with more code...I dont want to send a request to a new page, I only want to get to my server ONE information from ONE input text or input hidden to do a search without losing the table on the page – Lucas Silva de Freitas Oct 21 '13 at 05:13
-_- so what do you think, Ajax is meant for? Ajax does this job for you! So that you stay on the page and get the results from any other page without having to load it.. – Afzaal Ahmad Zeeshan Oct 21 '13 at 05:14
But I don't have other page D: – Lucas Silva de Freitas Oct 21 '13 at 05:16
Then why not first create it :) Then send the request to it and load the data :) – Afzaal Ahmad Zeeshan Oct 21 '13 at 05:17

score -2 · Answer 4 · answered Oct 21 '13 at 04:04

-2

You could also add a custom attribute to your input element (in Jquery):

<input type='text' id='pro_barras' customattr='myCustomInfo'/>

<script>
 var customValue = $('#pro_barras').attr('mycustomvar');
alert(customValue);
</script>

Fiddle

answered Oct 21 '13 at 04:04

KnowHowSolutions

680
3
10

Hidden input text submit with jquery

4 Answers4