So I have this piece of code I've been tinkering with. The Jquery is modified from somewhere else. I'm wanting to be able to add products on this page (which currently works)... but the part im struggling with is I then submitted ALL of that data to MySql through a submit button.
I've tried playing around with a few arrays / loops but so far I have drawn a blank. Can anyone help?
<html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var currentItem = 1;
$('#addnew').click(function() {
currentItem++;
$('#items').val(currentItem);
var strToAdd = '<br>product: <select name="product'+currentItem+'" id="product'+currentItem+'" ><option value="aclt">Tobacco</option><option value="aed">Energy Drink</option></select> nicotine: <select name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="3">3mg</option><option value="6">6mg</option><option value="12">12mg</option></select> Qty:<input name="qty'+currentItem+'" id="qty'+currentItem+'" type="text" />';
$('#data').append(strToAdd);
});
});
//]]>
</script>
<form method="POST" action="invoicereg.php" id="data" name="sub">
product:
<select name="'product1'" id="product1" >
<option value="aclt">Tobacco</option>
<option value="aed">Energy Drink</option>
</select>
nicotine:
<select name="nicotine1" id="nicotine1">
<option value="3">3mg</option>
<option value="6">6mg</option>
<option value="12">12mg</option>
</select>
Qty:<input type="text" id="qty" name="qty"></input><br>
</form>
<button type="submit" form="data">SUBMIT</button>
<input type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" id="items" name="items" value="1" />
</html>
I've noticed few mistakes that you've made in your code.
The first mistake is:
<select name="'product1'" id="product1">
Remove single quotes from the value of name attribute and it should look like:
<select name="product1" id="product1">
This is not considered an issue. If you were using single quotes around the value of name attribute, it would be quite annoying to access its value in PHP.
So, you would need to use complex expression to fetch the value like the following syntaxes:
$_POST['\'product1\'']
$_POST["'product1'"]
The first one uses escape sequence of backward slash to escape single quotes.
The second one uses double quotes to access keys with single quotes wrapped around. This one is relatively easier than the first one involving a bit complex expression.
The second mistake is:
The last three HTML elements below the form tag are not wrapped inside the form. The two among the last three elements which are submit and hidden element belong to form element. After modifying the code, the whole code should be like the following:
<form method="POST" action="invoicereg.php" id="data" name="sub">
product:
<select name="product1" id="product1" >
<option value="aclt">Tobacco</option>
<option value="aed">Energy Drink</option>
</select>
nicotine:
<select name="nicotine1" id="nicotine1">
<option value="3">3mg</option>
<option value="6">6mg</option>
<option value="12">12mg</option>
</select>
Qty:<input type="text" id="qty" name="qty"></input><br>
<button type="submit" form="data">SUBMIT</button>
<input type="button" id="addnew" name="addnew" value="Add new item" />
<input type="hidden" id="items" name="items" value="1" />
</form>
Hope it helps!
Make your input type submit button
<button type="submit" form="data">SUBMIT</button>
to
<input type="submit" form="data" value="SUBMIT">
Related
When either radio button is pressed there is no change in the visibility of select tag. Simply nothing happens, not even errors.
This is my first attempt at using JavaScript and I have spent about 4 days now looking at a variety of examples to do this. I feel my syntax and the placement of everything is correct. I'm lost as to what I can possibly be missing.
Using the "Inspect Element Q" Inspector tab, when the radios are checked there is no change in anything. I just thought about it. I don't know how to use the debugger.
Before I published this here I put the code posted here into the JSfiddle. It runs there: turning the drop list on and off. So, might be something else in my PHP page.
Here is my code:
<head>
<script type="text/javascript">
function hasClass(){
var checked_yes = document.getElementById("hasClass_yes").checked;
var checked_no = document.getElementById("hasClass_no").checked;
if(checked_yes) {
document.getElementById("class_drop_list").style.visibility="visible";
} else if(checked_no){
document.getElementById("class_drop_list").style.visibility="hidden";
}
}
</script>
</head>
<tr>
<td>Does the monster have a class?
<label for="hasClass_yes">Yes
<input type="radio" id="hasClass_yes" name="hasClass" onclick="hasClass();" />
</label>
<label for="hasClass_no">No
<input type="radio" id="hasClass_no" name="hasClass" onclick="hasClass();" />
</label>
<select style="visibility:" id="class_drop_list" name="monsters_class">
<option value="Adept">Adept</option>
<option value="Barbarian">Barbarian</option>
<option value="Cavalier">Cavalier</option>
<option value="Cleric">Cleric</option>
<option value="Druid">Druid</option>
<option value="Healer">Healer</option>
<option value="Jumper">Jumper</option>
<option value="Marshalist">Marshalist</option>
<option value="Rogue">Rogue</option>
<option value="Rook">Rook</option>
<option value="Sorcerer">Sorcerer</option>
<option value="Swashbuckler">Swashbuckler</option>
<option value="Witch">Witch</option>
<option value="Wizard">Wizard</option>
</select>
</td>
</tr>
I have also tried this script
<script type="text/javascript">
function hasClass(){
var checked_yes = document.getElementById("hasClass_yes");
var class_drop_list_on = document.getElementById("class_drop_list");
class_drop_list_on.style.visibility = checked_yes.checked ? "visibility" : "visible";
}
</script>
this seems to be working as a snippet. what's the problem?
<head>
<script type="text/javascript">
function hasClass(){
var checked_yes = document.getElementById("hasClass_yes").checked;
var checked_no = document.getElementById("hasClass_no").checked;
if(checked_yes) {
document.getElementById("class_drop_list").style.visibility="visible";
} else if(checked_no){
document.getElementById("class_drop_list").style.visibility="hidden";
}
}
</script>
</head>
<tr>
<td>Does the monster have a class?
<label for="hasClass_yes">Yes
<input type="radio" id="hasClass_yes" name="hasClass" onclick="hasClass();" />
</label>
<label for="hasClass_no">No
<input type="radio" id="hasClass_no" name="hasClass" onclick="hasClass();" />
</label>
<select style="visibility:" id="class_drop_list" name="monsters_class">
<option value="Adept">Adept</option>
<option value="Barbarian">Barbarian</option>
<option value="Cavalier">Cavalier</option>
<option value="Cleric">Cleric</option>
<option value="Druid">Druid</option>
<option value="Healer">Healer</option>
<option value="Jumper">Jumper</option>
<option value="Marshalist">Marshalist</option>
<option value="Rogue">Rogue</option>
<option value="Rook">Rook</option>
<option value="Sorcerer">Sorcerer</option>
<option value="Swashbuckler">Swashbuckler</option>
<option value="Witch">Witch</option>
<option value="Wizard">Wizard</option>
</select>
</td>
</tr>
So, I have done the following trying to solve this.
Copied the relevant code from the php file into a separate html file to test it outside of the larger php file. Just the script and the yes/no inputs, and select tag .
It still did not work.
Installed another browser on my system - Chromium. The test file did not run there either.
Copied the test file and the original php file to usb and tried it on a windows computer. Still did not run there.
Modified the test file to be as it is below - and it has worked in all browsers on both Windows and Ubuntu computers.
<html>
<head>
<style></style>
<script type="text/javascript">
function hasClassYes(){
document.getElementById("class_drop_list").style.visibility="visible";
}
function hasClassNo(){
document.getElementById("class_drop_list").style.visibility="hidden";
}
</script>
</head>
<body>
<form action="make_monster.php" method="post">
<table>
<tr style="background-color:#999999">
<td>Does the monster have a class?
<label for="hasClass_yes">Yes
<input type="radio" id="hasClass_yes" name="hasClass" onclick="hasClassYes();" />
</label>
<label for="hasClass_no">No
<input type="radio" id="hasClass_no" name="hasClass" onclick="hasClassNo();" />
</label>
<select style="visibility:" id="class_drop_list" name="monsters_class">
<option value="Adept">Adept</option>
<option value="Barbarian">Barbarian</option>
<option value="Wizard">Wizard</option>
</select>
</td>
<tr>
</table>
</form>
</body>
</html>
What's different is that instead of using IF or SWITCH statements inside the same function to determine the state of yes no and set the style attribute in the select tag, I now have two separate functions for yes or no.
Due to the requirement of our CRM, I have to deal with a very basic html contact form (short version):
<form id="contact_form" method="POST" name="contact_form">
<p><strong>Select the white paper you would like to have:</strong></p>
<label for="paper" class="mandatory">
<span>White paper<select id="paper" name="paper" required>
<option selected="selected" value="">-Please select-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</label>
<input id="redirect_url" type="hidden" name="redirect_url" value="" />
<input class="download" onclick="submit_form();" type="submit" value="Download" />
</form>
Is there any possibility to write a variable into redirect_url specified by value?
A= "http://example.com/a" / B= "http://example.com/b" etc.
Should I try jQuery var or document.getElementById?
Very basic question, I know, but I recently started my ambitions towards Javascript.
jQuery:
var newURL = "http://example.com/b";
$("#redirect_url").val(newURL);
Javascript:
var newURL = "http://example.com/b";
document.getElementById("redirect_url").value = newURL;
Hi I have form which contains three search criteria.
These search criteria are jobs, resume, recruitment consultant.
Based on the drop down, fields are updated accordingly.
Based on the select value I want to change the action on the form, and name of the submit button. Problem is putting values with hyphen in option select makes jquery not work.
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment Consultant">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Change the form action as per following
action="search-recruitment-consultant-results?"
action="search-resume-results?"
action="search-job-results?"
And the button name (NOT VALUE OR TEXT) as per following
name="searchrecruitmentconsultantbutton"
name="searchresumebutton"
name="searchjobbutton"
I put these in option values accordingly
search-recruitment-consultant-results?
search-resume-results?
search-job-results?
and then used
<select name="search_for" onchange="this.form.action=this.value;">
but putting hyphen in option values makes the jquery show/hide not work
Try this code, see i have use hyphen in option and it works properly.
<form method="get" name="search" id="form" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option value="Jobs">Jobs</option>
<option value="Resume">Resumes</option>
<option value="Recruitment-Consultant">Recruitment Consultants</option>
</form>
<script>
$(document).ready(function() {
$("#search_for").change(function(){
if($(this).val()=='Jobs')
{
$("#form").attr("action",'search-job-results?');
$("#search_submit").attr('name',"searchjobbutton");
}
else if($(this).val()=='Resume'){
$("#form").attr("action",'search-resume-results?');
$("#search_submit").attr('name',"searchresumebutton");
}
else if($(this).val()=='Recruitment-Consultant'){
$("#form").attr("action",'search-recruitment-consultant-results?');
$("#search_submit").attr('name',"searchrecruitmentconsultantbutton");
}
});
});
</script>
i think this will help you
add id for your form 'formId'
$(document).ready(function(){
$('#search_for').change(function(){
var cur = $(this);
var search = cur.val();
if(search == 'job'){
$('#formId').attr('action', 'search-job-results?');
$("search_submit").attr('name', 'searchjobbutton');
} else if(search == 'Resume'){
$('#formId').attr('action', 'search-resume-results?');
$("search_submit").attr('name', 'searchresumebutton');
}else if(search == 'Recruitment Consultant'){
$('#formId').attr('action', 'search-recruitment-consultant-results?');
$("search_submit").attr('name', 'searchrecruitmentconsultantbutton');
}
});
});
try this
Add data attribute with button name
only you need to add - onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));" in the select
and data-name="" in the option
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
<option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
<option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
<option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Instead of writing multiple forms, just write one and use .change() and data-* attribute which is used to create custom tags. Store the button names inside <option data-name="button name"> then you can access this value with on change.
The data-* attributes is used to store custom data private to the page or application.
.change()
Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#search_for').on('change', function () {
$('form[name="search"]').attr('action', $(this).val()).find(':submit').attr('name', $(this).find(':selected').data('name'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
<option data-name="searchjobbutton" value="search-job-results?">Jobs</option>
<option data-name="searchresumebutton" value="search-resume-results?">Resumes</option>
<option data-name="searchrecruitmentconsultantbutton" value="search-recruitment-consultant-results?">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>
Due to some requirement, I have to take a hidden input field inside option tag of select element. The problem I'm facing is, when the selected value is displayed, it's displayed with prefix >.
Here's my code:
<form action="Action.java">
<select name="cars">
<option value="car1" <input type="hidden" id="hidden" value="c1">>CAR1</option>
<option value="car2">CAR2</option>
<option value="car3">CAR3</option>
</select>
<input type="submit" value="Submit">
</form>
Can anyone help me fix this issue?
As others have mentioned, this line:
<option value="car1" <input type="hidden" id="hidden" value="c1">>CAR1</option>
isn't valid html. Your browser is closing your optinput™ - and is then seeing an extra '>'
You could do this sort of thing (untested code):
<form id="my_select">
<select name="cars">
<option value="car1">CAR1</option>
<option value="car2">CAR2</option>
<option value="car3">CAR3</option>
</select>
<input type="hidden" id="hidden" value="">
<input type="submit" value="Submit">
</form>
<script>
$("#my_select").change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).text() + " ";
});
$('#hidden').val(str);
}).change();
</script>
However, AND I CANT STRESS THIS ENOUGH: Don't.
Whatever your reason for needing to set that hidden field - do it in you back end code i.e (psuedo)
if (cars === car1) {
c1 = true
}
But do you really need to set it?
I am very new to HTML and JavaScript...
I need your help to construct a website URL based on TextBox inputs in HTML/JavaScript?
I am looking for a HTML/JavaScript code to allow user to
1) Select an Option from Dropdown list
2) Enter a number
using which a URL should be generated
For example:
Drop down list has #Years to select and user select year 2014
and in text box user gives input a number as 1234
Below is the peace of code I have, but not able to get the desired result :(
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
var iYear = $("select#SelectYear").val()
var iMonth = $("select#SelectMonth").val()
var iRollNum = $("select#EnterRollNum").val()
document.getElementById("demo").innerHTML = Link
}
</script>
Any help is much appreciated.
<form id="myForm" action="some.php" method="GET">
<select name="SelectYear">
<option value="13" ID="13">2013</option>
<option value="12" ID="12">2012</option>
</select>
<select name="SelectMonth">
<option value="J" ID="J">June</option>
<option value="D" ID="D">December</option>
</select>
<input type="text" name="EnterRollNum" ID="EnterRollNum" />
<input type="submit" value="submit" />
</form>
<p id="demo"></p>
<script>
$('#myForm').submit(function(e){
e.preventDefault();
var url = $(this).attr('action')+'?'+$('#myForm').serialize();
$('#demo').html(' Link ');
});
</script>
You can see the working fiddle - http://jsfiddle.net/grvngr/fak1s583/
Hope this helps!