This is my code. I have tried multiple other methods posted using jquert, but I must have not been writing it correctly. I'm not sure how to apply this to my code. But the second submit button needs to be disabled when the inputs are not filled out.
3
-
if I may , can you try not nesting forms, as it is considered a bad practiceSatya– Satya2016-07-20 00:54:05 +00:00Commented Jul 20, 2016 at 0:54
-
@Satya: Where do you see form nesting?Louys Patrice Bessette– Louys Patrice Bessette2016-07-20 01:22:08 +00:00Commented Jul 20, 2016 at 1:22
-
Possible duplicate of Disable submit if inputs empty jqueryuser4520208– user45202082016-07-20 05:22:46 +00:00Commented Jul 20, 2016 at 5:22
Add a comment
|
2 Answers
I changed your "second" button type for button instead of sumbit.
And I removed the attribute disabled.
You need to perform an check on all inputs which resutl will decide if the form has to be submitted or not.
<input type="hidden" name="submit" value="Submit">
<input type="button" id="button" value="Submit">
</form>
<script>
$("#button").click(function(){
var flag=true;
// check all input values
$("input[type='text']").each(function(){
if( $(this).val()=="" ){
flag=false;
}
});
// submit the form
if(flag){
$("form#input").submit()
}else{
// You should do something here.
alert("Please fill all inputs!");
}
});
</script>
You should think of what to do if flag is false...
Like something to inform the user he has to fill all inputs.
Note: Load the jQuery library in your head to make it work.
Comment on your "naming"...
That may be confusing to use names, classes or ids with input or button.
Try to use descriptive words that are not the same as methods or HTML tags.
;)
answered Jul 20, 2016 at 1:24
Louys Patrice Bessette
34k7 gold badges40 silver badges69 bronze badges
7 Comments
KidMessiah
pastebin.com/R5fYUS9t I tried to add your code, did I do something wrong because it's not working...
Louys Patrice Bessette
I edited my answer with an example of what you could do.
alert() is a JavaScript function to trigger an alert box. There are various ways to inform the user on errors... Depending on what you want to do. alert() is the easyiest... A nicer alert can be achieved with SweetAlert.KidMessiah
At the top of the page I am checking to see if the data has been submitted and if it does it shows the data. But now the button does not show the data after submitting. Nor does it get printed to XML. But once I remove your code it works again. Not sure why this occurs.
KidMessiah
Sorry I don't quite understand. Can you please explain in further detail where I am meant to put that line?
Louys Patrice Bessette
Sorry... I'm getting tired I think. Check for the first line of my edited answer. Just add it.
|
use JQuery Function
$('form').submit(function(e){
var i=Number(0);
$('input').each(function(){
if($(this).val() == '')
i++;
});
if(i>0)
{
e.preventDefault();
}
});
