This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
What is the difference between 'remove' and 'removeChild' method in JavaScript?
(2 answers)
Closed 10 days ago.
The following code shows a group of input fields, and it adds a group of fields when "Add new group" is clicked. However, the "Remove group" button wouldn't remove the group that the button clicked belongs to.
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder").appendChild(oClone);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<form action="" method="post" autocomplete="off">
<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<div id="placeholder">
<div id="template">
<fieldset>
<legend>Group</legend>
<p>Item <input type="text" name="prof_item[]" /><br /></p>
<p>Duration <input type="text" name="prof_duration[]" /><br /></p>
<!-- =========================== -->
<!-- the following has no effect -->
<!-- =========================== -->
<p><button type="button" name="prof_remove[]" onclick="document.body.removeChild(this.parentNode.parentNode)">Remove group</button><br /></p>
</fieldset>
</div>
<!-- template -->
</div>
<!-- placeholder -->
<p><button type="button" name="add" onclick="Add();">Add new group</button></p>
</fieldset>
<p><button type="submit" name="Submit">Submit</button></p>
</form>
Related
This question already has answers here:
When to use single quotes, double quotes, and backticks in MySQL
(13 answers)
What to do with mysqli problems? Errors like mysqli_fetch_array(): Argument #1 must be of type mysqli_result and such
(1 answer)
How do I get PHP errors to display?
(27 answers)
Closed 1 year ago.
below in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
<?php
require "<includes/dbh.php";
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Bootstrap Admin Template : Dream</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<?php include "header.php"; include "sidebar.php" ?>
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Write a Blog on spot
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Write a blog
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form role="form" method="POST" action="includes/add-blog.php" enctype="multipart/form-data">
<div class="form-group">
<label>Title</label>
<input class="form-control" name="blog-title">
</div>
<div class="form-group">
<label>Meta Title</label>
<input class="form-control" name="blog-meta-title">
</div>
<div class="form-group">
<label>Blog category</label>
<select class="form-control" name="blog-category">
<?php
$sqlCategories="SELECT * FROM blog-category";
$queryCategories=mysqli_query($conn,$sqlCategories);
while($rowCategories=mysqli_fetch_assoc($queryCategories)){
$cId=$rowCategories['n_category_id'];
$cName=$rowCategories['v_category_title'];
echo "<option value='".$cId."'>".$cName."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Main image</label>
<input type="file" name="main-blog-image">
</div>
<div class="form-group">
<label>Alternate image</label>
<input type="file"name="alt-blog-image">
</div>
<div class="form-group">
<label>summary</label>
<textarea class="form-control" rows="3"name="blog-summary"></textarea>
</div>
<div class="form-group">
<label>Blog content</label>
<textarea class="form-control" rows="3" name="blog-content"></textarea>
</div>
<div class="form-group">
<label>Blog Tags seperated by commas</label>
<textarea class="form-control" rows="3" name="blog-tags"></textarea>
</div>
<div class="form-group input-group">
<label>Blog path</label>
<div class="input-group"> <span class="input-group-addon">www.sjg.com/</span>
<input type="text" class="form-control" placeholder="username" name="blog-path"></div>
</div>
<div class="form-group">
<label>Home Page Placement</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline1" value="option1" checked="">1
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline2" value="option2">2
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline3" value="option3">3
</label>
</div>
<button type="submit" class="btn btn-default" name="submit-blog">Add Blog</button>
</form>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<?php include "footer.php"; ?>
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
</body>
</html>
Above in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
Judging by where the page stops rendering, there's likely an error where your category dropdown is being populated. To check this you could add <?php error_reporting(E_ALL); ?> to the top of your file. Check the error_reporting docs here.
I'd also like to second #CBroe's observation that require "<includes/dbh.php"; doesn't look correct. Properly including that file may allow the category generation to occur and allow for the rest of the document to populate.
I'd also like to add that echo "<option value='".$cId."'>".$cName."</option>"; could be written as echo "<option value='{$cId}'>{$cName}</option>"; to help with human readability, if you so desired.
This question already has answers here:
What is the default button type?
(3 answers)
What's the point of <button type="button">?
(6 answers)
Closed 3 years ago.
I have a button inside a form in asp.net core. The form has it's own submit button which is supposed to trigger the create action when it is clicked. I have another button insde the form which is just calling a piece of javascript code. I don't understand why when I click on the button to call the javascript, the post action "Create" is called also afterwards. That is I see the alert box and then I get redirected by the action. I just want to display the alert without this triggering the action method.
function ValidateName() {
var name = document.getElementById('btnName').value;
alert(name);
}
<form asp-action="Create">
<div class="form-group">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="row">
<div class="col-md-6 text-center">
<button id="btnName" class="btn btn-primary btn-md center-block" Style="width: 150px;" OnClick="ValidateName()">Validate</button>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Créer" class="btn btn-default" />
</div>
</form>
you need to prevent the default behavior
function ValidateName(e) {
e.preventDefault();
var name= document.getElementById('btnName').value;
alert(name);
}
I have an onepage website with a form that submits user data by mail using PHP. When the user click on Submit, I need to open an overlay that contains a success message. The problem is that, when the form is submitted and the page refreshed, my overlay automatically desappear and the user does not have the necessary time to close it by himself. Could you help me with this topic?
Thank you!
Here is my form:
<form id="contact-us" method="post" action="#" >
<div class="col-xs-6 wow animated slideInLeft" data-wow-delay=".5s">
<!-- Name -->
<input type="text" name="name" id="name" required class="form" placeholder="Nombre" />
<!-- Email -->
<input type="email" name="mail" id="mail" required class="form" placeholder="E-mail" />
<!-- Subject -->
<input type="text" name="subject" id="subject" required class="form" placeholder="Asunto" />
</div><!-- End Left Inputs -->
<!-- Right Inputs -->
<div class="col-xs-6 wow animated slideInRight" data-wow-delay=".5s">
<!-- Message -->
<textarea name="message" id="message" class="form textarea" required placeholder="Mensaje"></textarea>
</div><!-- End Right Inputs -->
<!-- Bottom Submit -->
<div class="relative fullwidth col-xs-12">
<!-- Send Button -->
<button type="submit" id="submit" name="submit" class="form-btn semibold" onclick="openNav14()">Enviar</button>
</div><!-- End Bottom Submit -->
<!-- Clear -->
<div class="clear"></div>
</form>
Here are my functions:
function openNav14() {
document.getElementById("myNav14").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav14() {
document.getElementById("myNav14").style.width = "0%";
}
This question already has answers here:
Submit multiple forms with one submit button
(3 answers)
Closed 6 years ago.
This is my HTML code - the forms in this are not working. Please help to work out the JavaScript and the HTML to submit these forms with a single click to same database.
JavaScript for the buttons:
<script>
submitBothForms = function () {
document.forms["userinfo"].submit();
document.forms["userinfo1"].submit();
}
</script>
<script>
clearForms = function(){
document.forms["userinfo"].reset();
document.forms["userinfo1"].reset();
}
</script>
HTML code where the both the forms and the buttons exists both the buttons are clear and save the code must be submitted to a single PHP file to a single database and single table.
<div class="row">
<div class="col-sm-12">
<div class="bill-to">
<div class="step-one">
<h2 class="heading">Add new Shipping address</h2>
</div>
<div class="form-one">
<form action="userinfo.php" name="userinfo" method="POST">
<input type="text" name="name" required placeholder="Name">
<input type="email" name="email" required placeholder="Email">
<input type="text" name="address1" required placeholder="Address 1">
<input type="text" name="address2" placeholder="Address 2">
</form>
</div>
</div>
<div class="form-two">
<form action="userinfo.php" name="userinfo1" method="POST">
<input type="text" name="zip" required placeholder="Zip / Postal Code">
<select>
<option>-- Country --</option>
<option>United States</option>
<option>Bangladesh</option>
<option>UK</option>
<option>India</option>
<option>Pakistan</option>
<option>Ucrane</option>
<option>Canada</option>
<option>Dubai</option>
</select>
<input type="tel" name="contact" required placeholder="Mobile Phone *">
<button type="submit" class="btn btn-primary" style="margin-right: 15px;" onClick="submitBothForms()">Save</button>
<button class="btn btn-primary" onclick="clearForm()">Clear</button>
</form>
</div>
</div>
</div>
You cannot submit two forms using submit button. Only one form can be submitted by the button. Use ajax call to submit the form i.e give two ajax call for the form submit.
jQuery AJAX submit form
this is simply not possible, as each of your fomrs will trigger a rountrip/reload.
This question already has answers here:
Stop form refreshing page on submit
(20 answers)
Closed 6 years ago.
I am trying to add two numbers.Taking input from the user but I am not able to find that where I am going wrong. Every time I click on submit it just refreshes the page.
<!--Html -->
<html>
<body>
<div class="container-fluid">
<header>
<h1>Business Registration Address Setup</h1>
</header>
<form>
<label>number 1</label>
<input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
+<br>
<label>number 2</label>
<input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
<button type="submit" class="btn btn-info" onclick="submit1()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</form>
</div> <!-- End Container-->
<footer>
</footer>
<script type="text/javascript">
function submit1(){
var a = document.getElementByID("number1").value;
var b = document.getElementByID("number2").value;
var c = a + b;
document.getElementByID("screen1").innerHTML=c;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div class="container-fluid">
<header>
<h1>Business Registration Address Setup</h1>
</header>
<label>number 1</label>
<input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
+<br>
<label>number 2</label>
<input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
<button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>
<div class="screen" id="screen1"></div>
</div> <!-- End Container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
});
function submit1(){
var a = document.getElementById("number1").value;
var b = document.getElementById("number2").value;
var c = parseInt(a) + parseInt(b);
document.getElementById("screen1").innerHTML=c;
}
</script>
</body>
</html>
Edit
document.getElementByID -------> document.getElementById
var c=a+b ----------------------> var c = parseInt(a) + parseInt(b)
button type="submit" -----------> button type="button"
You are using type="submit" that's why page is refreshed.
You need to use type="button" to call your javascript function when button is clicked.
<button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>
Also you are using document.getElementByID which is not a function it is document.getElementById.
And you also need to parse the values to int to be added otherwise values will be just concatenated and not added.
var c = parseInt(a) + parseInt(b);