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
});
});
Related
I have a form with a 'Reset' button. When i select my radio button the data from my DataTable is passed and pre-pops my fields. This working fine and does in fact pre-populate the relevant radio button
JQuery
if (modifyRecordData.startTime == 'Anytime') {
$('#anyTimeRadioButton').attr('checked', true);
$('#specificTimeRadioButton').removeAttr('checked');
$('#startEndTimeFields').hide();
} else {
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').attr('checked', true);
$('#startEndTimeFields').show();
$('#startTimeHr').val(modifyRecordData.startTimeHr);
$('#startTimeMin').val(modifyRecordData.startTimeMin);
$('#endTimeHr').val(modifyRecordData.endTimeHr);
$('#endTimeMin').val(modifyRecordData.endTimeMin);
}
Data returned
Page loaded
Now the issue, if the user, after data load goes to update the details and selects the other radio button the hidden fields are displayed (again correct)
Then user clicks the 'Reset' button and it fails in the correct function
$('#resetButton').mousedown(function (event) {
buttonclicked = "Reset";
event.stopImmediatePropagation();
modifyRadioButtonSelection(modifyRecordData);
})
and then goes back to the initial loaded data and it does drop in the IF code above
Debuging
Then it re-hides the hidden section (which is correct) but it does not re-tick the radio button as expected.
If i dont have the following code in the IF it leaves the previously selected one checked although the data falls in the IF
$('#specificTimeRadioButton').removeAttr('checked');
No idea whats going wrong at all. I even tried adding the following the 'Reset' button function but it just will not re-check the correct `radio button
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').removeAttr('checked');
Historically, there's been a lot of ambiguity and confusion between three related but different concepts:
The value of the HTML attribute in the source code.
The value of the HTML attribute in DOM tree.
The value of the JavaScript property.
To address that, jQuery/1.6.1 introduced the prop() method, which I suggest you adopt.
I added some js code when html loaded. Like below
var form = $('form');
$(':input').change(function() {
if ($('[name=form-update-detector]', form).length == 0) {
$(form).prepend('<input type="hidden" name="form-update-detector"/>')
}
$('[name=form-update-detector]', form).val('true');
});
It works.
My question is when I detect form values have changed, how can I warn users when they click other elements (bound a redirect event) without saving this form?
The elements which bind the event may be <a></a>, <p></p> or any others. The code may be onclick="someEvent()" or $('#someId').on('click',function(){}) or a href etc.
You can store the initial values (when the form is loaded) in a variable say cleanData and the when the user clicks the other element on which you have some other action attached, you can first take the form data in another variable say dirtyData, then compare these two and if equal then proceed to the action attached on the element clicked, else show a warning.
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.
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.
I have a page with 2 forms and a hidden field that is outside of both of the forms.
How can the hidden field be submitted with either of the forms?
I thought about doing something like this with jQuery:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
// do something to move or copy the
// hidden field to the submitting form
});
});
</script>
Will this work? Any other ideas?
EDIT
The hidden field stores a serialized object graph that doesn't change. Both server methods require the object. The serialized object string can get pretty hefty, so I don't want this thing sent down from the server 2 times.
You can simply inject a copy of the element into each form right before submission.
This way, you can have the option of having different information for each hidden form field without affecting the other.
Something like this:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$("#hidden_element").clone().appendTo(this);
});
});
</script>
If you want to use the exact same element for both forms without creating a fresh copy, just don't use clone()
See documentation for clone() and for appendTo()
EDIT:
If you don't want to send the hidden element with every request the form sends. Consider storing it in the database for that user for that time. You can submit its content once, and once only for every page reload, and then just send the database id of the hidden element with each form post.
On page load, something like this:
$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
$("#hiddenfield").val(insertedID);
});
Then, in the server side code:
//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit
This way your js gets the callback.
Now, you can submit the form as you would, but this time, you're only sending the id (integer number) to the server.
You can then simply delete the object from your server (run a cron to do it after X amount of time, or send another request to delete it.
Honestly, though, unless you object is HUGE(!!), I think storing it by submitting it only once is a lot more complex to execute than to simply send two requests to the server.
Let me know if you have any other questions...
With HTML5, you can include a "form" attribute with an input element. The value of the form attribute is the id of the form(s) the field belongs to. To include the field in more than one form, include all form ids in a space-delimited list. Unfortunately, the form attribute is not supported in IE at all (as of IE 9). FF and Chrome support start in version 4 and 10 respectively.
Append the field to both forms at page load:
$(function() {
$('#form1, #form2').append($('input[name=fieldName]'));
});
Assuming you are doing a non ajax submit you could just append the field into the form being submitted. However if you need this info in both forms is it not better to store this value server side in a session store. This way any non js clients will also work!
$(function() {
$('form').submit(function() {
$('input.yourhiddenSubmit').appendTo(this);
});
});
The only way to pass the variable to the next form is to have that variable in the data that is passed when the form is submitted (either GET or POST), unless you want to use AJAX. Assuming you want to have the hidden variable outside of the actual form for a "good reason", I would recommend using jQuery to include the hidden input field into the form just before submission, like so:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
return true;
});
});
</script>
Replace all the instances of "hiddenField" with the ID of your hidden field outside the form. This will create a new input inside of the form just before it is submitted with the value of the hidden field that is elsewhere on the page.
Beyond that, you'd have to be a bit more specific about what your exact problem was (and why the field isn't being included in the form) for me to help.
Note that the above code should work in theory, but I didn't have a chance to actually test it out myself.