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);
Related
I have three inputs in the following form. Two inputs type is text and another one input type is hidden. Now when I click the submit button then two input values need to set the hidden input before run the ajax query. Because, ajax will get the data from the hidden input only. I have tried it myself but, it's not working for me. Now, when I click the submit ajax working first then set the both values to hidden input.
<form>
<input type="text" class="date" value="2018-11-09">
<input type="text" class="time" value="15:00:00">
<input type="hidden" class="date-time" value="">
<button type="button" class="button">Submit</button>
</form>
For the following code I am assuming that the 'Submit' button has its type changed to 'submit' as this will give you more control of when the form is submitted:
$('form').submit(function(event) {
event.preventDefault(); // stop the form from automatically submitting
$('.date-time').val($('.date').val() + $('.time').val());
console.log($('input[type=hidden').val());
// call your ajax here
});
The important line here for your question is:
$('.date-time').val($('.date').val() + $('.time').val());
This sets the value of the input .date-time to the input of .date and .time, although I would recommend using ids instead of classes as they are unique
I have a form with validation on data (E.g the mobile number must contain 10 numbers and numeric) . once everything submitted i've pressed submit button then those data must send to the data base over the php file (access from from action=file.php)
im not sure if i type this form part correctly or not
please help
<form action="patientdetails.php" method="POST" name='registration' onSubmit="return formValidation()"/>
<input type="image" src="Images/submit.png" alt="Submit" name="submit" value="Submit" />
You can use code like this for form validation :
`<script>` <br>
`function formValidation(){`<br>
`var myform=document.registration;`<br>
`var num=myform.mobilenum.value;`<br>
`if(num<10){`<br>
`alert("invalid number");`<br>
`return false;`<br>
`}`<br>
`else{`<br>
`return true;`<br>
`}`<br>
`}`
`</script>`
`<form action="patientdetails.php" method="POST" name='registration' onSubmit="return formValidation()"/>`<br>
`<input type="number" name="mobilenum" />`<br>
`<input type="submit" name="submit" value="Submit" />`
Nothing in your form code will cause a problem with validating your input.
Not having any <input> elements does make it impossible for anyone to type the mobile number though.
There are some things which are wrong, out of date, or low quality…
There is no name attribute for form elements
Intrinsic event attributes like onsubmit are better replaced by JavaScript that uses addEventListener
Image type inputs are designed to provide server side image maps, if you just want a graphic to be your submit button you should probably have <button><img></button> instead
… but none would cause the problem you are describing.
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'));
});
I have this simple form:
HTML
<form>
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text" name="Email">
<button id="create" class="boton"
onclick="doSomething();" type="submit">Create!</button>
</form>
JS
function doSomething() {
var name, email;
name = document.getElementById("eName").value;
email = document.getElementById("Email").value;
putElementsIntoTheDOM(name, email);
}
When the user inputs some information I want to populate the DOM with the user input.
The example above works. But I think it can be done better. I just don't know how.
How can I wire the <button> so that when the user clicks it the form values are passed
to the function doSomething()?
Also, since I'm not sending the form values anywhere except populating the DOM, how can I
prevent the submission?
I've seen something like this but I can't get it too work.
<button id="create" class="boton" onclick="doSomething(this.form);"
type="submit">Create!</button>
If you don't want to send the form values anywhere, then you just need to remove type="submit" from your button.
Your example code works fine. I'm not sure what you mean by a 'better' way. More modern/idiomatic javascript would not be using the onclick attribute, but instead binding doSomething to the button. Using jQuery, that would look like:
$("#create").click(doSomething);
First of all you have to update your function declaration to be able to receive the variables you want to send
function doSomething(name,email) {
}
Secondly, if you have to send values of some fields to that function, you can do so on button click like this.
<button id="create" class="boton" onclick="doSomething(document.getElementById('eName').value,document.getElementById('Email').value);" type="submit">Create!</button>
However, using unobtrusive javascript is recommended, and for that jQuery is one of the options you can use for passing variables to your function neatly.
There is a difference between the type="submit" and type="button" that I didn't realize.
Also, the button and submit types react differently with onclick and onsubmit events.
For example
<form onclick="doSomething()">
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text" name="Email">
<button id="create" class="boton" type="button">Create!</button>
</form>
Notice that at the top of the form there is onclick.
The onclick is fired whenever you focus on an input element, and of course if you click the button.
Changing the form to <form onsubmit="doSomething(); but not changing the type="button" doesn't do anything. Clicking the button doesn't trigger the function.
By changing the type="submit"and keeping the head <form onsubmit="doSomething(); triggers the function when the button is clicked. A nice added functionality to this is that if you have any <input ... required="required"> the submit will only work if those fields are filled in (and your form will let you know about the required fields).
To prevent the submission/refreshing (since I'm only populating the DOM with user input) adding return false at the form head prevents submission
<form onsubmit="doSomething(); return false">.
Finally, to get the form values adding this:
<form onsubmit="doSomething(this); return false> and then
function doSommething(formInfo) {
var name = formInfo.eName.value;
var email = formInfo.Email.value;
...
}
I have a form generated dynamically with the method .append() of jQuery.
I can add any number of new input, textbox, cmbbox, etc...
But the problem is that when I do the sumbit of the form, the PHP target does not receive the new input added, but just the vars connected to the input already in the form before the append().
Any ideas?
The javascript:
$("#button").live('click',function add(){
$("#list").append(
'<li style="height:20px;">'
+'<input type="text" class="text" id="prova" name="prova[]" value="prova">'+
'</li>'
);
});
The Html:
<input type="submit" id="button" value="Add input">
<form name = "form" id="form" action="post.php" method="POST">
<ul style="width:670px;padding:0px 0px 30px 0px" id="list">
</ul>
<input type="submit" id="submit" value="Submit">
</form>
The PHP:
<?php
print_r($_POST);
?>
Problem 1:
Your #button should not be of type submit, since you just want to use it to add to the form and not submit the form. So you should have:
<input type="button" id="button" value="Add input">
Problem 2:
You are overwriting your variables. The name is the variable sent with the form, so each input addition must have a new name, or the variable must be an array.
Additionally, you can't have more than one element with the same id.
The simplest way to solve this is to make prova an array by using the form prova[]:
$("#button").live('click',function() {
$("#list").append(
'<li style="height:20px;">' +
// Removed repetitive ID and made prova an array
'<input type="text" class="text" name="prova[]" value="prova"></li>'
);
});
jsFiddle example
You are intercepting the click event and adding elements to the form, but the event has already started, and will complete its default action (submit the form) without re-checking the content of the form.
You should stop the event after adding the fields (preventDefault should be the right choice), and then re-submit the form.
Something along these lines:
$('#button').live('click', function add(event){
event.preventDefault();
$('#list').append(...);
$('#form').submit();
});
I haven't tested it, but I'm pretty confident that it should work :)
Just to clarify, and putting any other problems aside, #Claudio's note is the correct answer here. I just had the same problem, button type was 'button' and the new element's name was being dynamically incremented. Everything looked fine, but the added elements would not submit.
Then I noticed my form tags were inside the table tags. I moved them outside and it all worked as planned.
Have any code to show? In order for php to "see" the vars submitted, you have to ensure that it has the "name" attribute specified on the form elements. I have a feeling your issue is going to be with the jQuery not the php.
Best guess: You haven't set name attributes for your dynamically added elements.