I want to put 'email me' & 'call me' text exactly in front radio button. In code it comes under radio button. Can anybody suggest me how to do this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$('#emailbtn').on('click',function(){
if($('#callbtn').prop('checked'))
{
$('#callbtn').prop('checked','');
}
});
$('#callbtn').on('click',function(){
if($('#emailbtn').prop('checked'))
{
$('#emailbtn').prop('checked','');
}
});
</script>
</head>
html code is
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post" style="padding-left:8%;">
<input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span>
</form>
<form name="form2" method="post" style="padding-left:8%;">
<input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>
<input type="radio" value="chat" name="select" id="chatbtn" onclick="showchat()" />
Chat with me<span id="chathide"><input style="display:none" type="submit" name="chat" id="chat" value="Go"/></span>
Add the radio buttons in the forms: FIDDLE
<form name="form1" method="post" style="padding-left:8%;">
<input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />Email me :<span id="emailhide" style="display:none">
<input type="text" size="50" name="email" id="email_id" placeholder="*************" />
<input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" />
<span id="emailid"></span>
</form>
<form name="form2" method="post" style="padding-left:8%;">
<input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />Call Me :<span id="phonehide" style="display:none">
<input type="text" size="50" name="phn" id="call" placeholder="*************" />
<input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" />
<span id="phoneno"></span>
</form>
$(document).on('ready',function(){$('#emailbtn').on('click',function(){
if($('#callbtn').prop('checked'))
{
$('#callbtn').prop('checked','');
}
});
$('#callbtn').on('click',function(){
if($('#emailbtn').prop('checked'))
{
$('#emailbtn').prop('checked','');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post" style="padding-left:8%;">
<input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span></form>
<form name="form2" method="post" style="padding-left:8%;">
<input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>
Related
I have multiple forms on one page with same structure.
They all have a file input field that has 'onchange' event, which removes the 'disabled' attribute from my submit button when a file is chosen.
The problem is, my function only works for the first element with that class name. How can I make it work for every item with that class?
index.php:
<form class="form">
<input type="file" name="image" onchange="unlock();">
<input type="text" name="title" placeholder="Image title"/>
<input type="submit" value="Add image" class="submit" disabled/>
</form>
<form class="form">
<input type="file" name="image" onchange="unlock();">
<input type="text" name="title" placeholder="Image title"/>
<input type="submit" value="Add image" class="submit" disabled/>
</form>
scripts.js:
function unlock() {
document.querySelector('.submit').removeAttribute("disabled");
}
Any help is appreciated!
Use eventListener
address relatively using selectors
make it a habit to never call anything submit in a form
document.querySelectorAll("[name=image]").forEach(
ele => ele.addEventListener("change",
(e) => e.target.closest(".form").querySelector(".sub").disabled = false
)
);
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
More compatible version
[...document.querySelectorAll("[name=image]")].forEach(function(ele) {
ele.addEventListener("change",
function(e) {
e.target.parentNode.querySelector(".sub").disabled = false;
})
});
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
<form class="form">
<input type="file" name="image">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" value="Add image" class="sub" disabled/>
</form>
Give ID's to all submit buttons and pass the respective ID's in unlock() function.
This removes the disabled from the submit
function unlock(form_id) {
document.getElementById(form_id).removeAttribute("disabled");
}
<form class="form">
<input type="file" name="image" onchange="unlock('form1');">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" id="form1" value="Add image" class="submit" disabled/>
</form>
<form class="form">
<input type="file" name="image" onchange="unlock('form2');">
<input type="text" name="title" placeholder="Image title" />
<input type="submit" id="form2" value="Add image" class="submit" disabled/>
</form>
I have an old Html form already hooked up to Bronto already:
<div id="mc_embed_signup"><form id="lunar-form"><input name="fid" type="hidden" value="3yuzy87x8gjdf73zq9p6lav86dfdw" />
<input name="sid" type="hidden" value="01c3cd9e15ec122d6bada9aeba8dbe44" />
<input name="delid" type="hidden" value="" />
<input name="subid" type="hidden" value="" />
<input name="td" type="hidden" value="" />
<input name="formtype" type="hidden" value="addcontact" />
<input id="field_361909" class="hidden field" name="67765[361909]" type="hidden" value="Weekly" />
<input id="field_361796" class="hidden field" name="67746[361796]" type="hidden" value="Hair Shaman Lunar" />
<script type="text/javascript">
var fieldMaps = {};
</script>
<fieldset id="popupfieldset">
<div class="mc-field-group-email">
<input id="mce-EMAIL" class="text field fb-email" title="7 characters minimum" autocomplete="off" name="74662" pattern=".{7,}" required="" type="email" value="" placeholder="Email" />
i want to add another input for first name, how do I make sure it connects to the bronto database correctly?
I have a form that if have checked TransientDevice, ControllingFrequency, and InterEntity then put Yes in the result input. How do I use multiple checkboxes to accomplish this? It works with one checkbox now, the "test" checkbox. I am not sure how to check for more than one checkbox.
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
<script type="text/javascript">
$(function(){
$('#test').change(function() {
$("#result").val(($(this).is(':checked')) ? "yes" : "");
});
});
</script>
</form>
I believe this is what you're asking for:
$('#TransientDevice, #ControllingFrequency, #InterEntity').change(function() {
$("#result").val(($('#TransientDevice').is(':checked') && $('#ControllingFrequency').is(':checked') && $('#InterEntity').is(':checked')) ? "yes" : "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1" name="form1" method="post" action="add_test.asp">
<input type="checkbox" name="TransientDevice" id="TransientDevice" value="" />
<input type="checkbox" name="DynamicResponse" id="DynamicResponse" value="" />
<input type="checkbox" name="ControllingFrequency" id="ControllingFrequency" value="" />
<input type="checkbox" name="ControllingVoltage" id="ControllingVoltage" value="" />
<input type="checkbox" name="InterEntity" id="InterEntity" value="" />
<input type="checkbox" name="ReliabilityImpact" id="ReliabilityImpact" value="" />
<input type="checkbox" name="test" id="test" class="checkbox" value="" />
<input type="text" name="result" id="result" value="" />
</form>
I have a html form like this :
<form name="form" id="form" method="get" action="www.example.com" enctype="multipart/form-data" onsubmit="window.location.href = 'www.example.com/goods:' + document.getElementsByClassName('goods').serialize; return false;" autocomplete="off">
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="submit" type="submit" class="submit" value="submit" />
</form>
I am trying to pass via onsubmit form an array with the values of the input fields and then redirect to the above url but i cant manage to do it. Is there any way to achieve it?
To define an array in HTML forms you can use [], like this:
<input name="goods[]"/>
I think you are trying to code like this. take name as array
<form name="form" id="form" method="get" action="www.example.com" enctype="multipart/form-data" onsubmit="window.location.href = 'www.example.com/goods:' + document.getElementsByClassName('goods').serialize; return false;" autocomplete="off">
<?php foreach ($goods as $key => $good) { ?>
<input name="goods[]" type="text" id="<?php echo $good['id']; ?>" class="goods" value="" />
<?php } ?>
<input name="submit" type="submit" class="submit" value="submit" />
</form>
I have made form and it is hidden using CSS display property. I have button. I want to show the form when I click that button. I have done everything from my end but still form does not show up.
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Below is my JS function which is not trigerring.
$("button").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
The function showLoginForm() is not defined. Your jquery was listening for a button click, when your button is of type input.
$("input[type=button]").click(function(e) {
$("#loginForm").show();
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" />
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Or with the function defined:
function showLoginForm(){
$("#loginForm").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="button" value="Popup" onclick="showLoginForm();"/>
<form id="loginForm" action="" method="post" style="display:none;">
<p><strong>ID:</strong> </p>
<strong>Name: *</strong> <input type="text" id="Name" name="Name" /><br/>
<strong>Number: *</strong> <input type="text" id="Number" name="Number" /><br/>
<strong>Email: *</strong> <input type="text" id=""="Email" name="Email" /><br/>
<input type="submit" id = "submit" name="submit" value="Submit">
</form>
Your issue is that your input is type button, not a button element itself.
so either changing your input to a button or changing your jquery binding to $('input[type=button]') ought to work
http://jsfiddle.net/4Lz5rsq3/