Hi I am trying to create a query string similar to the one available here:
http://andrewu.co.uk/tools/request/examples/example1.html
The problem that I am having is that I have more than one button on my page and even though my id's are unique all of my data is displaying on the action page at the same time. The code that i am using for my buttons is:
<label for="name_1">Name:</label>
<input type="text" name="name" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<br />
<br />
<input type="submit" id='view1' value="Submit" tabindex="2" />
<label for="name_1">Name:</label>
<input type="text" name="name" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<br />
<br />
<input type="submit" id='view2' value="View" tabindex="2" />
I have a lot more than 2 buttons on my page. when a button is clicked I would like to see a result like what is on this page:
http://andrewu.co.uk/tools/request/examples/example1_process.html?name=Andrew+Urquhart
but instead I am getting Name: Donald Duck, Name: Mickey Mouse. What would I have to add or change to obtain just one Name to display at a time but have it be different depending on which button is pressed?
The button is simply submitting the form it is contained in. It's not tied to any particular field.
If you only want one name/value pair to be sent to the server, you'll need separate form elements:
<form id="name_1_form">
<input name="name" value="Andrew" />
<button>Submit</button>
</form>
<form id="name_2_form">
<input name="name" value="Mickey" />
<button>Submit</button>
</form>
the problem with your form is that both inputs have name="name"
and when you submit the form both are send.
you can either:
use different names for you input and select the correct one based on the pressed button, or
use 2 forms, one for each button
use javascript to send the correct data (this can help: http://api.jquery.com/serialize/, http://api.jquery.com/submit/)
<input type="submit" id='view1' name="Name" value="Mickey Mouse" tabindex="2" />
<input type="submit" id='view2' name="Name" value="Donald Duck" tabindex="2" />
or
<input type="text" name="name_1" id="name_1" tabindex="1" size="40" value="Donald Duck" />
<input type="submit" id='view1' name="Name" value="Submit" onClick="this.name=this.form.name_1.value" tabindex="2" />
<input type="text" name="name_2" id="name_2" tabindex="1" size="40" value="Mickey Mouse" />
<input type="submit" id='view2' name="Name" value="View" onClick="this.value=this.form.name_2.value" tabindex="2" />
you can disable the input if you do not want to send the name it twice
Related
I have an HTML form that looks like this:
ar form={
formName: document.getElementById("contactus"),
name: document.getElementById("name"),
email: document.getElementById("email"),
comment: document.getElementById("question")
};
//form submit
form.formName.addEventListener( "submit", checkform );
<form name="contactus" method="post" action="html_form_send.php">
<label for="name">Name:</label><br /><input <input type="text" name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br /><input type="email" name="email" maxlength="50" size="59" required/><br /><br />
<label for="question">Question:</label><br /><textarea name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>
<script type="text/javascript" src="js/validate.js"></script>
The problem is that Firebug shows that form.formName is null, as are the rest of the form values. Why are they not acquiring the elements?
The ultimate goal of the script is to validate the form data. I think the rest of the form will work if the elements will load.
Because you are trying to get the element by ID, when there is no ID in it.
Adding the ID to the form tag should solve the problem:
<form name="contactus" ID="contactus" method="post" action="html_form_send.php">
But you may prefer to change your approach to document.getElementsByName("theName"), since you are not using IDs at all.
Here you go: http://www.w3schools.com/jsref/met_doc_getelementsbyname.asp
Your form has the name contactus, but you're trying to get it by id.
Also, there seems to be a mistake with the name input:
<input <input type="text" name="name" maxlength="50" size="59" autofocus required/>
You'll probably want to remove the first <input.
Finally, if you include your JavaScript at the top of the page, it might run before the page has fully loaded, which means that the form and/or input elements might not be in the DOM yet.
To fix this is to add an event listener to be triggered when the DOM is ready. If you're using JQuery, you do this with:
$(document).ready(function(){
//do stuff here
});
If you have no need for JQuery, don't include it just to do this. You can find more info on how to do this in the answers to this question.
This will work sure..
<form name="contactus" id='contactus' method="post" action="html_form_send.php">
<label for="name">Name:</label><br />
<input type="text" id='name' name="name" maxlength="50" size="59" autofocus required/><br /><br />
<label for="email">E-Mail Address:</label><br />
<input type="email" id='email' name="email" maxlength="50" size="59" required/>
<br /><br />
<label for="question">Question:</label><br />
<textarea name="question" id='question' maxlength="1000" cols="50" rows="6" required></textarea><br /><br />
<input class="c1_scButton" type="submit" value="send"/>
</form>
i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});
Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.
I want to pass same value on multiple input boxes. At the moment below script only display in one box but want show main box result in all multiple input boxes
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#main').change(function() {
$('#catt1').val($(this).val());
});
});//]]>
Main input box
<input type="text" name="name" id="main" />
Multiple inputs
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
<input type="text" name="name" id="catt1" />
For example for one - http://jsfiddle.net/SDHNY/
http://jsfiddle.net/SDHNY/319/
$('#name').change(function() {
$('input').val($(this).val());
});
id should only be used once per page.
If you want to give multiple items an identifier use class
class="catt1"
from this your code would then change to
$('#name').change(function() {
$('.catt1').val($(this).val());
});
where the '.' before catt1 signifies to jquery that you are looking for classes not id's
DEMO : http://jsfiddle.net/SDHNY/321/
You should not use same id for multiple input. Use class for this types of purposes.You should have different name for each input field if you not get value in the jquery by its id and submit it.
TRY THIS:
Main: <input type="text" name="name_main" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name1" class="catt1" />
<input type="text" name="name2" class="catt1" />
<input type="text" name="name3" class="catt1" />
<input type="text" name="name4" class="catt1" />
JQUERY:
$('#main').change(function() {
$('.catt1').val($(this).val());
});
Already a few answers are there, here I am trying to provide a solution using pure javascript without any additional plugins like jQuery,etc..
document.getElementById("main").addEventListener("input",function(){
document.querySelectorAll(".catt1").forEach((e) => e.value = this.value);
});
<input type="text" name="name" id="main" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
<input type="text" name="name" class="catt1" />
I need to know how to stop a form from submitting while pressing "Enter" button within a text.
<form >
<input id="a" name="a" type="text"/>
<input id="address" name="address" type="text" maxlength="300" value=""/>
<input id="showonmap" type="button" value="show on map" onclick="codeAddress()"/>
<input type="submit"/>
</form>
I use JavaScript to click on showonmap button after pushing enter within address text input, but the problem is that right after that the whole form and its submit input works which I want to stop it.
Many thanks in advance.
Basically, remove the input type submit and try something like this:
<form id="myForm">
<input id="a" name="a" type="text" />
<input id="address" name="address" type="text" maxlength="300" value="" />
<input id="showonmap" type="button" value="show on map" onclick="codeAddress()" />
<input type="button" value="submit" onClick="myForm.submit()"/>
</form>
I have this tabbed form with four different text fields and two similar submit buttons. The form is used by patrons to login to their library account. A problem arises when someone tries to login using the text fields in one tab, is unsuccessful, and proceeds to login using the text fields in the other tab. When patrons attempt to login both ways, the information from their last unsuccessful attempt is not cleared out. When switching back and forth between the two different login areas, how do I clear user entered information?
function tabSwitch(new_tab, new_content) {
document.getElementById('ldap_login').style.display='none';
document.getElementById('barcode_login').style.display='none';
document.getElementById(new_content).style.display='block';
document.getElementById('ldap_tab').className='';
document.getElementById('barcode_tab').className='';
document.getElementById(new_tab).className='active';
}
<div id=" " class="tabbed_area">
<form name="patform" method="POST">
<ul id="tabs">
<li>Active students, faculty, and staff</li>
<li>Community, alumni, emeriti, and others</li>
</ul>
<div id="ldap_login" class="content">
Clemson Username: <br />
<input type="text" name="extpatid" id="extpatid" value="" size="20" maxlength="40">
Your iRoar, Blackboard, etc., username <br/>
Password:* <br />
<input name="extpatpw" id="extpatpw" type="text" value="" size="20" maxlength="40">
*Passwords cannot contain the special characters < and >. <br /><br />
<input type="image" src="/screens/pat_submit.gif" border="0" name="" value="submit">
</div>
<div id="barcode_login" class="content">
Last Name: <br />
<input type="text" name="name" id="name" value="" size="20" maxlength="40">
For example, type "Smith." <br />
Barcode: <br />
<input name="code" id="code" type="text" value="" size="20" maxlength="40">
Type the letter plus 10 digit number located on the back of your TigerOne ID card (or 9 digit number plus "1" for old library cards).<br /><br />
<input type="image" src="/screens/pat_submit.gif" border="0" name="" value="submit">
</div>
</form>
</div>
Wrap your 2 tabs into their own forms. That way the submits will only take the inputs from their respective tabs and ignore whatever is on the other tab.
<div id="ldap_login" class="content">
<form>
Clemson Username: <br />
<input type="text" name="extpatid" id="extpatid" value="" size="20" maxlength="40">
Your iRoar, Blackboard, etc., username <br/>
Password:* <br />
<input name="extpatpw" id="extpatpw" type="text" value="" size="20" maxlength="40">
*Passwords cannot contain the special characters < and >. <br /><br />
<input type="image" src="/screens/pat_submit.gif" border="0" name="" value="submit">
</form>
</div>
Etc..