How can I pass these two variables val_1 & val_2 through a form submission to the function initComparison()?
Here is my code:
<form action="" onsubmit="">
<select name="val_1">
<option value="x">X</option>
<option value="y">Y</option>
<input type="text" value="Enter the product id" name="val_2">
</form>
<script type="text/javascript"> $(document).ready(function(){
initComparison('val_1','val_2','abc','def');
});</script>
Use something like this
<form action="" onsubmit="">
<select name="val_1" id="val_1">
<option value="x">X</option>
<option value="y">Y</option>
</select>
<input type="text" value="Enter the product id" name="val_2" id="val_2">
<input type="button" name="submit" value="submit" id="send">
</form>
<script type="text/javascript">
$("#send").click(function(){
var var1=$("#val_1").val();
var var2=$("#val_2").val();
initComparison(val_1,val_2,'abc','def');
});
</script>
Related
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>
I want to clear all form input data after a submitting all input data to php file how can I clear this data by using jquery function?
You can listen to the submit event and then clear the values of each input like below:
$('#form').submit(function() {
$(this)[0].reset();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="text" />
<input type="submit" />
</form>
This should work...
$('form').on('submit', function() {
var children = $(this).children()
children.each(function(i, el) {
if ($(el).attr('type') === 'checkbox') return $(el).removeAttr('checked')
$(el).val(null)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" />
<br>
<input type="text" />
<br>
<input type="checkbox" />iphone
<input type="checkbox" />Android
<br>
<input type="radio" name="gender" value="male" checked>Male
<br>
<input type="radio" name="gender" value="female">Female
<br>
<input type="radio" name="gender" value="other">Other
<br>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br>
<button type="submit"> submit </button>
</form>
try this
$(document).ready(function(){
$('#submit').click(function(){
$('#my_form').find("input[type=text]").val("");
});
});
document.querySelector(".name").value = "";
<form class="form">
<input type="text" class="name"/>
<input type="submit" value="Send" class="submit"/>
</form>
Then the input value will be always empty
I am trying to display the information below the form after you hit submit. Please help me figure this out. The submit button does not display anything. Can somebody please explain?
Here is my HTML code:
<form id="myform" role="form">
<label for="Name">Name:</label>
<input type="text" class="form-control" id="Name">
<div class="dropdown">
<label for="countries">Country:</label>
<select class="form-control" id="countries">
<option value="">Select a Country:</option>
</select>
<label for="states">State:</label>
<select class="form-control" id="states">
<option value="">Select a State</option>
</select>
<input type="submit" onclick="showInput();">
</form>
</div>
<label> Your input:</label>
<p><span id='display'>
</span></p>
Here is my JavaScript code:
function showInput() {
var output_info = document.getElementById("myform").value;
document.getElementById('display').innerHTML = output_info;
}
try this
<?php
if(isset($_POST["submit"]))
{
echo $_POST["Name"];
echo $_POST["countries"];
echo $_POST["states"];
}
?>
<form id="myform" role="form" action="" method="post">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="Name">
<label for="countries">Country:</label>
<select class="form-control" name="countries">
<option value="">Select a Country:</option>
</select>
<label for="states">State:</label>
<select class="form-control" name="states">
<option value="">Select a State</option>
</select>
<input type="submit" name="submit">
</form>
Try include name attribute at input, select elements within form; use .querySelectorAll() with selector "input:not([type=submit]), select" chained to form to select form elements; for loop to iterate elements returned by .querySelectorAll()
<script>
function showInput(e) {
e.preventDefault();
var output_info = document.getElementById("myform");
var display = document.getElementById("display");
var data = output_info.querySelectorAll("input:not([type=submit]), select");
for (var i = 0; i < data.length; i++) {
display.innerHTML += "name:" + data[i].name + " value:" + data[i].value + "<br>"
}
}
</script>
<form id="myform" role="form">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="Name" id="Name" />
<div class="dropdown">
<label for="countries">Country:</label>
<select class="form-control" id="countries" name="countries">
<option value="">Select a Country:</option>
<option value="abc" selected>abc</option>
</select>
<label for="states">State:</label>
<select class="form-control" id="states" name="states">
<option value="">Select a State</option>
<option value="123" selected>123</option>
</select>
<input type="submit" onclick="showInput(event);" />
</div>
</form>
<label>Your input:</label>
<p><span id='display'>
</span>
</p>
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>
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;">