Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
This is my JavaScript code which is not executing properly. I think I am getting something wrong somewhere.
I want to add a search bar to make a search option in a responsive menu navbar. However, it is showing in desktop but not in mobile menus. That's why I am using jQuery to add this manually.
$(document).ready(function() {
$('ul').append("
<li class='fusion-custom-menu-item fusion-main-menu-search fusion-last-menu-item'>
<a class='fusion-main-menu-icon'></a>
<div class='fusion-custom-menu-item-contents'>
<form action='http://www.heilmancenter.com/' method='get' class='searchform' role='search'>
<div class='search-table'>
<div class='search-field'>
<input type='text' placeholder='Search ...' class='s' name='s' value=''>
</div>
<div class='search-button'>
<input type='submit' value='' class='searchsubmit'>
</div>
</div>
<input type='hidden' value='en' name='lang'>
</form>
</div>
</li>
");
});
remove new lines from the html: either concat all lines or put your html code in one line
The first problem is that you mispelled the function keyword, the second one is that you are creating a mult-line string, but the engine doesn't know it and interprets the second line as a instruction. You need to take a precaution, such as add a backslash at the end of any line.
jQuery(document).ready(function(){
jQuery('ul').append("<li class='fusion-custom-menu-item fusion- main-menu\
-search fusion-last-menu-item'><a class='fusion-main-menu-icon'></a><div\
class='fusion-custom-menu-item-contents'><form\
action='http://www.heilmancenter.com/' method='get' class='searchform'\
role='search'>\
<div class='search-table'>\
<div class='search-field'>\
<input type='text' placeholder='Search ...' class='s' name='s'\
value=''>\
</div>\
<div class='search-button'>\
<input type='submit' value='' class='searchsubmit'>\
</div>\
</div>\
<input type='hidden' value='en' name='lang'></form>\
</div></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
Im new to jQuery but have to get a solution together to add an alert to a generated form (so I cant change the divs, only tack JS and jQuery at the end).
I've been trying to create an alert when a certain radio button is clicked but I cant seem to get it to trigger, had a look through some other threads but no joy! (cant seem to get the code to format properly here!)
<div class="inputWrapper">
<span id="tfa_3575" class="choices horizontal ">
<span class="oneChoice">
<input type="radio" value="tfa_3576" class="" id="tfa_3576" name="tfa_3575">
<label class="label postField" id="tfa_3576-L" for="tfa_3576">Confirmed Submission</label>
</span>
<span class="oneChoice">
<input type="radio" value="tfa_3577" class="" checked="" id="tfa_3577" name="tfa_3575">
<label class="label postField" id="tfa_3577-L" for="tfa_3577">Keep as Draft</label>
</span>
</span>
</div>
I have used the below but I cant get it work! Any Ideas what im doing wrong!
The goal is to check which one is ticked and if one is ticked send an alert and edit button text (though I can manage that last bit!!)
<script type='text/javascript'>
jQuery(document).ready(function(){
$('input:radio[name="tfa_3576"]').change(function(){
alert("test");
});
});
</script>
Thanks!
With a radio button, you change the "checked" state, not the value, therefore the 'change' event doesn't fire. Observe the 'click' event instead.
And make sure the jQuery selector is correct.
The problem is that you do not have a radio button with a name attribute of tfa_3576
$('input:radio').change(function(){
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputWrapper">
<span id="tfa_3575" class="choices horizontal ">
<span class="oneChoice">
<input type="radio" value="tfa_3576" class="" id="tfa_3576" name="tfa_3575">
<label class="label postField" id="tfa_3576-L" for="tfa_3576">Confirmed Submission</label>
</span>
<span class="oneChoice">
<input type="radio" value="tfa_3577" class="" checked="" id="tfa_3577" name="tfa_3575">
<label class="label postField" id="tfa_3577-L" for="tfa_3577">Keep as Draft</label>
</span>
</span>
</div>
You have the name attribute set to the wrong value tfa_3575. Just change the name attribute from tfa_3575 to tfa_3576
<input type="radio" value="tfa_3576" class="" id="tfa_3576" name="tfa_3576">
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Sorry for my spelling
Hi, im trying to make a website showing internet forfeit, so in mySQL database i put all my information then I print it on my web page, the the user click on the forfeit he wants, it brings him to an other page that shows all the forfeit informations... In the while(), I'm making unique form for each forfeit, then on the
The problem here is that the only form sumbitted is the last one created
include_once "DataBase/db.php";
if($internet->num_rows != 0){
while($rows = $internet->fetch_assoc()){
$nom = $rows["nom"];
$id = $rows["id"];
$tech = $rows["technologie"];
$telechargement = $rows["telechargement"];
$televersement = $rows["televersement"];
$utilisation = $rows["utilisation"];
$prix= $rows["prix"];
echo '
<form method="POST" action="Fournisseurs/Videotron.php" id="'.$id.'">
<div class="boxes">
<div class="[ price-option price-option--high ]">
<div class="price-option__detail">
<span class="price-option__cost">'.$nom.'<br>$'.$prix.'</span>
</div>
<input type="hidden" name="id" value="'.$id.'"></input>
<input type="hidden" name="nom" value="'.$nom.'"></input>
<input type="hidden" name="tech" value="'.$tech.'"></input>
<input type="hidden" name="telechargement" value="'.$telechargement.'"></input>
<input type="hidden" name="televersement" value="'.$televersement.'"></input>
<input type="hidden" name="utilisation" value="'.$utilisation.'"></input>
<input type="hidden" name="prix" value="'.$prix.'"></input>
<div class="price-option__purchase">
Submit
</div>
</div>
</div>
';
}
}
You can see what i'm talking about here : http://fournisseursquebec.com/Forfaits.php
just select internet
Thank you!
You are missing the closing </form> tag for every box. Now you have one big form with a lot of repeated fields:
<form method="POST" action="Fournisseurs/Videotron.php" id="'.$id.'">
box 1:
<input type="hidden" name="id" value="'.$id.'"></input>
.... box 2:
<input type="hidden" name="id" value="'.$id.'"></input>
...
The name attribute of the various input is the one that is sent and should be unique inside every form.
Just add the </form> tag in your while loop and it should work.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I use this code to make simple form function with javascript, but doesn't work correctly.
(function(){
var o=document.getElementById('formsz');
o.getElementsByTagName('form')[0].onsubmit=function(){
if(this.version.value == "show"){
alert("show")
}else{
alert("hide")
}
return false
}})();
<div id="formz">
<form action='#'>
<input type="radio" name="version" id="x64" value="show">Show<br/>
<input type="radio" name="version" id="x32" value="hide">Hide<br/>
<button type='submit'>Login</button>
</form>
</div>
Whats wrong?? Why it doesn't work ??? Please help,,,
'formzs' !== 'formz' - .getElementById is finding nothing because you've passed the wrong ID in.
Try using your developer console next time, the error is pretty obvious.
(function(){
var o = document.getElementById('formz');
o.getElementsByTagName('form')[0].onsubmit=function(){
if(this.version.value == "show"){
alert("show")
}else{
alert("hide")
}
return false
};
})();
<div id="formz">
<form action='#'>
<input type="radio" name="version" id="x64" value="show">Show<br/>
<input type="radio" name="version" id="x32" value="hide">Hide<br/>
<button type='submit'>Login</button>
</form>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have done a html Login page which needs to be animated once the page loads, i have added a java script function to do the same. But nothing happens. Here is my code,
<div id="animate-wrapper" class="afterSlide">
<h1>Login</h1>
<form name="login" id="login" >
<div class="row-fluid nowrap">
<div class="input-container">
<label>User Name:</label>
<input id="d_username" name="d_username" autofocus="autofocus" type="text" placeholder="" autocomplete="off">
</div>
<div class="input-container">
<label>Password:</label>
<input id="d_password" name="d_password" type="password" placeholder="" autocomplete="off">
</div>
<div class="input-container">
<label> </label>
<button type="submit" class="btn">Login</button>
<input type="hidden" name="locale" value="en_US">
</div>
</div>
<div id="eval-users-toggle-container">
<div id="eval-users-toggle">
<div>Login as an Evaluator</div>
<div id="eval-arrow" class="closed"></div>
</div>
</div>
</form>
</div>
And Javascript,
<script type="text/javascript">
$(document).ready(function(){
$("#login-background").fadeIn(1000, function() {
$("#login-logo").addClass("afterSlide");
$("#animate-wrapper").addClass("afterSlide");
$("#d_username").focus();
$("#login-footer").addClass("afterSlide");
});
</script>
Use the Error console of your browser to tackle JavaScript problems.
First of all you are not closing the FadeIn() function parameter and the method itself.
EDIT :
Second problem here is your selector for the fadeIn(). When using an "#" as selector you are selecting by id, but you have no element with id "login-background". I;m guessing you want the whole div containing the form to fadeIn once the page is done loading. In that case you need to select the div by id "animate-wrapper".
Change you JavaScript into:
<script type="text/javascript">
$(document).ready(function(){
$("#animate-wrapper").fadeIn(1000, function() {
$("#login-logo").addClass("afterSlide");
$("#animate-wrapper").addClass("afterSlide");
$("#d_username").focus();
$("#login-footer").addClass("afterSlide");
});
});</script>
Last problem here is that the fadeIn() method is trying to fade in a element which is already visible, therefore it is not doing anything. The element you are trying to fadeIn needs to have the style element "display:none" making it not visible at first.
You can change this by adding a style for your div with id "animate-wrapper" at the top of your CSS code, setting "display:none":
#animate-wrapper {
display:none;
}
Or just adding it in the div itself (which is kind of the uglier solution):
<div id="animate-wrapper" class="afterSlide" style="display:none">
EDIT 2 :
If you want the form to slide in from left to the right, like you said in the comments you will have to modify your JavaScript a bit. jQuery does not have a method to slideIn horizontally. You will need to get the width of the wrapper, and animate show the element. Change the row of the fadeIn() method to this:
var wrapper_width = $("#animate-wrapper").width();
$("#animate-wrapper").width(0);
$("#animate-wrapper").show().animate({width: wrapper_width}, 1000, function() {
Close all the methods brackets properly and create all used ids.
Please check you import jquery (file/cdn) into you code. if no then add cdn into page
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and you can use browser console (Shift+Ctrl+J) for check javascript error.
if you are newer then use firebug for debug javascript/jquery.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I searching a method to copy text to an input field, text can be in some tag or - it doesn't matter, but after clicking on this value I need to put this to input field (type text). I think it is possible with JavaScript/jQuery, but I don't know how to write script like this.
Just look at this example
HTML PART
<div class="copy">Copy me</div>
<span class="copy">Hey copy me</span>
Me too
<input type="text" class="paste" value="" />
JQuery PART
$(document).on('click', '.copy', function(e){
e.preventDefault();
$('.paste').val($(this).text());
});
SEE IN ACTION
Give unique id to your input text
for example
and in OnClick event function write following line of code
$("#1").val('some text');
Actually I am not clear about question. Anyway please find below working Fiddle,
Fiddle Here
<input type="text" id="txt_name" placeholder="Enter text to copy"/>
<br>
<br>
<input type="text" id="txt_name_copy" placeholder="Copied Text Here..."/>
<input type="button" id="btn_Run" onclick="fn_copy();" value="Copy Text"/>
Function here :
function fn_copy()
{
var temp = document.getElementById("txt_name").value;
if(temp != "")
{
document.getElementById("txt_name_copy").value = temp;
}
else
alert("Text is Empty");
}