Develop Reference

jQuery Trigger Reset Only Resetting Some Forms

I have many forms on my page that are DYNAMICALLY added and I have a button that I want to trigger a reset to all the forms on the page except one.
An example of a dynamically added form is:
<form>
<label for="code">Question code:</label>
<input type="text" id="code" name="code" maxlength="25" class="used"/>
<div class="clear"></div>
<label for="title">Question:</label>
<input type="text" name="titl" name="title" maxlength="255" class="used"/>
<div class="clear"></div>
<label for="hint">Hint:</label>
<input type="text"id="hint" name="hint" class="used"/>
<div class="clear"></div>
<input type="hidden" name="type" value="tapper" class="used">
<input type="hidden" name="optionsType" value="none" class="used">
<input type="reset" value="Cancel" class="delete-button">
<input type="button" value="Add" class="action-button" onclick="pushQuestion(this);">
</form>
Also, after each form is dynamically added, I call:
$('form').on('submit', function (e) {e.preventDefault()});
Now, when I want to reset the forms, I call the following:
$('form').trigger('reset');
When entering this into the console, I get an array back with all the DOM forms. Some forms get reset, but others are unaffected. There are no errors being reported. Does anyone have any thoughts as to why some get reset while others do not?
EDIT Thanks for the help, but the issue has been resolved. See the problem in the comments below

After a few hours of tinkering, it was discovered that the issue was the result of the way the forms were cloned.
I was doing a deep clone of the existing forms which was yielding an odd state of the form which means that when .trigger('reset') was "triggered", it would reset the form to the default state of the clone which may or may not have included some original data yielding a reset that did not appear to be doing anything.
A workaround was to first fire a loop over all the inputs with .attr(value,'') to clear the attribute value after cloning. Then the .trigger('reset') functioned as expected.

I've noticed some inconsistencies with form handling among the various browsers. One gotcha is that the less standards-compliant browsers require an input or button with type=submit for some things to function correctly. I know this is that case at least with submitting a form by pressing the enter key in any text field.
Maybe try adding an <input type='submit'/>?

innerHTML not working properly in firefox?

I am setting the value of a form field using javascript. Now when I select the HTML content of that field using innerHTML the value gets disappeared.
Here is the code.
function test() {
document.getElementById("fname").value = "Deepak";
}
function test2() {
alert(document.getElementById("testform").innerHTML);
}
<form id="testform">
<input type="text" name="fname" id="fname">
</form>
<input type="button" value="Set Value" onclick="test()">
<input type="button" value="Show Inner HTML" onclick="test2()">
I can not use jquery in this , so have to do it using JS only.
The output should be <input name="fname" id="fname" type="text" value="Deepak">
But currently it shows, <input name="fname" id="fname" type="text">
Any workaround to solve this issue? This works fine on IE.

The behavior you are observing in FireFox is the correct behavior. Changing the value of an input should not change its value attribute (if it even has one). Newer versions of IE will behave the same way as FireFox does, and older versions of IE have a bug on which your code was relying. You can see this in the DOM level 2 spec:
Changing [the value property] changes the contents of the form control, but does not change the value of the HTML value attribute of the element.
If I'm not mistaken, you should be able to pass a DOM node directly to Modalbox.show():
Modalbox.show(document.getElementById('RAForm'), {title: 'Create RA', width:700});
So please try that. I believe that should solve your issue.

HTML web browser compatibility (IE8, Chrome)

I'm an embedded programmer.
I'm developing a web GUI, and having a problem - web browser compatibility.
The code is executing normally in Chrome, but not in Internet Explore.
After Internet Explorer 8, must to execute to code.
I think it is a Web Standard problem. Perhaps my HTML knowledge is very poor.
function validateForm() {
var x = document.forms["form_dl_rf_set"]["DL_RF_2000_id"].value;
if (x == 1) {
var y = document.forms["form_dl_rf_set"]["DL_RF_2000_num"].value;
if (!y) {
alert("error ");
return false;
}
}
}
<form name="form_dl_rf_set" action="dl_rf_set.cgi" method=post onsubmit="return validateForm()">
<input type="radio" id="DL_RF_2000" name="DL_RF_2000_id" value="0"checked="checked">
<label for="DL_RF_2000">変更しない<label>
<td>
<input type="radio" id="DL_RF_2000" name="DL_RF_2000_id" value="1">
<label for="DL_RF_2000"> <input type="number" id="DL_RF_2000" name="DL_RF_2000_num" min="-10.0" max="2.0" step="0.5" size="4" value=-1.0> dB</label>
Function description - check for blank.

