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.
Related
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'/>?
I have a total of two input values. Only one value passes to the url of the next page, but both should. What's causing this?
JSFiddle: http://jsfiddle.net/p8dCC/
HTML:
<!--form action="device" onSubmit=" get_search(); return false;" id="search-form-4" method="get" target="_top"-->
<div class="fix">Brand</div>
<input class="inputs" type="text" id="search_id" name="q3" placeholder="Send this" required="required" />
<br/><br/>
<div class="fix">Model</div>
<input class="inputs" type="text" id="search_id" name="q4" placeholder="And send this one too" required="required" />
<br/><br/>
<input id="search-button" class="" type="submit" value="continue" data-target="http://www.google.com/?item-description" />
<!--/form-->
You have two elements with the same id in html. So when you do this $('#search_id').val() only one of them will get evaluated and not both. Ids are supposed to be unique
After testing your code in a test page, I found that both inputs were in fact being passed through the URL.
You have commented out the form tags which I'm not sure if you did just for purposes on here.
kjs is correct as well, though using the same id would only effect the HTML. Using get as the method would bypass this issue as it would be passed the unique "name" attribute.
A form tag is required if you expect the html submission mechanism to work correctly on its own.
In the Javascript you posted though, you are treating document.location as an html element, wrapping it with jquery, then trying to use jquery's attr method on it. This won't work. Just access "location.href" directly without using jquery.
Additionally, as pointed out by another answer, your ids should all be unique.
i am facing a weired small issue.. the onclick action of radio button is not executed. i tried with onchange event as well, but of no use..
<label><input type="radio" name="search_type" id="search_type" value="name" onchange="by_name()">Enter the Name </label>
<input name="tag" type="text" id="search" maxlength="30">
<label><input type="radio" name="search_type" id="search_type" value="all" onchange="all()">All</label>
and on clicking All,
function all()
{
window.alert('hi');
}
can you help me with your suggestions.. (the js file is linked as well)
EDIT: It does work with all Demo
First, you are using two different inputs with the same id. You can't do that.
Second, try seperating your HTML from JS : DEMO
HTML:
<label>
<input type="radio" name="search_type" id="search_type" value="name">Enter the Name</label>
<input name="tag" type="text" id="search" maxlength="30">
<label>
<input type="radio" name="search_type" id="search_type2" value="all">All</label>
Javascript:
var input1 = document.getElementById('search_type');
var input2 = document.getElementById('search');
var input3 = document.getElementById('search_type2');
input1.onclick = function(){
alert('input1');
};
input2.onclick = function(){
alert('input2');
};
input3.onclick = function(){
alert('input3');
};
Why seperate them?
It's modern and if you have a lot of HTML it's easier to read your javascript if you have it in a seperate file.
Rename the function. all has a predefined meaning in many browsers making it (effectively, if not actually) a reserved keyword when used with in an intrinsic event attribute.
Non-working version gives "NS_ERROR_ILLEGAL_VALUE: Illegal value".
Working version has all renamed to notall.
$(document).ready(function()
{
$('body').click(function()
{
alert('hi');
});
});
here change the "body" tag to the ID of the object you want to have the function happen on.
make sure you are using Jquery otherwise this wont work
I have the following block in my HTML
<div class="selection">
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="I am solely responsible for the decision">I am solely responsible for the decision </p>
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="I am partially responsible for or influence the decision">I am partially responsible for or influence the decision </p>
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="I am not involved in the decision">I am not involved in the decision </p>
<p><input name="custrecord_npsdtl_decision" id="custrecord_npsdtl_decision" type="radio" value="Don't know">Don't know </p>
</div>
And a function to check form-progression, based on the option selected, with the following snippet:
var decisionmaker = $('#custrecord_npsdtl_decision:checked').val();
if (decisionmaker == elements['customlist_nps_decision'][2] || decisionmaker == elements['customlist_nps_decision'][3]) {
redirect();
}
This works as expected in Chrome, Firefox but was not working in Internet Explorer(8). Doing some inspection I found that
$('#custrecord_npsdtl_decision:checked')
returns an object, as expected, but calling val() on the object returns undefined.
I am absolutely bewildered. How do I get the selected option from the radio list in IE?
ID's must be unique. I'm very surprised that this is working at all in Chrome and Firefox.
Remove the id attributes and select by name.
$('input[name="custrecord_npsdtl_decision"]:checked').val();
you shouldnt use the same ID for each radio button and you can use the name selector to get the group selection
$('input[name=custrecord_npsdtl_decision]:checked').val();
Today i StumbleUpon a strange cache behavior of Firefox 4 which is described bellow.
There is a form <form name="widget">
<input type="hidden" name="position" value="-1" />
</form>
On an arbitrary event i have changed it to say "rss".
After refreshing the page using "F5", i access the value of alert(document.widget.position.value); which is returning "rss". WHY THE OLD VALUE?
But after refreshing the page using "Control+F5", i access the value of alert(document.widget.position.value); which is returning correct "-1". WHY NOT FIRST TIME?
I am really confused by this behavior.
NOTE: Only FireFox4 is doing it, chrome i fine but did not tested on ie.
I think it's FF's caching of forms/input element values that's bugging you. You may want to use:
<form id="widget">
<input type="hidden" id="position" value="-1" />
</form>
and to change the value:
document.getElementById('position').value = /*[your value]*/;
Furthermore <form ... autocomplete="off"> seems to work.