We Keep Coding

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);

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);

It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

prevent button to reset textbox value

I am trying to create mcq question and able to add the question. but the problem appear when i already fill the textbox and when i press the add question button, the textbox value always disappear.
<form name="newdocument">
<div id="questions" data-role="fieldcontain"><input type="text" value="dsa"/></div>
<input type="button" value="Add Question" onclick="AddQuestion();" />
</form>
the javascript code is on http://jsfiddle.net/Xv3Xq/1/

Dont use innerHtml+=, its bad. The stuff you write in an input field will get erased, since its not considered when using innerHtml but rather erased. Use jQuery! Something like:
$('#addQuestion').click(function() {
$('<input />').appendTo($('#questions'));
});

HTML: text input is not being submitted

I have an HTML form with many fields, including a text field, that is,
<input name="my_field" type="text"></input>
Now, this text field is being changed by tons of JavaScript, jQuery and CSS code. The result of all this interaction is that when the form is submitted, this particular text field simply gets ignored (it is like that field was not there). I am not saying it get submitted with empy text, it simply doesn't appear in the list of fields submitted...
Because there are tons of code affecting this particular text field, I don't know what is causing this weird behavior. So I was wondering if someone could tell me what kind of HTML attribute (or JavaScript code, or jQuery code, or ...) could result in a text field being ignored.
At the end of all this interaction, I get the following HTML code (retrieved using the "Inspect Element" from Chrome):
<input id="id_my_field" maxlength="200" name="my_field" type="text" class="tt-query" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;" data-original-title="" title=""></input>

You should add a name attribute to the input:
<input type="text" name="myinput" />

Add the name attribute, like this:
<input name="myField" type="text"></input>

How to select the content inside a textbox when loading the page?

I'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!

3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.

You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.

you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.