Adding a form in html using javascript

Adding a form in html using javascript - javascript

I am trying to configure on how to add a form whenever you click the add button. Can someone help me with this? I attached a jsfiddle so that you can fully understand what I am saying
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div style="display: none;" id = "form1">
<form action="" method="" id = "add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="<dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Mouse</a></li>
<li><a class="dropdown-item" href="#">Monitor</a></li>
<li><a class="dropdown-item" href="#">Keyboard</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
<button type="button" value ="Add Child" onclick="addForm();" id = "add-button">
Add
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
function addForm() {
document.getElementById('form1').style.display = 'block';
$("#add-order-form").clone().appendTo("#form1");
}
https://jsfiddle.net/u0pzeqry/1/

We're going to create a clone of your form and add it to a container div. Here's the HTML:
function addForm() {
var formsContainer = document.getElementById("formsContainer");
var newForm = document.getElementById("form1").cloneNode(true);
newForm.style.display = "block";
formsContainer.appendChild(newForm);
}
<div style="display: none;" id = "form1">
<form action="" method="" id = "add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle"
data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Mouse</a></li>
<li><a class="dropdown-item" href="#">Monitor</a></li>
<li><a class="dropdown-item" href="#">Keyboard</a></li>
</ul>
</div>
</div>
</div>
</form>
</div>
<div id="formsContainer"></div>
<button type="button" value ="Add Child" onclick="addForm();" id = "add-button">
Add
</button>
Here's a fork of your JS fiddle with the code working:
https://jsfiddle.net/TrostCodes/7cdhfqkn/8/

you can use js side instead of using HTML clone. I think that would be the ideal method for that.
var formcounter = 0;
function setForms(){
$("#wrapperFormContainer").append( '<form action="" method="" id="add-order-form'+ formcounter +'"><div>add-order-form'+formcounter+'</div></form>');
formcounter++;
}
#wrapperFormContainer{
display:inline-block;
width:100%;
background-color:green;
}
#wrapperFormContainer form{
display:inline-block;
margin: 5px;
background-color:red;
border:solid 1px #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapperFormContainer">
</div>
<button type="button" onclick="setForms()">Add form</button>

Related

Adding onclick function in anchor tag which is not working [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I am have made dropdown using bootstarap. I have added onlcick funtions in my anchor tags in dropdown. I just want make my text box readonly if one of the link is clicked on. I have used js to make text boxes read only. Please Help me to solve my problem. Below is my code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="molarMass" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Moles</label> <input
type="text" class="form-control"
id="molarMass" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript" src="../javascript/script.js"></script>
</body>
</html>
My Java Script File:
function readonlyForGivenMass() {
var x = document.getElementById("givenMass").readOnly;
}
function readonlyForMolarMass() {
var x = document.getElementById("molarMass").readOnly;
}
function readonlyForMoles() {
var x = document.getElementById("moles").readOnly;
}
Actually this is small part of java project. Hence I have used jsp and jstl.
My file structure:

you are just assigning but declaring it, just need to make it true, so given id would be readonly, please find below snippets
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="molarMass" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="moles" class="form-label">Moles</label> <input type="text" class="form-control" id="moles" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript" src="../javascript/script.js"></script>
<script>
function readonlyForGivenMass() {
document.getElementById("givenMass").readOnly = true;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = false;
}
function readonlyForMolarMass() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = true;
document.getElementById("moles").readOnly = false;
}
function readonlyForMoles() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = true;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="moles" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Moles</label> <input
type="text" class="form-control"
id="molarMass" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass(event)" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function readonlyForGivenMass(event) {
event.preventDefault()
var x = document.getElementById("moles").readOnly= false;
var x = document.getElementById("givenMass").readOnly= true;
var x = document.getElementById("molarMass").readOnly= false;
}
function readonlyForMolarMass(event) {
event.preventDefault()
var x = document.getElementById("molarMass").readOnly = true;
var x = document.getElementById("moles").readOnly= false;
var x = document.getElementById("givenMass").readOnly= false;
}
function readonlyForMoles(event) {
event.preventDefault()
var x = document.getElementById("molarMass").readOnly = false;
var x = document.getElementById("moles").readOnly = true;
var x = document.getElementById("givenMass").readOnly= false;
}
</script>
</body>
</html>
if you want means you can remove event.preventDefault in each function and
I hope this code will works for you. Thank you

