Check on/off of checkbox doesn't work anymore - javascript

Since many years I have a website running (direct link to the table-page). Now, suddenly, I realise that the checkbox doesn't work anymore as one would expect (same for the "Completeness" button below): once the checkbox for "per capita"-calculation has been checked, it doesn't go off anymore. No idea why that is; really frustrating.
The page has two forms:
<form name="tableForm" action="">
Per Capita: <input type='checkbox' name='per_capita' onchange='
document.formGeneric.per_capita.value=document.tableForm.per_capita.value;
document.formGeneric.action="table.php";
document.formGeneric.submit()
'>
</form>
and
<form method="post" name="formGeneric" action="">
<input type='hidden' name='per_capita' value='on' />
</form>
Looks alright (although perhaps old-style writing) to me.
The "offing" off seems not to work at all. If I put a "alert(document.tableForm.per_capita.value)" in the onChange event, it still says "on".
I would very much appreciate any tip on what I am doing wrong here.

Ok, thanks to AdrianoRepetti's and Manurat's comments above, I realised that I had to work with two different "units": One is the information type="checkbox" is returning ("checked"); the other is how I store the information in a "hidden"-element in another form.
So, I changed the code to reflect this - it now parses the "checked" state of the checkbox over to the "value" part of the hidden element:
<form name="tableForm" action="">
Per Capita: <input type='checkbox' name='per_capita' onchange='
document.formGeneric.per_capita.value=document.tableForm.per_capita.checked;
document.formGeneric.action="table.php";
document.formGeneric.submit()
'>
</form>
<form method="post" name="formGeneric" action="">
<input type='hidden' name='per_capita' value='' />
</form>
Now, I use the PHP to check if the hidden parameter "per_capita" is "checked" or not.

Related

Form action affects only the form itself

I'm working on a single PHP file, which has 2 different forms.
Example:
<form action="index.php" method="POST">
<input type="checkbox" name="box1">
<input type="submit" value="submit1" name="submit">
</form>
<br>
<form action="index.php" method="POST">
<input type="checkbox" name="box2">
<input type="submit" value="submit2" name="submit">
</form>
My problem is, I want to make both of them work at the same time, independent from each other. For example, when I hit 'submit1', the whole index.php reloads since action is set to that page. The other checkbox might lose it's condition, if I set it to checked before submitting the first form. Might be confusing, I know.. Since I have PHP code behind, I can' really handle the whole thing between 1 form tag. That's why I'm asking if there's another option like javascript, or something. Thanks in advance!
You can use a javascript cookie. You could set it so the cookie will have the fields and values of everything in both forms, and then is saved/created upon submit. Then once the page is reloaded, javascript can split the cookie and refill the field values for the other form. You might need a hidden field in both forms so that you can identify which form was submitted. Here's a tutorial that might explain cookies to you in greater detail: http://www.tutorialspoint.com/javascript/javascript_cookies.htm

Getting data from generated form in jquery

