Javascript - input fields added dynamically not available - javascript

I am using Javascript to add new rows to a table when an image is clicked in a classic ASP page. Those rows contain a number of input fields with id's and names that include the row number. I am adjusting those ids and names for the new row. The operation is visibly working and the new row appears at the bottom of the table where I wanted to put it. Also, if I select the new row then view selected source in Firefox, I can see the new row's HTML with id's & names as expected.
When I submit the form, however, the new fields are not availabe and the loop below does not report them:
dim sItem
For Each sItem In Request.Form
Response.Write(sItem)
Response.Write(" - [" & Request.Form(sItem) & "]<br>")
Next
I am no Javascript whizz and have no idea why this might not be working. Any help would be appreciated.

I know you've worked it out now, but just thought I'd write up my comment for future visitors (and hopefully some points too?!)
To ensure all the input fields you want are submitted with the form, they must be enclosed inside the <form> tags. e.g.
<html>
<body>
<form id="myForm" action="fooPage.asp" method="post">
<!-- These two input fields will be submitted to fooPage.asp -->
<input type="hidden" name="myhiddenField1" value="123" />
<input type="text" name="myTextField1" value="hello world" />
<input type="submit" value="Submit myForm" />
</form>
<!-- These two input fields won't be submitted to fooPage.asp -->
<input type="hidden" name="myhiddenField2" value="456" />
<input type="text" name="myTextField2" value="hello world 2" />
</body>
</html>

Related

append required input into existing form

I've got a small-big problem with ajax. Let's describe the situation:
I've got a form with submit=javascript:function()
function will call AJAX with some values, and on success I want to append some content with 'required' input to existing form.
I was trying many things, most from: How to set HTML5 required attribute in Javascript? , but still cannot reach it.
example code:
<form id="myFormID" action="javascript:mycustomsubmit()">
<input type="text" id="add" style="margin:2px;" required>
<input type="submit" name="add" value="Add" class="btn btn-primary">
<textarea rows="5" id="custom_add"></textarea>
(...) on ajax success clear form values and insert new required input:
$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');
so after this my html code looks like this:
<form id="myFormID" action="javascript:mycustomsubmit()">
<input type="text" id="add" style="margin:2px;" required>
<input name="anotherinput" type="text" required="">
<input type="submit" name="add" value="Add" class="btn btn-primary">
<textarea rows="5" id="custom_add"></textarea>
</form>
And in fact it is (with this difference, that new input has required=""), but this new input is not required at all - I can send form even if this input is empty. I was trying to do it by append required, required="required", required=true, required="true", by append just input and then jQuery .prop or/and .attr, by JS examples from link - but it is still not working.
2nd question: After ajax append content and clear values I've got red border around required input field - is there any simple way to remove it (but to show this border and info if user will try to send form with this input empty) in FF,Chrome,IE ?
First post here...
Thanks in advance for any advices!
edit:
what is interesting: when I've submitted my form few times (so I've got few input fields) and I executed $("input").attr('required',true).prop('required', false); then obviously form haven't got any required inputs. However when I've executed it with prop "true" then only original input is really required, all added by append still can be empty...
This is a question consisting of multiple questions. So I'll try to identify and answer them separately.
How to append a new input field after your input field with ID "add" on submitting the form?
Try this instead (your selector was wrong):
$("#add").val('');
$("#add").after('<input name="anotherinput" type="text" required>');
How do I get rid of the red border?
I suggest that you use jQuery to handle the form submit (not tested):
$('#myFormID').submit(function(e) {
// Checking if all required fields are filled out.
if (!e.target.checkValidity()) {
// TODO: Not all required fields are filled out. Do something e.g. adding your new input field?
// Preventing form submit to continue. I think this should prevent the red border. Not tested though...
e.preventDefault();
}
else {
// Everything is OK. Do whatever is needed.
}
});
I'm not sure if I got your questions, but I hope it helps.
Try this,
$("input").attr('required',true);
or
$("#name_add").attr('required',true);

First form of nested form tags not responding to css display:none

I have nested form tags like this
<form>
<h5>Main Form</h5>
<input type="text" />
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
<!-- Don't Show This Form -->
<form style="display:none">
<input type="text" />
<input type="text" />
</form>
</form>
The problem is the first form displaying although It's display none css inline
See the code in action http://jsfiddle.net/fZMKB/
I know I know, nested forms is against the rules But I have to use it this way for this reason
I need to reset bunch of inputs and form elements before jQuery event and I'm using this code
$('form').get(0).reset();
From this my earlier question How to reset forms elements (input,select,textarea,etc.) on events using jQuery
So the only reason I use form tag is I need to reset inputs and textarea, etc..
There's never a good reason to have nested forms. Instead, use proper HTML syntax and adjust your jQuery code accordingly. Here's some valid HTML markup:
HTML
<form>
<h5>Main Form</h5>
<input type="text">
<div class="one" style="display:none">
<input type="text">
<input type="text">
</div>
<div class="two" style="display:none">
<input type="text">
<input type="text">
</div>
</form>
Let's say you want to reset all text inputs, checkboxes, radio buttons, and select menus in the first subsection. This would only take two simple lines of jQuery:
$(".one input, .one select").val("");
$(".one textarea").html("");
If you want to restore default values, you should store the values in the HTML markup using the data attribute. Here's an example: http://jsfiddle.net/pgNrF/3/
You cannot have nested forms in HTML , you can have different forms but not nested
See this http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-form-element
Content model
Flow content, but with no form element descendants.
No, nested forms are forbidden.
This is expressed in the HTML 4.01 DTDs as:
<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->
— http://www.w3.org/TR/html4/interact/forms.html#h-17.3
A FORM has a mandatory start tag, mandatory end tag and can contain anything in %block or SCRIPT, except other FORMs.
XML DTDs aren't as expressive as SGML DTDs so in XHTML this rule is specified only in the human readable text of the specification:
form must not contain other form elements.
— http://www.w3.org/TR/xhtml1/#prohibitions
HTML 5 isn't an SGML application and doesn't have an official machine readable description of the language. It also expresses this rule in text:
Content model:
Flow content, but with no form element descendants.
— http://www.w3.org/TR/html5/forms.html#the-form-element
Reference

