checkbox onclick event loads as if checked - javascript

When I load the page both forms are displayed. If I check and then uncheck "add" the second form disappears. How do I make this page load with form 2 hidden on load?
<html>
<title>Car Service</title>
<strong>Car Service:</strong><br><br>
<input type="submit" id="accountsearch" name="accountsearch" value="Select Customer" onclick="window.open('selectaccount.php');"><br><br>
<form name="newservicesetup" id="newservicesetup" action="" method="post">
<select name="ordertype" id="ordertype">
<option>(Select Service)</option>
<option value="Service">Service</option>
<option value="ServiceHardware">Service w/ Hardware</option>
</select>
<input type="text" name="qty1" id="qty1" value="Quantity" size="5" onclick="this.value=''">
<input type="checkbox" id="add" value="0" name="add" onclick="
if (this.checked) {
document.getElementById('newservicesetup1').style.display='inline';
} else {
document.getElementById('newservicesetup1').style.display='none'; } return true;" >
</form>
<form name="newservicesetup1" id="newservicesetup1" action="" method="post">
<select name="ordertype1" id="ordertype1">
<option>(Select Service)</option>
<option value="Service">Service</option>
<option value="ServiceHardware">Service w/ Hardware</option>
</select>
<input type="text" name="qty2" id="qty2" value="Quantity" size="5" onclick="this.value=''">
</form>
<br>
XX: <input type="file" name="sfa" id="sfa">
AA1: <input type="file" name="pbxws" id="pbxws"><br> <br>
<input type="submit" name="next" id="next" value="Next">

set the second forms css class to hidden or something like that and then define .hidden in your css to be display:none. Or put style='display:none' t ostart with on the second form

Change your second form tag to read this....
<form name="newservicesetup1" id="newservicesetup1" action="" method="post" style="display:none;">

Related

Form not being submitted with correct data

I have a form for a quiz that has 3 different inputs. Number of questions, and two types of tests. i am modifying existing code that works fine but we want the layout different which requires it to be coded differently. this is the version that isn't working. Basically I need the number of questions and category to be sent with the button clicked. For some reason it isn't sending either. Any help would be great, thanks!
<strong>Questions</strong>
<select name="num_questions">
{section name=foo start=10 loop=31}
<option value={$smarty.section.foo.index}>{$smarty.section.foo.index}</option>
{/section}
</select>
</div>
<select onchange="$('.questions_{$c.categorynum}').val(this.value);" name="category">
{foreach from=$categories item=c}
{if ($c.categorynum != 1 and $c.categorynum < 8)}
<div class="questiontitle" style="float:left;">
<option value={$c.categorynum}><strong>{$c.name}</strong></option>
</div>
{/if}
{/foreach}
</select>
<form action="test.php" method="post" style="float:left;">
<input type="submit" value="Create Exam" name="create" style="margin:0 3px;"/>
<input type="hidden" name="category" class="category" value="{$c.categorynum}"/>
<input type="hidden" class="questions_{$c.categorynum}" name="num_questions" value="10"/>
</form>
<form action="simulation.php" method="post" style="float:left;">
<input type="submit" name="flashcard" value="Flash Cards" style="margin:0 3px;"/>
<input type="hidden" name="create" value="1"/>
<input type="hidden" name="category" value="{$c.categorynum}"/>
<input type="hidden" class="questions_{$c.categorynum}" name="numquestions" value="10"/>
</form>

drop down menu that changes the name of a form field