I have the following code setup:
http://jsfiddle.net/bABHU/2/
Had to change it a little bit to get it all on jsfiddle but the problem i'm having is the data from the first from gets put into the query string to send off to the ajax call, but the form elements generated after that (which comes from a JSON call) don't get submitted when clicking the next button again.
So when you get to the second question how can I submit the 'answer' input that was generated. - see the console for the outputs.
Hope that makes sense.
Any help is appreciated.
Thanks.
This is happening because you are replacing your entire <form> element with the new HTML content from question 2. Replace $('.FinderOptionsInner').html with $('#formStep').html
See http://jsfiddle.net/M3eZp/1/
When you replace the markup for findOptionsInner, you obliterate the form itself. Hence it not serializing. Also, you have no close tag for your form.
<form action="" method="post" name="formStep" id="formStep">
<div class="FinderOptionsInner">
<p>
<label class="label_check">
<input type="radio" name="answer" value="1" id="answer_0" />
Answer 1</label>
<br />
<label class="label_check">
<input type="radio" name="answer" value="2" id="answer_1" />
Answer 2</label>
<br />
</p>
</div>
</form>
<div class="nextButton-step1 nextButton">Next
</div>
Works just fine (notice that I've also fixed the close tags for form and the div at the bottom).

Radio Button Getting Value

I have some html like this
<form id="reportform" method='post'>
<input type='hidden' id='qid' name='qid' value="<?php echo $id ?>" />
<span><input type="radio" id="reporttp" name="reporttp" value="spam" /> spam</span>
<span><input type="radio" id="reporttp" name="reporttp" value="attack" /> attacking</span>
<span><input type="radio" id="reporttp" name="reporttp" value="nonsense" /> nonsense</span>
<span><input type="radio" id="reporttp" name="reporttp" value="other" /> other</span
<input type="image" name='Submit' value='Submit' src="../Images/buttons/reportButton.png"/>
</form>
when i try to read the value in $('#reportform').submit(function() {
i read it as $(reportttp).attr("value"). And then i did some posting (which works fine). The problem is I always get "spam" postedf to me even though i select the other radio boxes. If i switch the first and second radio button around, ill get "attacking".... Could you tell me what is wrong?
You cannot have multiple elements with the same id
I assume you want to read the checked radio button's value? Is so, give them all unique ids, then do:
$("input[type='radio']:checked", "#reportform").val();
This will grab all radio buttons inside of you reportform, grab the checked one, then retrieve its value.
My guess is that your names and ids for each radio button are identical, causing the browser to make weird decisions arbitrarily.
In addition to Adam's answer, this is also invalid:
$(reportttp).attr("value")
should be
$('input[name="reportttp"]').val()
and I hereby retract my statement cause Adam updated his answer to a much better one.
and get rid of the duplicate id's
You should be able to do $('#reportttp').val() to get the selected value.

Best way to form submit using Javascript

I have two methods for this -
<body onLoad="document.frmconfirm.submit();">
<form name="frmconfirm" action="https://abc.com/" method="post">
<input type='hidden' name='account_id' value='5715' />
</form>
</body>
and
<form id='subFrm' name='subFrm' method='post' action='https://abc.com'>
<input type='hidden' name='msg' value='dummy'>
</form>
<script>document.subFrm.submit();</script>
I am getting some issue on firefox in second one.
I would love to hear your thoughts and any other full proof approach.
I need to automate this process on a page, so can't use jQuery.
What are "some issues"?
Your two snippets of html/javascript should be pretty much identical in their functionality. The first is probably preferable in any case as the javascript runs when the page fully loads. The second runs some javascript directly as it is parsed, which should work fine as long as, as in your second example, the form has already been parsed.
TL;DR - They're (pretty much) the same.
Try
<form id='subFrm' name='subFrm' method='post' action='https://abc.com'>
<input type='hidden' name='msg' value='dummy'>
</form>
<script>document.getElementById("subFrm").submit();</script>
or
<form id='subFrm' name='subFrm' method='post' action='https://abc.com'>
<input type='hidden' name='msg' value='dummy'>
</form>
<script>window.onload = new function() { document.getElementById("subFrm").submit() };</script>
You could use jQuery to do this btw :)
$(document).ready(function () {
$("#subFrm").submit()
}

How to make .focus() work on a radio button array?

I am trying to get the .focus() working in IE, it works in chrome etc. My form is called:
<form name="feedbackform" action="feedback.asp" target="_self" onsubmit="return
validate_txt(this)" method="post" style="margin: 0;">
my radio buttons:
<input type="radio" name="fb_commentype" value="Comment" />Comment
<input type="radio" name="fb_commentype" value="Complaint" />Complaint
<input type="radio" name="fb_commentype" value="Request" />Request
in my javascript I am trying to call using this line:
document.forms["feedbackform"].elements["fb_commentype"][0].focus();
As I said, it works in chrome, firefox blah blah blah but in IE 8 I am getting nada, zip and I don't know why, nor can I find a satisfactory answer, is there a way around it?
<input type="radio" name="fb_commentype" value="Comment" />Comment
<input type="radio" name="fb_commentype" value="Complaint" />Complaint
<input type="radio" name="fb_commentype" value="Request" />Request
Simple, look at your radio button as an array, you can focus any radio button of the array by pointing to the right index, see below.
document.getElementsByName('fb_commentype')[0].focus();
that way the "Comment" radio button will be focused...
Happy coding!!
Are you calling focus when the page just loads (e.g. body's onload)?
This thread might help - it may get called in your code before DOM finished loading
Also, this page has a good test for focus() behavior:
http://hardlikesoftware.com/projects/IE8FocusTest.html
This might be that IE does not understand the .[0].focus() syntax. You may want to try something like this:
document.forms["feedbackform"].elements["fb_commentype"][0].focus();
document.forms["feedbackform"].elements["fb_commentype"].focus();

Categories