Develop Reference

Adding new input fields using the button

I'm a novice at Laravel. How can I add new text input fields with the button and add data in each field separately? Add or plus button or whatever.
Below my code, which allows you to enter the sledge, but only in one field, in addition you have to separate the words with a comma.
<div class="card-body">
<form method="post" action="{{route('randomizeTeam.store')}}">
{{ csrf_field() }}
<div class="form-group">
<label for="players">Add player names</label>
<input type="text" class="form-control" name="players">
</div>
<div class="form-group">
<label for="teams">Add team names</label>
<input type="text" class="form-control" name="teams">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Send</button>
</div>
</form>
</div>

This is how you can do it in a simple way
$(function(){
var more_fields = `
<div class="form-group">
<label for="players">Add player name</label>
<input type="text" class="form-control" name="players[]">
</div>
<div class="form-group">
<label for="teams">Add team name</label>
<input type="text" class="form-control" name="teams[]">
</div>
`;
$('#add-more-field').on('click', (function (e) {
e.preventDefault();
$(".input-fields").append(more_fields);
}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-body">
<form method="post" action="">
{{ csrf_field() }}
<div class="input-fields">
<div class="form-group">
<label for="players">Add player name</label>
<input type="text" class="form-control" name="players[]">
</div>
<div class="form-group">
<label for="teams">Add team name</label>
<input type="text" class="form-control" name="teams[]">
</div>
</div>
<div class="form-group">
<button id="add-more-field" class="btn btn-secondary btn-sm">add more</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Send</button>
</div>
</form>
</div>
And in your controller, you will do something like this
foreach($request->get('players') as $i => $player) {
YourModel::create([
'player' => $player,
'team' => $request->get('teams')[$i]
]);
}

My form validation error message vanishes

I was trying to make a registration form using HTML, Bootstrap and JavaScript.
I am able to get the error message when a field is left empty, but the error message vanishes just after showing up. I don't know what am I doing wrong
function checkValidation() {
var firstName = document.getElementById('firstName').value;
if (firstName == "") {
console.log("enter");
document.getElementById('firstNameErrorMessage').innerHTML = "please enter";
} else {
console.log("done");
}
}
<div class="container-fluid">
<div class="container">
<h2>Registration Form</h2>
<form class="form-horizontal" name="myForm">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">
First Name
</label>
<div class="col-sm-10">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="Enter your First Name" name="firstName">
<div class="col-sm-12">
<p id="firstNameErrorMessage"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="checkValidation()">Submit</button>
</div>
</div>
</form>
</div>
</div>

You will need to use preventDefault in order to make it work as intended:
<div class="container-fluid">
<div class="container">
<h2>Registration Form</h2>
<form class="form-horizontal" name="myForm">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">
First Name
</label>
<div class="col-sm-10">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="Enter your First Name" name="firstName">
<div class="col-sm-12">
<p id="firstNameErrorMessage"></p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" onclick="checkValidation(event)">Submit</button>
</div>
</div>
</form>
and
function checkValidation(e) {
e.preventDefault();
var firstName = document.getElementById('firstName').value;
if (firstName == "") {
console.log("enter");
document.getElementById('firstNameErrorMessage').innerHTML = "please enter";
} else {
console.log("done");
}
}
Have a look here for some preventDefault questions:
How and when to use preventDefault()?
What's the difference between event.stopPropagation and event.preventDefault?

Saving dynamically added li and ul element to database using an array

I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.

Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );

Email validation for specific domain name

I have the following form. I want to validate the email field .it should only contain for domain name "#somename.com " when the user clicks submit.
The mail should only be validated when the check box is clicked to show the email field.
If the email is invalid i want to prevent submission
<form class="form-horizontal" id="rForm" data-toggle="validator" role="form">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<label class="checkbox-inline col-xs-10">
<input type="checkbox" ID="chkbx"> Email
</label>
</div>
</div>
<div class="form-group email">
<div class="col-xs-offset-3 col-xs-8">
<div class="col-xs-8">
<input type="text" class="form-control " placeholder="Enter email">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<input type="reset" class="btn btn-default" id="rset" value="Reset">
<input type="submit" class="btn btn-primary" id="submit" value="Submit">
</div>
</div>
</form>
JS
$("#submit").on('keypress click', function(e){
e.preventDefault();
$('#chkbx').hide();
$('#chkbx').click(function () {
// This will show / hide your element accordingly
$('.email').toggle();
});
});

Checkout JavaScript RegEx to determine the email's domain (yahoo.com for example). You can use that and augment your example:
$('#chkbx').click(function() {
// This will show / hide your element accordingly
$('.email').toggle();
});
$("#submit").on('click', function(e) {
e.preventDefault();
if ($('#chkbx').is(':checked')) {
// https://stackoverflow.com/questions/3270185/javascript-regex-to-determine-the-emails-domain-yahoo-com-for-example
console.log(/#testdomain.com\s*$/.test($('#email_input').val()));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" id="rForm" data-toggle="validator" role="form">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<label class="checkbox-inline col-xs-10">
<input type="checkbox" ID="chkbx" checked>Email
</label>
</div>
</div>
<div class="form-group email">
<div class="col-xs-offset-3 col-xs-8">
<div class="col-xs-8">
<input id="email_input" type="text" class="form-control " placeholder="Enter email">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<input type="reset" class="btn btn-default" id="rset" value="Reset">
<input type="submit" class="btn btn-primary" id="submit" value="Submit">
</div>
</div>
</form>

Use the following function to test for your email.
EDIT:
You first need to add a name= and id= to your email input field.... So what you want to do is:
<input type="text" class="form-control " placeholder="Enter email" name="email" id="email">
and then do:
function testEmail(string) {
var regex = /.+#somename.com$/i;
return regex.test(string);
}
//testEmail("nope#test.com"); // false
//testEmail("what#somename.com.other"); //false
//testEmail("yeah#somename.com"); //true
//testEmail("#somename.com"); // false
$('form').submit(function(e){
var values = $('form').serialize();
if(!testEmail(values.email))
e.preventDefault();
// your submission code goes here.
})

Post data to hidden iframe then show it in the same page wtihout reload

I'm a little newbie with jQuery, ajax and JavaScript. I need a little help to find out how to post data to a hidden iframe and then display it with the same button.
Here is what I've tried so far:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12" id="target">
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#target").show();
});
$("#target").hide();
});
$("#target").html('<object name="mydata" data="http://testurl.com/testing"></object>');
</script>
</div>
</div>
Thank you for your help.

What you should do, if you really need to do it this way is:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<iframe id="mydata" style="border:0; height:0;"></iframe>
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#mydata").css("height", 300);
});
});
</script>
How ever I do recomend you to have a look at jQuery's $.post() documentation and .serialize() documentation. you could to something like this instead:
<form id="testform" name="testform" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div id="succesResult"></div>
<script>
$(document).read((function(){
$('#testform').on('submit', function() {
var data = $( this ).serialize();
$.post("http://target.url", data, function(resultFromServer){
//success callback
$("#succesResult").html(resultFromServer); <--result could be html
})
});
}
</script>