I am creating an advanced search form and wish to set the name of a text input field via a drop down menu.
Here is a simple search form with three separate fields:
<form method="get" action="/search_results_advanced/" id="keyword">
Search by name: <input type="text" name="name" value="" />
Search by address: <input type="text" name="address" value="">
Search by phone number: <input type="text" name="phone" value="">
<input type="submit" value="Go!" />
</form>
What I'd like to do is have a user select a single field from a drop down and then have a single text input box to enter a search term.
eg:
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option>Name</option>
<option>Address</option>
<option>Phone</option>
</select>
<input type="text" name="?NAME_FROM_DROPDOWN_SELECTION?" value="" id="searchbar" size="25" />
<input type="submit" value="Go!" />
</form>
How can I name the text field using the dropdown selection? I tried modifying some javascript I found via google but I'm afraid I just don't know javascript at all and didn't get anywhere.
Thanks for any help.
Here is one example I made using jQuery:
$(document).ready(function(){
$('body').on('change','#DropDownSelection',function(){
var v = $('#DropDownSelection').val();
$('.search-by').html('Search by '+v+': <input type="text" name="'+v+'" value="">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option value="Name">Name</option>
<option value="Address">Address</option>
<option value="Phone">Phone</option>
</select>
<div class="search-by">Search by Name: <input type="text" name="Name" value=""></div>
<input type="submit" value="Go!" />
</form>
If you're using jquery, it's pretty simple:
<script>
$(function() {
$('#DropDownSelection').change(function() {
$('#searchbar').attr('name', $('#DropDownSelection').val());
});
});
</script>
You can set value for each option, and listen to change event on the dropdown:
var dd = document.getElementById('DropDownSelection');
var input = document.getElementById('searchbar');
input.setAttribute('name', 'name'); // default value
dd.addEventListener('change', function(e) {
input.setAttribute('name', e.target.value); // set input.name equal to chosen select.value
console.log(input.getAttribute('name'))
})
<form method="get" action="/search_results_advanced/" id="keyword">
Search by:
<select id="DropDownSelection">
<option value="name">Name</option>
<option value="address">Address</option>
<option value="phone">Phone</option>
</select>
<input type="text" name="" value="" id="searchbar" size="25" />
<input type="submit" value="Go!" />
</form>

Clear all data and turn back to default settings

Goal:
When I clickon the clear all button and the data inside of the input box should be empthy and the dropdownlist should go back to default settings that is year 2009.
Problem:
I don't know how to do in order to make the dropdownlist to go back to default when you have pressed the button?
Info:
Please remember that I do not want to make any big changes in the current javascript/jquery sourcecode because it is used in production phase.
I would like to make a complementary to the current source code.
I tried using <input type="reset" value="Clear alll" name="clear_all"> but it doesn't work in long term with the current source code.
Thanks!
http://jsbin.com/qezesohake/edit?html,js,console,output
function df(data) {
$(data).find(':input').each(function () {
switch (this.type) {
case 'text':
case 'textarea':
$(this).val('');
break;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="button" value="Clear alll" name="clear_all" onclick="df(this.form)" />
</form>
<form action="#" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" onclick="doSomething()">
</form>
<script>
function doSomething(){
alert('Do something!');
}
</script>
You don't need any javascript to clear form instead just replace your input type to reset button
<input type="reset" value="Clear all" name="clear_all"/>
Reset button does not require any onClick event to be passed. It works automatically.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action=""" method="post">
<fieldset>
<input id="aaa" type="text" value="" />
<input id="bbb" type="text" value="" />
<select id="year">
<option value="2010">2010</option>
<option value="2009" selected="selected">2009</option>
<option value="2008">2008</option>
</select>
</fieldset>
<input type="reset" value="Clear alll" name="clear_all" />
</form>

passing html value from a form to JavaScript function

I am trying to pass the value and text from a form to a JavaScript function using the onclick on a button but don't seem to be able to get it to work I want to keep this as generic as possible so I copy and paste the form
<form name='f1'>
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="item_name" value="Span>
<input type="hidden" name="amount" value="68">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="test#hotmail.com">
<select name="del">
<option value="0">Delivery To</option>
<option value="41">Uk</option>
<option value="39">USA</option>
<option value="20">World Wide</option>
</select>
<input type="image" src="http://www.paypalobjects.com/en_US/i/btn/x-click-but22.gif"
onClick="shipping1(this.options.selectedindex.value,this.options.selectedindex.text)" border="0" name="submit" width="87" height="23" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
</form>
i think it may be the formating of this.options
any help would be great
try this.
onClick="shipping1(this.form.del[this.form.del.selectedIndex].value,this.form.del[this.form.del.selectedIndex].text)"

Forced selection in hidden / Backend using Javascript OR JQuery

I have regular form like this.
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
This selectbox enables to select only one option.
What I want is Forced selection in hidden / backend for the first 5 options regardless user select it or not.
How can I achieve this using JavaScript OR JQuery ?
Thanks.
Since you are using PHP you can try this:
<form action="/domainchecker.php" method="post">
<input type="hidden" name="ext[]" value=".com">
<input type="hidden" name="ext[]" value=".net">
<input type="hidden" name="ext[]" value=".org">
<input type="hidden" name="ext[]" value=".us">
<input type="hidden" name="ext[]" value=".info">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext[]">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
Note the brackets in the fields' names. In your PHP script you'll need something like:
$extensions = $_POST['ext'];
foreach ($extensions as $ext) {
#do something
}
Note that the $extensions array will contain duplicates if the user selected one of the first 5 entries in the dropdown.
You can also use checkboxes instead of a dropdown like this:
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<input type="checkbox" name="ext[]" value=".com" selected="true">
<input type="checkbox" name="ext[]" value=".net" selected="true">
<input type="checkbox" name="ext[]" value=".org" selected="true">
<input type="checkbox" name="ext[]" value=".us" selected="true">
<input type="checkbox" name="ext[]" value=".info" selected="true">
<input type="checkbox" name="ext[]" value=".biz">
<input type="checkbox" name="ext[]" value=".mobi">
<input type="checkbox" name="ext[]" value=".name">
<input type="checkbox" name="ext[]" value=".tv">
<input type="checkbox" name="ext[]" value=".me">
</select>
</fieldset>
<input type="submit" value="Go">
</form>
The PHP is the same, without the duplicate issue
Add them server-side.
you can't do multiple selection on your select if attribute multiple is not set
like this, then have default selection by setting the option's attribute selected="selected"
<fieldset>
<select name="ext" size="5" multiple="multiple" >
<option>.com</option>
<option>.net</option>
<option selected="selected">.org</option>
<option selected="selected">.us</option>
<option selected="selected">.info</option>
<option>.biz</option>
<option selected="selected">.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>

Categories