My audio and search features don't function as intended

I'm making a quick website and testing/trying out javascript, html, and css, but I've run into a couple of errors that I can't figure out how to deal with.
In my dropdown menu with my search bar, the list of items that you can search show even when you're not selected onto the search.
I'm trying to get an audio to play when you increment the counter, but the audio randomly plays when you load the website.
2a) The audio doesn't play when you click the increment button even though the PlaySound() function is referenced through onclick with the button.
function search()
{
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("pgsearchbar").value;
filter = input.toUpperCase();
ul = document.getElementById("searchitems");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++)
{
finder = li[i].getElementsByTagName("a")[0];
letter = finder.textContent || finder.innerText;
if (letter.toUpperCase().indexOf(filter) > -1)
{
li[i].style.display = "";
}
else
{
li[i].style.display = "none";
}
}
}
let counter = 0;
function increment()
{
counter++;
document.querySelector("#counter").innerHTML = counter;
}
function PlaySound(soundObj)
{
document.getElementById(soundObj).play();
}
function reset()
{
document.querySelector("#counter").innerHTML = 0;
counter = 0;
}
.pageselector
{
position:absolute;
bottom:10%;
left:45%;
}
.banner
{
background-image:url("sky.jpg");
padding:60px;
color:lightblue;
}
.banntxt
{
font-size:50px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family:"Faster One";
}
.navbar-brand
{
font-family:"Faster One";
font-size:25px;
}
li
{
margin:3px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Faster One">
<title>My Webpage</title>
</head>
<body>
<div>
<div class="banner">
<h1 class="banntxt">abcdefghijklmnop</h1>
</div>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
<span class="navbar-brand mb-0 h1">ABC</span>
<h2 style="font-size:26px;">Contact us at: abcdefgh#gmail.com | ###-####-####</h2>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="navbaritems" class="navbar-nav">
<li class="nav-item active">
<button type="button" class="btn btn-info disabled">Home</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">About me</a>
</li>
<li class="nav-item">
<button onclick="window.location.href='#';" type="button" class="btn btn-info">Blah</a>
</li>
<li>
<form class="form-inline">
<input id="pgsearchbar" class="form-control mr-sm-2" type="search" onkeyup="search()" placeholder="Search" aria-label="Search">
<ul id="searchitems">
<li>
Homepage
</li>
<li>
About Me
</li>
<li>
Page2
</li>
<li>
Page3
</li>
<li>
Page4
</li>
</ul>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</li>
</ul>
</div>
</nav>
</div>
<div class="card text-center" style="width:11rem; left:60px; bottom:-30px;">
<div class="card-body">
<h5 class="card-title">Counter</h5>
<p class="card-text" id="counter">0</p>
<button onclick="increment(); PlaySound(coin)" class="btn btn-primary">Increment</button>
<button onclick="reset()" class="btn btn-danger" style="margin:5px">Reset</button>
</div>
</div>
<div style="position:absolute; bottom:10%; left:48.04%;">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Page 1
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item disabled">1</a>
<a class="dropdown-item" href="page2.html">2</a>
<a class="dropdown-item" href="page3.html">3</a>
<a class="dropdown-item" href="page4.html">4</a>
</div>
</div>
<button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script type="text/javascript" src="functions.js"></script>
<embed src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true">
</body>
</html>

The audio works differently because you have a <embed> tag instead of an <audio> tag
to play the audio:
on the button add the 's:
<button onclick="increment(); PlaySound('coin')" class="btn btn-primary">Increment</button>
and in the audio file, replace with an audio tag
<audio src="coin.wav" autostart="false" width="0" height="0" id="coin" enablejavascript="true"></audio>

How to add input field inside form as per tab active using Javascript/Jquery

I need to add the input field dynamically as per tab active using javascript/jquery. I am giving my code below.
<form action="" method="POST">
<div class="panel panel-default">
<ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
<li class="active" id="Generaltab">General</li>
<li class="">Types</li>
<li class="">Tariff</li>
<li class="">Payment Methods</li>
</ul>
<div class="panel-footer">
<input name="updatesettings" value="1" type="hidden">
<input name="tariffsettings" value="1" type="hidden">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Here I need when tab General is active then <input name="updatesettings" value="1" type="hidden"> will add before submit button and if tab Tariff is active <input name="tariffsettings" value="1" type="hidden"> will add before form and the previous one will remove using Javascript or Jquery.

You need to add on more div before submit button
<form action="" method="POST">
<div class="panel panel-default">
<ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
<li class="active" id="Generaltab">General</li>
<li class="">Types</li>
<li class="">Tariff</li>
<li class="">Payment Methods</li>
</ul>
<div class="panel-footer">
<div id="hiddenDiv"></div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Then you can check if General tab is active then you can append to "hiddenDiv" else you can blank that div, vise versa for tariff tab
var selected = $("#cartabslist").tabs( "option", "selected" );
var selectedTabTitle = $($("#cartabslist li a")[selected]).text();
$("#hiddenDiv").html('');
if(selectedTabTitle == 'General')
{
$("#hiddenDiv").append('<input name="updatesettings" value="1" type="hidden">');
}
else if(selectedTabTitle == 'Tariff')
{
$("#hiddenDiv").append('<input name="tariffsettings" value="1" type="hidden">');
}

Since you are willing to use jQuery, this can be done quite easily. Add a seperate class(in this case inputSelector) on which you want the functionality, and the name of the input you need, as a data(here data-name) to the item.
<form action="" method="POST">
<div class="panel panel-default">
<ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
<li class="inputSelector active" data-name='updatesettings'>General</li>
<li class="">Types</li>
<li class="inputSelector" data-name='tariffsettings'>Tariff</li>
<li class="">Payment Methods</li>
</ul>
<div class="panel-footer">
<input name="updatesettings" id='someId' value="1" type="hidden">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
And add the following js to the ready function:
$('.inputSelector').click(function(){
$('#someId').prop('name',$(this).data('name'));
});

Hope this may help. And also, I have removed hidden property and have made some changes for demonstration purpose.
let UICarTabsList = document.querySelector('#cartabslist');
let UISettingsInput = document.querySelector('#settings-input');
document.querySelector('#cartabslist #Generaltab').addEventListener('click', (e) => {
UISettingsInput.innerHTML = `<input name="updatesettings" value="1" type="" placeholder="genral">`;
});
UICarTabsList.querySelector('#tarifftab').addEventListener('click', (e) => {
UISettingsInput.innerHTML = `<input name="tariffsettings" value="2" type="" placeholder="tarrif">`;
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="panel panel-default">
<ul class="nav nav-tabs nav-justified" role="tablist" id="cartabslist">
<li class="nav-link active" id="Generaltab"> General</li>
<li class="nav-link"> Types</li>
<li class="nav-link" id="tarifftab"> Tariff</li>
<li class="nav-link"> Payment Methods</li>
</ul>
</div>
<br />
<div class="panel-footer">
<form action="" id="main-form" method="POST">
<div id="settings-input"><input name="updatesettings" value="1" type="" placeholder="genral"></div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

jQuery ajax call not working on firefox

[SOLVED] I had to change the button tag to any other tag like < a > tag to call the function. Such as:
<a class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '<?php echo $product_id;?>');"><i class="fa fa-cart-plus"></i> Add To Bag</a>
[Problem]
In my project, am sending out data from a JavaScript to PHP script using an Ajax call. I tried to look for an answer on Stackoverflow, but not success therefor I made a question.
This code is working properly on my chrome browser, but it fails when I try it out in Firefox.
product-detail.php
function all_check(action, productid){
var product_id = productid;
var serial = document.getElementById("showserial").value;
var size = document.getElementById("showsize").value;
var qty = document.getElementById("quantity").value;
var queryString = "";
if(action != "") {
switch(action) {
case "add":
queryString = 'action='+action+'&code='+ product_id+'&serial='+serial+'&quantity='+qty+'&size='+size;
alert(queryString);
break;
case "empty":
queryString = 'action='+action;
break;
}
}
$.ajax({
url: "ajax_action.php",
type: "POST",
dataType:"json",
data: queryString
}).done(function(data){ //on Ajax success
alert("success");
$("#cartcount").html(data.items); //total items in cart-info element
console.log("bla bla bla");
});
}
Here is the button which called this function:
<button class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '<?php echo $product_id;?>');"> Add To Bag</button>
On button click, all_check function is called. But on Firefox, ajax call does not work.I checked it by using alert and console inside done function. I cleared cache repeatedly. But it did not work.
Anyone please kindly help me on this problem.
EDIT 1 My firefox version is 54.0 (32-bit).
I am using Google CDN for jQuery :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
EDIT 2
Complete rendered html from firefox:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Bootstrap -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap-select.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function all_check(action, productid){ // from 262 line
var product_id = productid;
if(document.getElementById("showsize").value==""){
alert("Please Select size");
return false;
}
else if(document.getElementById("quantity").value==""){
alert("Please Select Quantity");
document.getElementById("quantity").focus();
return false;
}
else{
var qtyid = +document.getElementById("quantity").value;
typeof(qtyid);
var available = +document.getElementById("showavailable").value;
typeof(available);
if(qtyid > available ){
alert("Sorry, Available Quantity is "+ available);
return false;
}
}
console.log("button clicked");
var serial = document.getElementById("showserial").value;
var size = document.getElementById("showsize").value;
var qty = document.getElementById("quantity").value;
var queryString = "";
if(action != "") {
switch(action) {
case "add":
queryString = 'action='+action+'&code='+ product_id+'&serial='+serial+'&quantity='+qty+'&size='+size;
alert(queryString);
break;
case "empty":
queryString = 'action='+action;
break;
}
}
$.ajax({ //make ajax request to cart_process.php
url: "ajax_action.php",
type: "POST",
dataType:"json", //expect json value from server
data: queryString
}).done(function(data){ //on Ajax success
alert("success");
$("#cartcount").html(data.items);
console.log("bla bla bla");
});
}
function get_availble(serial)
{
document.getElementById('showserial').value = serial;
var size_n_available = document.getElementById('product_size').value;
document.getElementById('showsize').value = size_n_available.substring(0,2) ;
document.getElementById('showavailable').value = size_n_available.substring(2) ;
alert(document.getElementById('showavailable').value);
}
</script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3 hidden-xs">
<img src="assets/images/logo.png" class="img-responsive" alt="">
</div>
<div class="col-md-7 col-sm-6">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-sm" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-sm" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default navbar-static">
<div class="container">
<div class="row">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="assets/images/logo.png" class="img-responsive" alt="" width="75"></a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home"></i></li>
<li class="dropdown">
Category <span class="caret"></span>
<ul class="dropdown-menu dropdown-cart dropdown-content" role="menu">
<li class="">Tote bags</li>
<li class="">Mugs</li>
<li class="">T-shirts</li>
<li class="">Throw Pillow</li>
<li class="">Notebooks</li>
<li class="">Art print</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Help</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> <span class="glyphicon glyphicon-shopping-cart"></span>
Items <span id="cartcount">
</span>
<span class="caret"></span></a>
<div id="shopping_cart_results"></div>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row top-left-message" style="background:#fff">
</div>
</div>
<div class="col-md-1 col-md-offset-2 collapse navbar-collapse js-navbar-collapse">
Artist
</div>
<div class="col-md-1 collapse navbar-collapse js-navbar-collapse">
Home Junction
</div>
</div>
</div>
</div>
<div class="container">
<div class="row" style="margin-top:15px;">
<div class="col-md-5 col-sm-6">
<div id="view-thumb">
<img id="theImg" class="my-foto img-responsive" src="productimage/bigtea-baggin-mugs.jpg" data-large="productimage/bigtea-baggin-mugs.jpg" title="">
</div>
</div>
<div class="col-md-7 col-sm-6">
<div class="productHeader container-fluid">
<div class="row">
<div class="col-sm-8">
<h2>Tea baggin Mug</h2>
</div>
<div class="col-sm-4">
<p style="padding-top: 26px; padding-right:10px; font-family: Helvetica; color:#999; font-size:17px;" class="pull-right">Tk 300</p>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="" method="post">
<div class="form-group">
<select id="product_size" name="product_size" class="form-control" onchange="get_availble(258)" required>
<option value="-1">Select Size</option>
<option value="125">11 oz</option>
<option value="135">15 oz</option>
</select>
<input class="form-control" id="showsize" name="showsize" placeholder="show size" type="text">
<input class="form-control" id="showavailable" name="showavailable" placeholder="show Quantity" type="text">
<input class="form-control" id="showserial" name="showserial" placeholder="show serial" type="text">
</div>
<div class="form-group">
<input class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity" type="text">
</div>
<button class="btn btn-success btn-block" id="bagadd" onclick="return all_check('add', '06020010');"><i class="fa fa-cart-plus"></i> Add To Bag</button>
<input class="btn btn-success btn-block" id="forsubmit" type="hidden">
</form>
</div>
</div>
</div>
<div class="row" style="margin-bottom:10px;">
<div class="col-md-12">
<div class="title">
<h2>Recently viewed</h2>
</div>
<div class="multiple-items recent_view">
<div class="col-md-2 col-sm-6 col-xs-12">
<img src="assets/images/product/because-sloths-1yv-mugs.jpg" class="img-responsive">
</div>
<div class="col-md-2 col-sm-6 col-xs-12">
<img src="assets/images/product/good-morning-i-see-the-assassins-have-failed-mugs.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap/js/bootstrap-select.js"></script>
<script src="assets/js/zoomsl-3.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="assets/js/singleCartDelete.js"></script>
<script>
$(document).ready(function(){
$('.multiple-items').slick({
infinite: true,
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
});
$('#thumb-group a').on({
'click': function(){
var imgSrc = $(this).attr('data-src');
$('#theImg').attr('src',imgSrc);
$('#theImg').attr('data-large',imgSrc);
}
});
if(!$.fn.imagezoomsl){
$('.msg').show();
return;
}
else $('.msg').hide();
$('.my-foto').imagezoomsl({
zoomrange: [1, 12],
zoomstart: 4,
innerzoom: true,
magnifierborder: "none"
});
});
</script> <script type="text/javascript" src="assets/js/plugin.js"></script>
This is the ajax_action.php file:
<?php
session_start();
include("connection.php");
if(!empty($_POST["action"])) {
switch($_POST["action"]) {
case "add":
if(!empty($_POST["quantity"])) {
$productid = mysqli_fetch_row(mysqli_query($con, "SELECT ProductID,ProductName,Price,SerialNo FROM product_info where SerialNo='".$_POST["serial"]."'"));
$product_image = mysqli_fetch_row(mysqli_query($con, "SELECT ImageID, ProductID,BigImage,MidImage,SmallImage,SerialNo FROM product_image
WHERE ProductID='".$productid[0]."' AND SerialNo='".$_POST["serial"]."'"));
$idx = $_POST["serial"].$_POST["size"];
$itemArray = array($idx=>array(
'name'=>$productid[1],
'code'=>$_POST["serial"],
'image'=>$product_image[4],
'quantity'=>$_POST["quantity"],
'price'=>$productid[2],
'size'=>$_POST["size"]
)
);
if(!empty($_SESSION["cart_item"])) {
$_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);
} else {
$_SESSION["cart_item"] = $itemArray;
}
}
break;
case "empty":
unset($_SESSION["cart_item"]);
break;
}
$total_items = count($_SESSION["cart_item"]); //count total items
die(json_encode(array('items'=>$total_items))); //output json
}
?>

Hover in each checkbox

Updated this question, because my previous code made a conflict with bootstrap
Hi I'm trying to make a hover in each checkbox. What I now have is that the hover occurs in each checkbox. When I click around the checkbox then you see a dropdownlist. But when I click away from the dropdownlist. Then the caret arrow should go away, but unfortunately it doesn't. I have also recorded myself to show you more clearly what I actually want:
Updated the video also, because my updated code displays the checkbox differently in the browser
link: https://www.youtube.com/watch?v=i6-T9wjNZY8&feature=youtu.be
Here is the code that I currently have, which lives in index.blade.php :
#extends('user._layouts.user')
#section('content')
<style>
.dropdown .caret{
display:none;
}
.dropdown:hover .caret, .dropdown.opened .caret{
display:inline-block;
}
</style>
<script>
var resetSel = function(){
};
$(document).ready(function () {
$('dropdown').on('click', function (e) {
e.preventDefault();
$('.dropdown.opened').removeClass('opened');
});
$('.dropdown').click(function(e){
var $this = $(this);
$('.dropdown.opened').removeClass('opened');
if(!$this.hasClass('opened'))
$this.addClass('opened');
//alert($check.attr('checked'));
});
$('.check').click(function(e){
e.stopPropagation();
});
});
</script>
<script>
function toggle(source) {
checkboxes = document.getElementsByClassName('check');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
#include('user._layouts.template_search')
<h1>Offerte overzicht</h1>
{{--link_to_route('user.orders.create', 'Create new Order')--}}
#if (count($orders))
<ul>
<div class="row">
<div class="col-md-1">STATUS</div>
<div class="col-md-3">offerte naam</div>
<div class="col-md-3">klant</div>
<div class="col-md-1">bedrag</div>
<div class="col-md-1">old delete</div>
<div class="col-md-1">Check all
<br>
<div class="btn-group">
<div class="dropdown">
<button id="selDelete" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<input id="check1" type="checkbox" onClick="toggle(this)" class="check">
<span class="caret-hover"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li>Delete</li>
</ul>
</div>
</div>
</div>
</div>
#foreach($orders as $order)
<div class="row">
<div class="col-md-1">
<li>
#if ($order->status=='not submitted')
<div class="statusRed"></div>
#elseif ($order->status=='pending')
<div class="statusOrange"></div>
#else
<div class="statusGreen"></div>
#endif
</li>
</div>
<div class="col-md-3">
<li>
{{--as a third parameter we need to pass in the orderId, because it needs to be fed to
our actual user.orders.edit route. --}}
{{link_to_route('user.orders.edit', $order->order_name, array($order->id))}}
</li>
</div>
<div class="col-md-3">
<li>
{{$order->client['companyName']}}
</li>
</div>
<div class="col-md-1">
<li>
€{{$order->price}}
</li>
</div>
<div class="col-md-1">
<li>
{{Form::open(array('route'=>array('user.orders.destroy',$order->id),
'method'=>'delete','class'=>'destroy'))}}
{{Form::submit('Delete', array('class' => 'btn btn-default'))}}
{{Form::close()}}
</li>
</div>
<div class="col-md-1">
<li>
<!--ik kan blade niet gebruiken, want hij laat me mijn checkbox altijd op checked staan.-->
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">
<input id="check1" name="checkbox[]" type="checkbox" class="check" >
<span class="caret-hover caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">
<li><a href= "{{ route('user.orders.destroy',array( $order->id )) }}" data-method="delete" >Deletey</a></li>
</ul>
</div>
</li>
</div>
</div>
#endforeach
</ul>
#endif
#stop
Gladly I'm waiting for your response. Anyway thanks for your answer.

You have used an id 'selDelete' around multiple items. Consider using a class:
class = selDelete
in place of any tags where you have put:
id = selDelete
And similarly, be sure to switch any references to:
#selDelete
into:
.selDelete
I believe that may solve your problem, check that before anything else, hope that helps :)

We Keep Coding

JavaScript is the programming language of the Web.

Adding a form in html using javascript - javascript

Related

Adding onclick function in anchor tag which is not working [closed]

My audio and search features don't function as intended

How to add input field inside form as per tab active using Javascript/Jquery

jQuery ajax call not working on firefox

Hover in each checkbox

Categories

Resources