This is a comment, not an answer, since it's impossible to determine the issue from the OP. Hopefully it will help toward finding the issue so that an answer can be provided.
The posted code is incomplete, there is no submit button or way to submit the form. Adding a submit button fixes that, but perhaps not in a way that is consistent with the actual code.
In the validateForm function, there is:
var x = document.forms["form_dl_rf_set"]["DL_RF_2000_id"].value;
There are multiple controls in the form with a name of 'DL_RF_2000_id', therefore the expression:
document.forms["form_dl_rf_set"]["DL_RF_2000_id"]
will return a NodeList of those elements. NodeLists don't have a value property, so x will be undefined. Then there is:
if (x == 1)
which will always be false, so the function returns undefined and the form is submitted. This will happen in all browsers, not just IE.

There are several issues I see, the first of which is IDs need to be unique ...
Try ...
<form name="form_dl_rf_set" action="dl_rf_set.cgi" method=post onsubmit="return validateForm()">
<input type="radio" id="DL_RF_2000_id" name="DL_RF_2000_id1" value="0" checked="checked" />
<label for="DL_RF_2000">変更しない</label>
<input type="radio" id="DL_RF_2000_id2" name="DL_RF_2000_id2" value="1" />
<label for="DL_RF_2000"> </label>
<input type="number" id="DL_RF_2000_num" name="DL_RF_2000_num" min="-10.0" max="2.0" step="0.5" size="4" value="-1.0"> dB
I also cleaned up some close tag issues (and dropped the <td> tag since it didn't seem to need to be there.
Note that ALL the tags now have unique IDs which can now be referenced cleanly.
UPDATE:
One other issue I see is the repeated use of the names. This has also been adjusted in the code above.
Also, there was a value with no quotes.

Different Values in Form Inputs

I have a simple HTML form that works with a PHP script (to process the values).
For some reason it's not working correctly. After many tests, I inspect the mark-up for the form and I find:
<form id="delete_item_3_form" action="upload/delete_item.php" method="post">
<input type="hidden" value="4" name="item_id">
<input type="hidden" value="test" name="item_info">
</form>
As it should be. Please note that the values for the inputs are hard-coded.
However, if I go to the browser console (I am using Chrome) and write:
$('#delete_item_3_form');
I get:
<form id="delete_item_3_form" action="upload/delete_item.php" method="post">
<input type="hidden" value="4" name="item_id">
<input type="hidden" value name="item_info">
</form>
As you can see the value from the second input, item_info, is empty. Both inputs have a name.
I am not new to Form Handling but I have never seen this. The page mark-up shows one thing in a form, and a simple jQuery call to the same form shows another thing.
I have nothing, on my scripts, changing the value of the inputs.
The form is submitted by the press of a button. Here is the jQuery code:
$('#delete_item').click(function()
{
$("#delete_item_3_form").submit();
});
How is this happening?

I had another form in the page with the same ID.

HTML: Copy form fields to another form including FILE input field?

I came to see that form file input field value cannot be set with javascript for security reasons.
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
UPDATE: my code:
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
Can’t get the complete address while uploading a file
How to get the file path from HTML input form in Firefox 3
UPDATE:
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.
Further to the update, I assume you meant something like this:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.
As for some workarounds, you may want to the check David Dorward's suggestions:
Using cloneNode
Moving the input field with appendChild before submitting the form

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

I haven't tested this in depth, but it appears to work in Firefox.
Use cloneNode
var copy = file_input.cloneNode(1);
form2.appendChild(copy);

Very much similar to cloneNode except in jQuery
In an xulrunner browser (like firefox) I have successfully used something like the following:
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
Avoid using the id attribute in the objects to be cloned. id's should always be unique.

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]