0

I have a form with four <input type='submit'/> buttons and action='updateEstado.php'. Also, I have some jQuery code that launches when I click a button.

<!-- CHANGE STATUS MODAL MENU --> <div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3> </div> <form action="updateEstado.php" method="post"> <div class="modal-body"> <div class=" text-center"> <div class="container-fluid"> <div class="row"> <div class="col-md-12 text-center"> <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:YellowGreen; color:white;" value="ACTIVAT"> </div> </div> <div class="row"> <div class="col-md-12 text-center"> <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Tomato; color:white;" value="PENDENT MIQUEL ALIMENTACIÓ"> </div> </div> <div class="row "> <div class="col-md-12 text center"> <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:SkyBlue; color:white;" value="PENDENT ADDCOM"> </div> </div> <div class="row"> <div class="col-md-12 text center"> <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT"> </div> </div> <div class="row"> <h5 id='codigosSeleccionados'></h5> </div> </div> </div> </div> </form> </div> </div> </div> </div> <script> $('#cambiarestado').click(function(){ event.preventDefault(); // Get the value of the input fields var inputvalue = $(this).attr("value"); // Send Ajax request to updateEstado.php, with value set as 'input' in the POST data $.post("updateEstado.php", {estado: "DESACTIVAT", codigo: "38"}); alert(inputvalue); }); </script>

I have updated the jquery code with this new line: event.preventDefault();

Now when I launch the updateEstado.php the console show this message:

enter image description here

If I delete this line: $.post("updateEstado2.php", {estado: "DESACTIVAT", codigo: "38"});

The show message disappear. It's clear this is the problem. The solution¿? I do not...

Improve this question
3
  • 1
    You have to use unique id names. Instead use class as the trigger. Commented Oct 20, 2016 at 15:28
  • Submit buttons submit the form as is. Your jQuery code is never executed. You need to add an onsubmit function to the form itself: w3schools.com/jsref/event_onsubmit.asp Additionally, ids must be unique. Commented Oct 20, 2016 at 15:29
  • Yes the code is executed because I can show the alert message into the jquery. Commented Oct 20, 2016 at 15:34

3 Answers 3

Reset to default
1

The submit button submits the form if it isn't blocked. You can block it with preventDefault().

for example:

$('#cambiarestado').click(function(event){ event.preventDefault(); ...rest of your code ...
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

It doesn't work when I put event.preventDefault(); the jquery code doesn't run when I click the button. The problem is inverse, when I click the button the jquery will run and the form input action doesn't run
Are you sure you don't just have a JS bug? This answer should work (make sure you add an event parameter to your click callback).
1

If you really want to submit the form via JavaScript, instead of the standard HTML form submit, you have to do several things:

  1. add an onsubmit function to the form
  2. use event.preventDefault() to cancel the normal form submit
  3. get the values from the form
  4. do a manual form submit via jQuery

BUT I think you want to do something far more trivial: Submit two values, regardless of which option the user clicks.

The easiest way to archieve this, is to use hidden inputs:

<input type="hidden" name="estado" value="DESACTIVAT"> <input type="hidden" name="codigo" value="38">
Improve this answer

2 Comments

I want to submit form via javascript because I have an array to sent to php form.
Probably check this out then: developer.mozilla.org/en/docs/Web/API/FormData/FormData
0

If button type is submit, when you click in the button form will be submited to updateEstado.php without the values of $.post. You can submit the form with JQuery and send the data:

<form id="form" > <div class="row"> <div class="col-md-12 text center"> <input type="submit" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT"> </div> </div> </form>

Function:

$('#form').on('submit', function(e){ $.post("updateEstado.php", {estado: "DESACTIVAT", codigo: "38"}); });

Or, if you want to get the values of button:

<form id="form" > <div class="row"> <div class="col-md-12 text center"> <input type="button" id="cambiarestado" class="btn btn-modal-estado" style="background-color:Gray; color:white;" value="DESACTIVAT"> </div> </div> </form>

Note type is button, and this way form is not submited.

$('button').click(function(){ var inputvalue = $(this).attr("value"); $.post("updateEstado.php", {estado: inputvalue, codigo: "38"}); });
Improve this answer

2 Comments

For testing I change the code: in action='updateEstado.php' but in the jquery code updateEstado2.php and it using your jquery function #form with $.post("updateEstado2.php") launch updateEstado.php :(
You set the id of form to to form? <form id="form" action..>

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.