insertBefore stops working in form If I add div - javascript

I created dynamic form in which I can add as many authors as I want to.
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</form>
where function add_author() adds to myform new paragraph denoted below as para
document.myform.insertBefore(para, document.getElementById("add_author_button"));
It works perfectly, but then I wanted to add some styles to it. So I added div:
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<div id="authors">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</div>
</form>
After such modification buttons do not respond.

Although you can use document.<form name> for forms, you can't do that for arbitrary elements like your authors div. Why not just use getElementById()?
document.getElementById("authors").insertBefore(para, document.getElementById("add_author_button"));

Related

Selecting one <td> from a table

I have a table which consist of user added data. All the 's added are added with a equal button. Like this:
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(".closeEarlyForm").fadeToggle();
});
});
I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.
You can try using this keyword with parent() and find():
$(this).parent().find(".closeEarlyForm").fadeToggle();
Demo:
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(this).parent().find(".closeEarlyForm").fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>

Trying to react to data on an html form using javascript

I am not quite sure what is going wrong here. I am not seeing values logged to the console upon selecting the "submit" event on the form.
Here is my html:
<div>
<form class="submit-film">
<p class="email">Email</p>
<input class="field" id="email" placeholder="youremail#example.com">
<p class="project_link">Link to your project:</p>
<input class="field" id="link" placeholder="https://vimeo.com/myfilm">
<p class="pw">Password to access film:</p>
<input class="field" id="pw" placeholder="(password to access project)">
<p class="number">How many screeners do you want?</p>
<input class="field" id="screenerAmount" placeholder="8 screeners">
<p class="please">Please attach a questionaire if you have one preparred:</p>
<button class="select">Select file</button>
<p class="length">How many minutes is your project?</p>
<input class="field" id="minutes" placeholder="15 minutes">
<p class="questions">Do you have any additional comments or questions?</p>
<input class="field" id="comments" placeholder="(insert comments/questions here)">
<input type="submit" class="button_type" class="button_type:hover" value="submit">
</form>
</div>
</div>
<script src="wescreen.js"></script>
</body>
</html>
Here is the JavaScript:
const form = document.querySelector('.submit-film');
form.addEventListener('.submit', e=> {
e.preventDefault();
console.log(form.email.value);
console.log(form.link.value);
console.log(form.pw.value);
console.log(form.screenerAmount.value);
console.log(form.minutes.value);
console.log(form.comments.value);
});
just changed the class to the id and used getelementbyid hope this helps
<div>
<form id="submit-film">
<p class="email">Email</p>
<input class="field" id="email" placeholder="youremail#example.com">
<p class="project_link">Link to your project:</p>
<input class="field" id="link" placeholder="https://vimeo.com/myfilm">
<p class="pw">Password to access film:</p>
<input class="field" id="pw" placeholder="(password to access project)">
<p class="number">How many screeners do you want?</p>
<input class="field" id="screenerAmount" placeholder="8 screeners">
<p class="please">Please attach a questionaire if you have one preparred:</p>
<button class="select">Select file</button>
<p class="length">How many minutes is your project?</p>
<input class="field" id="minutes" placeholder="15 minutes">
<p class="questions">Do you have any additional comments or questions?</p>
<input class="field" id="comments" placeholder="(insert comments/questions here)">
<input type="submit" class="button_type" class="button_type:hover" value="submit">
</form>
</div>
</div>
<script>
const form = document.getElementById('submit-film');
console.log(form);
form.addEventListener('click', e => {
e.preventDefault();
console.log(form.email.value);
console.log(form.link.value);
console.log(form.pw.value);
console.log(form.screenerAmount.value);
console.log(form.minutes.value);
console.log(form.comments.value);
}); </script>
All your form elements are missing name attribute.
add them and try, something like this
<input class="field" name="email" id="email" placeholder="youremail#example.com">
console.log(form.email.value);
Refer Here for a sample demo
Edit 1:
Also some issue in this line
form.addEventListener('.submit', e=> {
It should be submit
form.addEventListener('submit', e=> {
Here is working fiddle

form validation in js

I am working on validating forms am not sure if I am making it more complicated than it needs to be. I have a variable that i'm comparing the element to and then on success replacing a img src with a check for success or x for failure. It is supposed to run my validateData function once the field is unfocused. Here is the js. My img src src does not change when I test the first field by putting in numbers to trigger the redx.png src change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementsById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
{
image1.src="check.png";
}
else{
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>
You can't just simply set the action to your JS script, you will need to use the onsubmit event handler.
<form onsubmit="validateData">
This will trigger the validateData method once the form is submitted. This won't stop the form from performing as usual though, you will need to stop that in your validateData method like so:
function validateData (event) {
// prevent the form from actually submitting
event.preventDefault();
}
There are multiple problems here; some have been mentioned by others. One of the main problems is you had getElementsById instead of getElementById. If you haven't figured out how to pull up the developer console and see what errors you're getting, now would be a good time.
Form validation can get pretty complicated and normally I use a library that does the heavy lifting. You might look into that.
Here is a working version of what I'm guessing you're trying to do. It's far from optimal but it's what I was quickly able to come up with.
https://jsfiddle.net/ec2L08vf/1/

jQuery content panel switcher prevents from accessing form elements

I'm using jquery.content-panel-switcher for a top menu in my site. It shows and hides different forms such as
<div id="switcher-panel"></div>
<!-- form to add, later do import here -->
<div id="adds-content" class="switcher-content set1 show">
<form action='/post' name='submitform' id="submitform" method='post' class='pure-form'>
<textarea columns="40" rows="4" name='entry[body]' id="statement" placeholder='enter a note here to visualize the words and their connections, you can also use #hashtags and #mentions.'><% if (url) { %><%= urltitle %> <%= url %> #bookmarks<% } %></textarea>
<div id="addToContextsLabel">contexts:</div>
<ul id="addToContexts"></ul>
<input type="hidden" id="addedContexts" name="addedContexts">
<input type="hidden" id="context" name="context" value="<%= context %>">
<input type="hidden" id="selectedContexts" name="selectedContexts" value="">
<input type="hidden" name="statementid" value="">
<br>
<input type='submit' name="submit" id="submitbutton" value="save" class="pure-button pure-button-primary">
</form>
</div>
<!-- form to find -->
<div id="finds-content" class="switcher-content set1">
<form class="pure-form" id="searchform">
<input type="text" id="search" size="17" maxlength="20" class="pure-input" placeholder="search...">
<input type='submit' name="submit" value="find" class="pure-button pure-button-primary">
</form>
</div>
Now when I try to access elements using document.submitform.submit.value = "edit"; it simply doesn't work even if the form shows up in my browser.
Do you know what the problem could be?
Thanks!
The problem here was that document.submitform was using the div elements as they were loaded by the browser. However, the jquery.content-panel-switcher js module was rendering those invisible because it simply copies them into another div after the page is loaded.
So what I had to do was to access the actual elements created by jquery.content-panel-switcher using jquery and then it worked fine.

Convert / Change Div element with Form element

I'm using panelbar, hence form tag is disturbing it's open/close animation
I found that form tag is creating issue, so I want div tag to convert to form tag when I click submit button.
Eg:
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</div>
Convert to:
<form name="input" id="" action="html_form_action.php" method="post">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit"/>
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income"/>
</div>
<input type="submit" value="Submit" />
</form>
So all I want is change the div with class ".myForm" to Form element
and closing div with closing form tag.
Is there any way to do this?
Use Javascript + jQuery:
$('.myForm').children().unwrap().wrapAll("<form name='input' id='' action='html_form_action.php' method='post'></form>");
This removes the wrapping div ".myForm" with the unwrap method. Then wraps it's children with the wrapAll method.
You can done this work simply using Jquery -
$(document).ready(function(){
$('form').html($('.myForm').html());
});
But if you want to do this, this is not correct because you use assign id of some element. So after append whole HTML into <form> you should remove .myForm.
Try This
For remove div with class .myForm after append innerhtml into form, you can simply use .remove.
$(document).ready(function(){
$('form').html($('.myForm').html());
$('.myForm').remove();
});
Try This
If you do like html5, you can check out html5 "form Attribute", which allows you to use the form elements wherever you like, and you don't need to wrap the contents inside form tags.
Check this out
<form name="input" id="myform" action="html_form_action.php" method="post"></form>
<div class="myForm">
<div id="detail">
Name: <input type="text" name="text_name" value="Some text here to edit" form="myform" />
</div>
<div id="income">
Income: <input type="text" name="text_income" value="your income" form="myform" />
</div>
<input type="submit" value="Submit" form="myform" />
</div>

Categories