Input fields inside of dijit.dialog - javascript

I have foloowing form:
(part of the code here)
<form id="form1" ...>
<input name="field1" value="1" type="hidden" />
<input name="field2" value="2" type="hidden" />
<div dojo-data-type="dijit.dialog">
<input name="field3" value="3" type="hidden" />
<button id="btn" dojo-data-type="dijit.button" onClick="submitForm('form1')">
</div>
</form>
if I click the button "btn", i have in POST-collection ONLY fields "field1" and "field2", but not "field3". Waht's the problem? Thank you

If you walk the DOM's form children, the dialog elements will be absent; they end up down the bottom of the DOM. Inspect the page elements to verify.

Related

Checkbox to button focus

I've got multiple forms on my page. In one form I've got 3 text fields a check box and a button. When the tab key is pressed, it goes to the 3 text fields and then to the checkbox and then no where.
How can I focus the button (submit) after the checkbox (maths) and then back to the first text field (user_id).
<form id="form13">
User ID :<input type="text" id="user_id" /><br>
Password: <input type="password" id="password" /><br>
Department: <input type="text" id="department" /><br>
<input type="checkbox" id="maths" value="on"> Maths
<input type="submit" id="submit" value="Submit" />
</form>
$('#maths').keydown(function(e){
if (e.which == 9){
$('#submit).focus();
}
});
If your need is to handle Tabbing in your HTML forms. Then you may need to handle this with HTML attribute tabindex this is a good article for learning purpose:
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />
So, you can handle it in your way. And yes, you can also change it dynamically by using Javascript:
document.getElementById("foo").tabIndex = "3";
I hope it may help you.
You should organize your form in such a way that it can be navigated using the keyboard only.
For example, have a look at this form:
Accessible Signup form
Manually setting the tabindex may lead to problematic behavior. There are couple of good article why you should not do it:
Using the tabindex attribute
Don’t Use Tabindex Greater than 0
Be aware when manually setting a tabindex as suggested, this will affect natural flow of tab index in form and document. Use this only when you are absolutely sure about it.
You can organize your form in such a way that keyboard navigation of your form works without you using tabindex.
Have a look at following Pen : Form field focus, you'll see that from checkbox, the focus goes directly to submit button and back :
<form id="form13">
<label for="asdfg-user_id" id="user_id-ariaLabel">
User ID: <input type="text" id="asdfg-user_id" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Password: <input type="password" id="password" />
</label>
<br>
<label for="password" id="password-ariaLabel">
Department: <input type="text" id="department" />
</label>
<br>
<fieldset id="interestInfo">
<legend>Subject </legend>
<div>
<div id="interests"></div>
<div>
<div class="row">
<input id="chk_Subject_1_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_1" id="AreaOfInterest_1-ariaLabel" >Math</label>
</span>
</div>
<div class="row">
<input id="chk_Subject_2_lbl" name="chk_Subject[]"
type="checkbox"
value="on"/>
<span>
<label for="chk_Subject_2" id="AreaOfInterest_2-ariaLabel" >Chemistry</label>
</span>
</div>
</div>
</div>
</fieldset>
<input type="submit" id="submit" value="Submit" />
</form>

Link button with data in url

I would like to make a button link to another page. Furthermore, I would like to include some data in the url. The onclick method works, but I was trying to do it without JavaScript. The form submit method almost works, but does not send the data (id1 and id2). Any suggestions? Is it best to use JavaScript? Thank you
<input type="button" value="Clickable Button - onclick" onclick="window.location.href='http://www.google.com?id1=123&id2=345'" />
<form action="http://www.google.com?id1=123&id2=345"><input type="submit" value="Clickable Button - Submit" /></form>
You need to add some hidden fields to your <form>:
<form action="http://www.google.com">
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
<input type="submit" value="Clickable Button - Submit" />
</form>
Below is a non-js solution:
<form method="get" action="http://www.google.com">
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
<input type="submit" value="Clickable Button - Submit" />
</form>
<form action="http://www.google.com">
<input type="submit" value="Clickable Button - Submit" />
<input type="hidden" name="id1" value="123" />
<input type="hidden" name="id2" value="345" />
</form>
A better alternative, though, is to use a normal link and use CSS to style it look like a button if necessary. Links Want To Be Links.

Why is jQuery grabbing the parent form name when serializing a child form's values in ASP.NET?

I am attempting to loop through all forms in the page and serialize the values. I need to get the form id or name of each form as well.
In this case, I have 2 forms inside the standard ASP.NET server form that encapsulates everything.
The problem is that when it serializes the second forms values, it writes the name of the parent ASP.NET form, not the actual form the values sit in.
The second form output works perfectly.
Here is my code and output.
The javascript:
$(document).ready(function ()
{
$("form").each(function ()
{
document.write("<li>Form ID: " + $(this).attr("name"));
document.write("<li>Form Values: " + $(this).serialize());
});
});
The HTML output
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="Scripts/cache.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form method="post" action="CacheTesting.aspx" id="form1" name="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZJ3NbEPOwkaa9B4UXSJtqYSQBihLaZZ9uYNPO/u0XD1G" />
</div>
<div>
<form name="form2" id="form2" action="#">
<input type="text" id="txtName" name="txtName" />
</form>
<form name="form3" id="form3" action="#">
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br />
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br />
<input type="checkbox" name="check" value="check1" id="ch1" />
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2" />
<label for="ch2">check2</label>
<br />
<input type="radio" name="radio" value="radio1" checked="checked" id="r1" />
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2" />
<label for="r2">radio2</label>
<input type="submit" name="btn" id="btn" onclick="showValues()" />
</form>
<p>
<tt id="results"></tt>
</p>
</div>
</form>
</body>
</html>
And here is what the javascript produces:
Form ID: form1
Form Values: __VIEWSTATE=%2FwEPDwULLTE2MTY2ODcyMjlkZJ3NbEPOwkaa9B4UXSJtqYSQBihLaZZ9uYNPO%2Fu0XD1G&txtName=
Form ID: form3
Form Values: single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
The problem is that in the first loop, the Form ID should be form2, not form1. I know this because txtName is a part of form2, not form1.
Anything I can do to remedy this?
Thanks
Kevin
Don't use forms as containers for the pieces you want to serialize. Put a different container around them, then serialize the inputs, selects, and textareas inside those containers.
HTML snippet:
<div id='SerializationContainer'>
<input type="text" id="txtName" name="txtName" />
</div>
<div id='SerializationContainer2'>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br />
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br />
<input type="checkbox" name="check" value="check1" id="ch1" />
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2" />
<label for="ch2">check2</label>
<br />
<input type="radio" name="radio" value="radio1" checked="checked" id="r1" />
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2" />
<label for="r2">radio2</label>
<input type="submit" name="btn" id="btn" onclick="showValues()" />
</div>
Script Snippet:
$("#SerializationContainer input,SerializationContainer select, SerializationContainer textarea").serialize();
$("#SerializationContainer2 input,SerializationContainer2 select, SerializationContainer2 textarea").serialize();
You can't have nested forms. It's not valid HTML.
You can have multiple forms per page, but they cannot be nested. ie.
<form name="form2" id="form2" action="#">
<input type="text" id="txtName" name="txtName" />
</form>
<form runat="server" method="post" action="CacheTesting.aspx" id="form1" name="form1">
[asp.net content goes here]
</form>

How to change the HTML elements dynamically in my case?

I have a group of radio buttons on my page:
<form ...>
<input type="radio" name="people" checked> Student
<input type="radio" name="people"> Teacher
<input type="radio" name="people"> Assistant
<!-- Here is the dynamic content, which could be check boxes or radio buttons-->
</form>
The feature I would like to implement is:
Based on the selection of the radio buttons, the content after the radio buttons will change dynamically. (The radio buttons and the content are inside a form.)
For example:
If "student" is selected, the dynamic content part is (check boxes):
<input type="checkbox" name="name" /> Name <br />
<input type="checkbox" name="Age" /> Age <br />
<input type="checkbox" name="grade" /> Grade <br />
If "Teacher" is selected, the dynamic content part is (check boxes & radio buttons):
<input type="checkbox" name="subject" /> Subject <br />
<input type="radio" name="code" checked> 111
<input type="radio" name="code"> 222
<input type="radio" name="code"> 333
If "Assistant" is selected, the dynamic content part is other check boxes.
How to implement this dynamic content change in jQuery?
What I tried
I tried to create HTML elements dynamically in Javascript, but I feel it is not a good way since I have to write HTML elements in Javascript as strings.
Try this
Working demo
Markup change
<form ...>
<input type="radio" name="people" value="student" checked> Student
<input type="radio" name="people" value="teacher"> Teacher
<input type="radio" name="people" value="assistant"> Assistant
<div class="content student">
<input type="checkbox" name="name" /> Name <br />
<input type="checkbox" name="Age" /> Age <br />
<input type="checkbox" name="grade" /> Grade <br />
</div>
<div class="content teacher" style="display:none;">
Teacher content
</div>
<div class="content assistant" style="display:none;">
Assistant content
</div>
</form>
Js
$(function(){
$("input[name=people]").click(function(){
$("div.content").not("."+this.value).hide();
$("."+this.value).show();
});
});
put all three possible elements in your static html and wrap each part with a div. Then Show and hide the divs on click
If I understand your question correctly... I would create different divs that are hidden that contain the combinations that you are looking for. Then on the onclick of the radio button I would hide divs that you don't want shown and show the divs that you are looking for.

HTML - I cannot write in some textboxes shown dynamically by javascript in internet explorer

I have 2 forms on my page.
The first one is always visible and the second one is hidden at first.
When the user clicks a specified radio option, the second form shows up.
In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.
The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.
Here is some code:
The first form:
<form name="calendar" action="" method="post">
<input type="text" name="n" />
<input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
<input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
<input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
<input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>
The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.
The second form is:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
<input type="text" name="d" />
<input type="text" name="e" />
</form>
</div>
The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.
My javascript
<script type="text/javascript">
function showSecondForm()
{
if(document.calendar.t[2].checked)
{
document.getElementById('customForm').style.display = 'block';
}
else
{
document.getElementById('customForm').style.display = 'none';
}
}
</script>
In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.
So the code must be:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" maxlength="255" />
<input type="text" name="b" maxlength="255" />
<input type="text" name="c" maxlength="255" />
<input type="text" name="d" maxlength="255" />
<input type="text" name="e" maxlength="255" />
</form>
</div>
Try this:
<script type="text/javascript">
function showSecondForm() {
document.getElementById('customForm').style.display='block';
}
</script>

Categories