Two ways to process jQuery submitted form - javascript

I have a form with button A and button B. It's sent by a jQuery function called clicking on one of the buttons. At the end of this long function which is checking prerequisites, the form is sent using this line:
$('#wlform').submit();
I want to adjust this code to send something to be able to distinguish which button was pressed. Something in JavaScript similar to <input type="submit" name="submitbutton1"/>

Provide us with some code?
I think you're talking about two buttons that both should have their own ID's. You could try and catch the ID attributes after you click them;
$(this).attr('id');
Or change 'id' into 'name' if you want to get that value.

I suppose you use a javascrit click event to execute your javascript functions.
In javascript, you can add a hidden input to your form :
$(...).click(function() {
... // Your code
var clicked_button = $(this);
$('#wlform').append($('<input type="hidden" name="clicked-button"/>').val(clicked_button.attr('id'));
$('#wlform').submit();
});
With that, the id of the clicked_button will be sent with the form.

Just give to the hidden input the value of the button id attribute. You could do something similar to this (before the submit statement):
$('input[type=hidden]').val($(this).attr('id'));
Where $(this) is the button clicked.

None of the answers worked, so I've put something together from these on my own. I've added a hidden input field, clicked-button as you suggested. Then when calling my precheck_submit function, I pass another parameter (c) for storing which has been clicked. In the precheck_submit function I added $('#clicked-button').val(c);. It works. Anyways, thanks for your efforts.

Related

How to add a value to a textbox using a submit?

I have two submit buttons namely "Approve" and "Reject". Both of them go to one controller file so I set the controller file on the action tag of the form.
What I want is that when I click Approve, it sets the value of the hidden field named 'Decision' with 'Approved' and when I click 'Reject', the value of the hidden field will be 'Rejected' then the form will continue to submit to the designated controller.
However, the form continues to the controller but the decision field is empty.
Also, when I tried to put an 'alert' on the javascript function, it is not showing everytime I click the submit buttons eventhough I used the onClick tag.
Can someone suggest a working code for this? Thank you. :)
So I believe form actions have precedence over javascript and other stuff like animations.
To answer your question: you can make the submit buttons just normal buttons like so:
<input id='accept-button' type='button' name='accept' value='Accept' />
and add an event listener to it that changes the value of the hidden field when clicked then submits the form:
document.getElementById('accept-button').addEventListener("click", function () {
var hiddenid = document.getElementById('hidden');
var formid = document.getElementById('form-id');
hiddenid.value = 'Accepted';
formid.submit();
});
After a quick search I found a better solution from this question's accepted answer. It uses jquery though.

Loading HTML forms through php then using JQuery to submit forms

I have a dilema which I'm unsure how to approach right now. I know that JQuery needs to have a unique set of ID's to be called in the document ready function. I go through PHP and read my mysql table to print out these HTML forms and with each form is a button that will add a new item to this table.
The issue here is that I cannot have an idea of how many forms there will be so I would like to write the JQuery code so that it can dynamically read anytime that the button is clicked, but know which button was clicked so that the proper ID's can pass.
I've seen some examples but they have more to do with CSS styling, are there any ideas or thoughts as to how this problem could be remedied?
If you are writing out the forms in a for loop with php you can assign each submit button an id using the iterator, like submit_1, submit_2 etc and then you can have an on click handler in jquery using a selector contains, something like:
$(document).on('click', 'input[id*="submit_"]', function() {
//code goes here
alert( $(this).prop('id') );
});

Change color when form changes

I have a form with multiple textboxes inside a table.
Also inside the table but outside the form there is a cell (said Cell A).
When you first access the form, texboxes in the form are filled with data from a DataBase using php/MySQL.
You can change the textbox values, and submit them to the database with POST. The Database is updated, and you are returned to the same (but now updated) form.
My issue: I want to appear in Cell A a colored text indicating if the data in the form was sent or not. On first arrival to the page or after update in should read "Actualized data" in green. But when you are changing the form without submitting it should change to "Unsent data" in red (or something like that).
I know how to format the text with php
style="color:<?php echo $ColorChange ?>"
but when the form changes (before submitting) I need OnChange and some JavaScript, for example
function ChangeColor()
{
var col=document.getElementById("UpdateSign");
col.style.color="#FF0000";
}
My problem is how to combine those two. Any ideas?
Keep Javascript event triggers outside of HTML elements, and use event listeners. jQuery makes binding event listeners to elements very easy.
For example,
$("#form_input_element").on("onchange", ChangeColor);
takes in the id of the form element and binds the ChangeColor function to the onchange event.
use the onchange event of the body, i suppose this should work. I dont know your complete code so this is more guessing than knowing.
<body onchange=ChangeColor()>

Always getting values from first form. What's wrong?

I have a webpage where there are several forms. It looks like .
When "Create" is clicked an ajax script checks the fields for illegal values in the first form, where the Create button belongs to. That's fine.
But when the "Save" button is clicked, it still checks fields from the first form, and not the form where the Save button belongs to.
My Ajax looks like this
$(document).ready(function(){
// $('form').submit(function() {
$('form').live('submit', function(){
var title = $('#title').val();
...
Is it here the problem could be? I have tried with the commented code, but that doesn't work either.
Any ideas where the problem could be?
$('#title').val(); means "Get the value of the one and only input that has the id title".
If you have violated the spec and have multiple elements with the same id, then browsers will generally recover from the error by returning the first such element.
You should probably change the id to something like: idOfForm_title (so that your <label> elements still work)
And then use: this.elements.title.value where title is the value of the name attribute (and this automatically resolves to the form on which the submit event fires).
I think you should give your forms a class, like class="create" for the first / create form and then class="edit" for the second / edit form.
Then you can amend your jQuery to look like
$(document).ready(function() {
// only work with the 'create' form
$('form.create').live('submit', function(e) {
e.preventDefault(); // stop the form's default action
// the rest of your code
});
// only work with the 'edit' form(s)
$('form.edit').live('submit', function(e) {
e.preventDefault(e); // stop the form's default action
// the rest of your code
});
});

jQuery: how to pick unique IDs?

New to whole this jQuery (and javascript altogether, heh) and so far it's been excellent, but now I'm in a small pickle.
Let's say I have list of forms generated from SQL database and every single one of them has to have unique id, so how I can select the specific item that is to be manipulated (changing values via php).
the $("#submit").click(function()) will trigger every submit buttons on the page, so how I can the #submit to be some random id that I clicked. There might be a smarter way, but I'm new to this so try to bear with me.
thought of passing the unique value with onClick="myfunction(unique_id)", but don't know how it goes with jQuery.
hope this made any sense
$("#submit") won't intercept every submit button click, but only the element with id="submit".
If you want to get the form's id attribute you can use a snippet like this:
$("form").submit(function () {
var selectedFormID = $(this).attr('id');
});
I might not be understanding the question correctly but if each of the submit buttons has a unique id, e.g. <button id="submit_02">Submit</button> then the jQuery would be $("#submit_02").click(function() {}).

Categories