Input form only accept some few chars

My problem is that i have a input form with a php code that insert into table. And later retrieving data from msql database. The issue is that in the input people can type in what they want en edit the page. They are acctuly only suppose to be able to insert a link but now they can make new divs.
So i want to make so they only can use character (http://EXAMPLE.com)
the code i use
<form action="updatehref.php" method="POST">
<textarea type="text" name="href" id="href">
Link here</textarea>
<input type="submit" name="btn" id="btn" value="submit"/>
</form>
The textarea element that you are using (and malformed BTW) is c pable of holding upto 65K of text. If you only want a URL, which is about 255 characters then use
<input type='text' name='href' id='href' value=''>
You will need to use JavaScript AND a server-side language (incase JavaScript is disabled) to test the validity of the input.

Multiple Google CSE (Custom Search Engine) Boxes on Same Page

I am trying to implement two (different) Google CSE search boxes on the same page. The issue is that only the first instance works properly. For example, a sitewide search box in the header, then on certain pages, a 2nd search box that searches within a narrow silo of the site, etc.
This doesn't work properly in that with using the google-generated code for each box, they both get the same form ID, which is obviously not valid. This causes the google watermark branding to fail to appear in box #2, and also some auto/google generated variables fail to generate for the 2nd box also, such as the ss parameter (search session).
Now, the search itself works in both boxes, e.g. user searches, is taken to correct results page, and correct results are shown.
I am just trying to resolve this issue: how can I cause the 2nd form to get a different ID value (and still work properly - as google's javascript looks for the ID cse-search-box) I have tried adding a unique identifier to the ID and NAME attributes of the <form> element, but that caused the google.com javascript to malfunction (as I believe it looks for `cse-search-box' only)
Code is as follows:
search box 1:
<form id="cse-search-box" name="cse-search-box" class="search searchHeader" method="get" action="/search">
<input type="hidden" name="cx" value="partner-pub-0000000000000000:000" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" class="text_input" />
<input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
search box 2:
<form id="cse-search-box" name="cse-search-box" class="search searchWebDirectory" method="get" action="/search">
<input type="hidden" name="cx" value="partner-pub-0000000000000000:111" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" class="text_input" />
<input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
From: http://www.google.com/cse/docs/cref.html
The parameter in /coop/cse/brand named "form" outputs the first getElementById in the code. As such, using http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en will create a cse-search-box-targetted code, whilst giving it box2 will trigger on a different ID. The keyword searchbox_demo is reserved.
Give it a go if you'd like to: http://jsfiddle.net/JTV6f/1/ . Considering what you are doing, however, if I were you, I'd switch to either the V1 or V2 APIs.
This is a tested solution. Took me a while but I'm slow and I don't use CSS all the time.
Use the V1 code. When you select Get Code on the setup screen there is an option for the V1 code.
Put your search code in a div
div tag
searchcode
end div tag
Make your cse variables unique. That will be two places at the top of the code.
div id='cse'
and a little lower
customSearchControl.draw('cse', options);
For each search these should be the same but different than the other searches. I used cse0, cse1, cse2.
This will fix the searches so each search will work as specified but they will still share the same CSS.
So scope your styles with the scoped attribute.
style type='text/css' scoped
Do this for each search code. Now your searches can have their own look and feel, color, etc.
http://deltaboogie.com/search
Thanks,
Hairy Larry

Append values dynamically without page loading

I want to create a variable value by appending two different values without page reloading
Code:
{exp:safecracker channel="blending_log" return="sthome/blending/ENTRY_ID"}
<h3>Select and enter data</h3>
{!--------Receive data to create value--------}
<input type="hidden" name="title" value="" />
<br /><br />
Organic Or Conventional:
{field:org_con}
Agent Number:
{field:agent_number}
{!-----END Receive data to create lot number-------}
field type Organic or conventional is a select box.
User can select O (Organic) OR C (Conventional)
Agent Number is a text field user enter something like 018.
As soon as user select O OR C from Organic or conventional
and entered Agent number it should append value in hidden field.
eg:
<input type="hidden" name="title" value="O018" />
OR
<input type="hidden" name="title" value="C018" />
This should happen without page reloading
I googled and tried some JavaScript and Ajax codes.
But never work.
Sorry, I am a JavaScript and Ajax Noob.
Any help please.
<input type="hidden" name="title" value="C018" id="newVal"/>
This can be used to set the value
document.getElementById("newVal").value="newValue";
Give the hidden field an Id eg:
<input type="hidden" name="title" value="" id="hiddenField"/>
then I would assume that you want the value of the hidden field to be after they fill out the number
(although you could check if both are filled out before adding the value to the hidden field)
**jQuery**
$('#Id_of_agent_number_HTMLElement').change(function () {
$('#hiddenField').val($('#Id_of_org_con_HTMLElement').val() + $(this).val());
});
Easiest solution is to use SafeCracker's dynamic_title parameter:
{exp:safecracker channel="blending_log" return="sthome/blending/ENTRY_ID" dynamic_title="[org_con][agent_number]"}
You can then remove your hidden "title" input.

Categories