unable to save to database when using javascript .change function - javascript

I have this javascript here which is supposed to show/hide a div based on a selection of a select box. When I try to insert it in the database it only inserts the last option (paypal).
For example if i choose a cash option it will insert a blank field in the database. While if i choose Paypal it will insert it.. same goes for the rest of the options. Only Paypal is being inserted.
(I apologize for both my bad English and my spaghetti code)
$(document).ready(function(){
$("#payment").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="bank"){
$(".box1").not(".bank").hide();
$(".bank").show();
}
else if($(this).attr("value")=="cash"){
$(".box1").not(".cash").hide();
$(".cash").show();
}
else if($(this).attr("value")=="cheque"){
$(".box1").not(".cheque").hide();
$(".cheque").show();
}
else if($(this).attr("value")=="invoice"){
$(".box1").not(".invoice").hide();
$(".invoice").show();
}
else if($(this).attr("value")=="paypal"){
$(".box1").not(".paypal").hide();
$(".paypal").show();
}
else{
$(".box1").hide();
}
});
}).change();
});
<style type="text/css">
.box{
display: none;
}
.box1{
display: none;
}
.income{ background: #fff; }
.expense{ background: #fff; }
.blue{ background: #fff; }
.cash{ background: #fff; }
.card{ background: #fff; }
.cheque{ background: #fff; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<select id="payment" name="payment_type" class="form-control" required>
<option value="" disabled selected>Select Payment Type</option>
<option value="bank">Bank Transfer</option>
<option value="cash">Cash</option>
<option value="cheque">Cheque</option>
<option value="invoice">Invoice</option>
<option value="paypal">Paypal</option>
</select>
</div></div>
<div class="form-group bank box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Bank Account" maxlength="40" />
</div>
</div>
<div class="form-group cash box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Cash Amount" maxlength="40" />
</div>
</div>
<div class="form-group cheque box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Cheque Reference" maxlength="40" />
</div>
</div>
<div class="form-group invoice box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_" class="form-control" placeholder="Invoice Number" maxlength="40" />
</div>
</div>
<div class="form-group paypal box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Paypal Reference" maxlength="40" />
</div>
</div>

Your problem is in having all of your input fields named the same thing. This is going to confuse the php script on the server side, because the input name is how it differentiates values. You might wan to try just having a single input field for the transaction amount and indicating the payment in some other way.

When you use style display: none you only hides input. It is still send on submit. Paypal is the last so the last value is nothing because you didn't write anything in hidden input. You must change names of inputs to be individuals.

Related

Alert not show after click

I have this code:
<div class="form-group">
<div class="form-group has-feedback">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick"></span>
</div>
</div>
Jquery
$(document).ready(function() {
$('.showActionAfterClick').click(function() {
alert('ok');
});
});
This code was created in bootstrap.
I need to show alert box after click showActionAfterClick class, but it's not working.
How can I repair it?
You have a space between your class identifier (.) and your classname showActionAfterClick:
$(document).ready(function() {
$('.showActionAfterClick').click(function() {
alert('ok');
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span class="glyphicon glyphicon-search form-control-feedback glyphiconColor showActionAfterClick">Text to see this button</span>
</div>
</div>
In this case, this happend because the span is an inline element and its width size depends of its content. So the span element have not width and you can't click it and trigger the alert (besides the bad syntax in your jquery query selector).
The #Jack Bashford example works because the span element has text inside and this provides the width to that element.
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span id ="showActionAfterClick" class="glyphicon glyphicon-search form-control-feedback glyphiconColor">Click ME!</span>
</div>
</div>
$(document).ready(function() {
$('#showActionAfterClick').click(function() {
alert('ok');
});
});
add id in your span tag instead of class and replace . with # and try now
Use this
<div class="form-group ">
<div class="form-group has-feedback ">
<input required="required" name="query" type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" value="">
<span onclick="test()" class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span>
</div>
</div>
<script>
function test(){
alert("ok");
}
</script>

What is the right way to repeat html controls with a delete

I am trying to make a repeater html textbox controls which will add another field under it with a delete btn. The "+add more" working fine but the delete btn also adding more controls under it.
I want to know the right way to achieve it.
$(function() {
$('.btn-add-phone').click(function() {
var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');
$(this).append(sInputGroupPhoneHtml);
});
$('.btn-add-email').click(function() {
var sInputGroupEmailHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="email" name="option[]" class="form-control" placeholder="Email" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Personal">Personal</option><option value="Other">Other</option></select><span class="input-group-addon input-group-email-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');
$(this).append(sInputGroupEmailHtml);
});
$('.input-group-email-remove').click(function() {
$(this).parent().remove();
});
jQuery(".toggleControlsPhone a").click(function() {
jQuery(".showPhoneControls").toggle();
});
jQuery(".toggleControlsEmail a").click(function() {
jQuery(".showEmailControls").toggle();
});
});
div.input-group-option:last-child input.form-control {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
div.input-group-option span.input-group-addon-remove {
cursor: pointer;
}
div.input-group-option {
margin-bottom: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group" id="phoneAddMore">
<label class="control-label">Phone</label>
<div class="form-group form-group-options">
<div class="input-group input-group-option col-xs-12">
<input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
<select class="form-control" style="width:50%">
<option value="Work">Work</option>
<option value="Home">Home</option>
<option value="Mobile">Mobile</option>
<option value="Other">Other</option>
</select>
</div>
<a hre="#" class="btn-add-phone">+ add more </a>
</div>
<div class="clearfix"></div>
</div>
View on JSFiddle
I see two issues:
When you append sInputGroupEmailHtml, you're appending it to the <a> tag that was clicked. So, clicking anywhere inside those elements will bubble up to the <a> tag and fire the event to add a new group. I've changed it to append to the <a> tag's parent .form-group (outside of and after the <a> tag), instead.
When you bind a click handler to .input-group-email-remove, that element does not yet exist in the DOM. (It's only added when you click the "Add More" button.) I've used event delegation to bind the handler to #addPhoneMore rather than the button itself, so that the handler will fire even on dynamically generated children. I'm also using closest() to find the .form-group of the clicked button. See Event binding on dynamically created elements.
$(function() {
$('.btn-add-phone').click(function() {
var sInputGroupPhoneHtml = ('<div class="form-group form-group-options"><div class="input-group input-group-option col-xs-12"><input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"><select class="form-control" style="width:50%"><option value="Work">Work</option><option value="Home">Home</option><option value="Mobile">Mobile</option><option value="Other">Other</option></select><span class="input-group-addon input-group-phone-remove text-left"> <span class="glyphicon glyphicon-trash"></span></span></div></div>');
$(this).parent().append(sInputGroupPhoneHtml);
});
$('#phoneAddMore').on('click', '.input-group-phone-remove', function() {
$(this).closest('.form-group').remove();
});
});
div.input-group-option:last-child input.form-control {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
div.input-group-option span.input-group-addon-remove {
cursor: pointer;
}
div.input-group-option {
margin-bottom: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group" id="phoneAddMore">
<label class="control-label">Phone</label>
<div class="form-group form-group-options">
<div class="input-group input-group-option col-xs-12">
<input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%">
<select class="form-control" style="width:50%">
<option value="Work">Work</option>
<option value="Home">Home</option>
<option value="Mobile">Mobile</option>
<option value="Other">Other</option>
</select>
</div>
<a hre="#" class="btn-add-phone">+ add more </a>
</div>
<div class="clearfix"></div>
</div>

Bootstrap : Button appearance changes upon hover

I am seeing this weird button behavior (the text on the button becomes near invisible) in my bootstrap button when I do a mouse hover on it.
This is my markup (Salesforce VF page with bootstrap)
<apex:page >
<head>
<apex:stylesheet value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/css/bootstrap.min.css')}"/>
<apex:includeScript value="{!$Resource.jq}"/>
<apex:includeScript value="{!URLFOR($Resource.bstrap, '/bootstrap-3.3.7-dist/js/bootstrap.min.js')}"/>
<style>
.red{
color:red;
}
.form-area
{
//background-color: #FAFAFA;
background-color:#77F2F2;
padding: 10px 40px 60px;
margin: 10px 0px 60px;
border: 1px solid GREY;
}
#submit
{
//color:#BF99E5;
font-family: "Helvetica";
border-radius:10px;
padding:10px;
}
</style>
<script>
j$ = jQuery.noConflict();
j$(document).ready(function(){
//alert("test");
//j$('#submit').hover(function(){alert('thisissdfsdfh');});
j$('#characterLeft').text('140 characters left');
//j$('#btnSubmit').focus(function(){alert('sdfsdf');});
j$('#message').keydown(function () {
var max = 140;
var len = j$(this).val().length;
if (len >= max) {
j$('#characterLeft').text('You have reached the limit');
j$('#characterLeft').addClass('red');
j$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
j$('#characterLeft').text(ch + ' characters left');
j$('#btnSubmit').removeClass('disabled');
j$('#characterLeft').removeClass('red');
}
});
});
</script>
</head>
<apex:form >
<div class="container">
<div class="col-md-10">
<div class="form-area">
<br />
<h3 style="margin-bottom: 25px; text-align: left;">Add New Contact</h3>
<br />
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required="true"/>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-globe" aria-hidden="true"></i></span>
<input id="email" name="email" class="form-control" placeholder="Email" required="true" type="text"/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span></span>
<input id="tel" name="tel" class="form-control" placeholder="Phone Number" required="" type="text"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required="true"/>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<center> <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" >Submit Form</button> </center>
</div>
</div>
</div>
</apex:form>
</apex:page>
In the last line in HTML if I remove the attribute "class="btn btn-primary pull-right" from button tag then the behavior is ok.
When I do a mouse hover it looks like below :
When NOT mouse hover it looks fine :
Can someone tell me what is wrong ?
Try this in your css,
#submit:hover, #submit:focus, #submit:active {
color:#BF99E5;
}
Bootstrap has custom CSS on hover, active, focus for appropriate elements. This should override them
It seems that some of your code overrides the stylings of bootstrap. However, if you really want to change the color of text on your button, then you may add hover in your style like:
input#submit:hover{
color: #000; /* Black */
}
That's it! :) Happy coding :) Please comment if you have problem with my solution, its my pleasure to help others :)

How do I create a HTML form that generates a JSON file containing all the data that was submitted to the HTML form ? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create a HTML form where a user enters his name, address and gender. After the user enters that information and clicks submit a JSON file will be downloaded containing the information. Could someone please tell me how I create such form ?
You can actually use jQuery's serialize() function. Since you have used Bootstrap, there'll be jQuery for sure. So all you need to do is:
$(function () {
$("#myForm").submit(function () {
var jsonOutput = JSON.stringify($(this).serializeArray());
$("#genJSON").text(jsonOutput);
$("#download").attr("href", 'data:application/executable;charset=utf-8,' + encodeURIComponent(jsonOutput)).show();
return false;
});
});
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
pre {font-family: 'Consolas', monospace; white-space: pre-wrap;}
form,
form ul,
form ul li,
form ul li label {display: block;}
form ul li {padding: 5px;}
form ul li label strong {display: inline-block; width: 100px;}
form ul li label input {padding: 3px;}
form ul li > input {margin-left: 105px; padding: 3px 10px; cursor: pointer;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="" id="myForm">
<ul>
<li>
<label>
<strong>Username</strong>
<input type="text" name="Username" />
</label>
</li>
<li>
<label>
<strong>Password</strong>
<input type="text" name="Password" />
</label>
</li>
<li>
<label>
<strong>Full Name</strong>
<input type="text" name="FullName" />
</label>
</li>
<li>
<label>
<strong>Email</strong>
<input type="text" name="Email" />
</label>
</li>
<li>
<input type="submit" value="Get JSON" />
</li>
</ul>
</form>
<pre id="genJSON"></pre>
<div>
<a id="download" style="display: none;">Download Code</a>
</div>
Update
Using data: URI scheme, it is possible.
this.href = 'data:application/json;charset=utf-8,'
+ encodeURIComponent(genJSON.innerHTML);
I made following html form
<div class="row">
<div class="block block-bordered">
<div class="block-header bg-gray-lighter">
<h3 class="block-title">Profile </h3>
</div>
<div class="block-content">
<form class="form-horizontal push-10-t push-10" action="base_forms_premade.html" method="post"
onsubmit="return false;">
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<div class="col-xs-6">
<label for="mega-firstname">Participant 1</label>
<input class="form-control input-lg" type="text" id="mega-firstname"
name="mega-firstname" placeholder="Name">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-7">
<div class="form-group">
<div class="col-xs-12">
<label for="mega-bio">Age</label>
<textarea class="form-control input-lg" id="mega-bio" name="mega-bio" rows="22"
placeholder="Age"></textarea>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group"></div>
<div class="form-group">
<div class="col-xs-12">
<label for="mega-skills">Subject</label>
<select class="form-control" id="mega-skills" name="mega-skills" size="7" multiple>
<option value="1">Sale</option>
<option value="2">Real Estate</option>
<option value="3">Employment</option>
<option value="4">Loan</option>
<option value="5">Renting</option>
<option value="6">Finance</option>
<option value="7">Construction</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label for="mega-age">Amount</label>
<input class="form-control input-lg" type="text" id="mega-age" name="mega-age"
placeholder="Enter bitcoin amount">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-warning" data-toggle="modal" data-target="#modal-slideup"
type="submit"><i class="fa push-5-r"></i> Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>

Instead of adding another element It is landing to a another page

I have created a modal list using bootstrap and Actually I have a form list created and when entered details, it will land me to a desired page. Register button performs this function. But now I have also added a dependent dropdown(Skills,Level) options. It also has a add button and Whenever I am clicking on add button instead of adding another elements,its landing me to that same page and displays added successfully message. Can anyone help me?
<form id='work' method="post" action="registerdb.php">
<div class="form-group">
<label for="recipient-name" class="control-label">First Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "firstname" name = "firstname" class="form-control"
placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">Last Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "lastname" name = "lastname" class="form-control"
placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Company Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id= "companyname" name = "companyname" class="form-
control" placeholder="Company Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">E-mail ID</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" id = "emailid" name = "emailid" class="form-control"
placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-asterisk"></span></span>
<input type="password" id = "password" name = "password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type of Industry</label>
<div class="input-group">
<select class="input-medium bfh-countries" data-country="US">
<option value="" disabled="disbaled" selected="selected">Please Select a
Value</option>
<option value="Accounting">Accounting</option>
<option value="Aeronautical">Aeronautical</option>
<option value="Agriculture">Agriculture</option>
<option value="Science and Research">Science and Research</option>
</select>
</div>
</div>
</div>
<hr>
<div align="center">
<button type="button" class="btn btn-primary" data-
dismiss="modal">Close</button>
<input class="btn btn-primary" type = "submit" name = "submit" value =
"register" />
</div>
</form>
<script>
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
//row.remove("#add");
$('#wrapper').append(row);
});
</script>
<div id="wrapper" width="100%">
<div id="wrapper-1" style="float: left; width: 85%;">
<div id="first" style="float: left; width: 65%;">
<label for="skills">Skills</label>
<select id="one" class="step1">
<option value="">Please select an option</option>
<option>C</option>
<option>C++</option>
<option>Java</option>
<option>PHP</option>
</select>
</div>
<div class="general" style="float: left; width: 35%;">
<label for="skills">Level</label>
<select id="two" class="step2">
<option value="">option</option>
<option>Begineer</option>
<option>Expert</option>
<option>Advanced</option>
</select>
</div>
</div>
<div class="add-general" style="float: left; width: 15%;">
<button id="add">add</button>
</div>
</div>
Your jsfiddle is messed up, you should load external CSS and scripts using the "external" feature on the left. And obviously your local files will not be accessible, so use absolute paths. I took the time to set it up properly this time.
Your HTML also looks messy, but browsers still understand it.
As for your unexpected behaviour, I think this post applies to your situation: Form is submitted when I click on the button in form. How to avoid this?
In essence: you just need to specify a type attribute (with value different from "submit" obviously) so that your "Add" button stops acting as a submit button.
<button id="add" type="button">add</button>
You also have a problem with attaching event listener on your "Add" button: your code must be executed after your button exists in DOM.
2 simple methods:
Put your script tag after your button HTML.
Have your code executed after DOM is ready / loaded (e.g. use jQuery(document).ready(function() { /** your code **/}) to request jQuery to execute it once DOM is ready).
jQuery(document).ready(function() {
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
// You should change the id to avoid multiple elements
// with same id in your DOM...
$('#wrapper').append(row);
});
});
Updated jsfiddle: http://jsfiddle.net/qc3tu1f1/4/

Categories