I am trying to add a like button next to a list of 'destinations'. however, I'm having a really hard time figuring out how to place a button right next to each list item. any help???
Here is my dashboard.html.erb file:
<div class="destination-list">
<h1>Destinations</h1>
<table id="destTable">
<tr class="table-initial">
<td>Name:</td>
<td>Address:</td>
<span class="likebtn-wrapper" data-white_label="true" data-identifier="item_1" data-show_dislike_label="true" data-popup_disabled="true" data-share_enabled="false"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- <td>Delete:</td> -->
</tr>
</table>
<div class="big create">+</div>
</div>
<div class="submit">
<h1>Create Destination</h1>
<form method="get" action="index.html" class="form">
<input type="text" placeholder="Name" class="name-input" name="name" />
<input type="text" placeholder="Address" class="address-input" name="address" />
<input type="submit" class="submit-input my-button" id="create-button"></input>
</div>
Your source parameter in your javascript function call is missing the http: protocol part.
You should edit the tags in your question, though. Your code shows no Rails or Ruby, and your question is purely about Javascript.
On a side note, you should look up unobtrusive javascript :
Rails guides
RailsCasts episode
and probably jQuery as well.
Related
This is driving me up the wall - any help much needed and appreciated.
I have a partial view _Policies.cshtml with a button that has an onclick tag that calls the JavaScript function changeCostCentreNumber():
<div class="row">
#if (User.Claims.Any(x => x.Value.Equals(Site.Infrastructure.Common.MemberType.IsScheme.ToString())))
{
<div class="form-group">
<div class="col-md-4">
<label for="costCentreChange" class="form-label">Change scheme cost centre number</label>
<input id="costCentreChange" class="search-icon form-control" type="text" name="searchFilter" placeholder="" value="" pattern="[a-zA-Z0-9 ]+" maxlength="20"/>
</div>
<div class="col-sm-12">
<input class="btn button button-green" type="submit" id="costCentreNumberSubmitBtn" value="Submit" onclick="changeCostCentreNumber()"/>
</div>
<div class="alert-info alert" id="costCentreNumberChangeAlert" style="display:none">
The cost centre number has been updated successfully.
</div>
</div>
}
</div>
The problem is when I build and inspect the element in Chrome (or Firefox, this seems to be a framework issue) the onclick tag is just not there. If I add the tag in Dev Tools it calls the correct function and does what it's supposed to. I just don't understand why the tag is being stripped out at build time.
I've tried to move the onclick to other elements and divs, inside and outside the condition in the partial and the same behaviour repeats. There's something about this I am simply not grasping.
I know that this probably has something to do with the z-index but I can't seem to figure it out.
The code snippet is:
<form method="get" action="http://www.google.com/search">
<div>
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="15" maxlength="255" value="" />
<input type="submit" value="GO" /></td></tr> <tr><td align="right" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="<website_address>" checked /> SEARCH <br />
</td>
</tr>
</table>
</div>
</form>
I have tried creating a class, but it doesn't seem to affect it:
.search{
z-index:absolute;
}
<form method="get" action="http://www.google.com/search"> <div class="search">
I haven't found too much information in making a search bar bring to the front and have experimented quite a bit. I could try to put the others bring-to-back but I'm really curious if there is a way to do bring-to-front for the search bar.
Z-index works with integers try setting it to different values to see the results
Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.
I hope someone can assist with this. I dont have access to the website backend, so I cant change the js script uploaded there. What I am trying to achieve is make a simple form to submit an issue report and then display a "Thank you" popup and redirect back to main page of the account on our page.
So I can make a form no problem. I copied one of the functioning forms by going to Edit link and clicking on Show Source in Page Body. But I can't stop the default behavior of it going to another page after Submit button is pressed. I suspect it is in js script on the back end. I'll copy code below.
<center>
<b>App Issues Report Form</b>
<br>
</center>
<form action="/Modules/SendForm" method="post" class="form" id="NewForm">
<input name="formFields" value="CONTACTID,AgentName,Notes" type="hidden">
<input name="formLabels" value="Contact ID:,Agent Name:,Notes:" type="hidden">
<input name="fromAddress" value="no-reply#callcenter.com" type="hidden">
<input name="toAddress" value="name#CallCenter.com" type="hidden">
<input name="subject" value="A new message about app" type="hidden">
<input name="emailMsg" value="The following data has been collected:" type="hidden">
<input name="CONTACTID" value="##CONTACTID##" type="hidden">
<input name="companyId" value="##COMPANY_ID##" type="hidden">
<div class="clearfix">
<label>Agent Name:</label>
<div class="input"><input id="AgentName" name="AgentName"
class="validate[required] xlarge" value="##LOGGEDIN_AGENT_FIRST_NAME##
##LOGGEDIN_AGENT_LAST_NAME##" type="text">
</div>
</div>
<div class="clearfix">
<label>Notes:</label>
<div class="input"><textarea id="Notes" name="Notes"
class="validate[required] xxlarge"></textarea>
</div>
</div>
<div class="clearfix grey-highlight">
<div class="input no-label">
<input class="button blue" value="Submit" type="submit">
<input class="button grey" value="Reset" type="reset">
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("NewForm").click(function( event ) {
alert( "Thank you for your feedback" );
event.preventDefault();
});
});
</script>
It used to have only this at the end when I copied the code:
<script type="text/javascript">
$(document).ready(function () {
new setupAjaxForm('NewForm'); });
</script>
I tried searching and suggestions here didnt seem to work:
How to redirect user to another page after Ajax form submission
How to redirect user to another page after Ajax form submission?
http://learn.jquery.com/about-jquery/how-jquery-works/
The first thing you have to look at is action="/Modules/SendForm" - this is what does the redirection. If you don't want to redirect, set this to the name of the page you have the form. Obviously there is a whole lot more to forms and redirection (and some other js code might influence this too, nonetheless we don't see what the function setupAjaxForm is supposed to do here), but this is really the first thing to check / get right.
EDIT: I think I understand it more now: basically if you don't have access to the /Modules/SendForm page (where most probably, among others, like form validation, the redirection also happens, then you can't do much to change the redirection.
I use a template to develop a website. There is a contact form in it which I am having trouble to use. I tried using sources finding from internet to set it to send email to address I want but to no avail.
Here is source for contact form page.
<form id="ContactForm">
<div>
<div class="wrapper"> <span>Your Name:</span>
<input type="text" class="input" />
</div>
<div class="wrapper"> <span>Your E-mail:</span>
<input type="text" class="input" />
</div>
<div class="textarea_box"> <span>Your Message:</span>
<textarea name="textarea" cols="1" rows="1"></textarea>
</div>
<a href="#" class="button1"
onClick="document.getElementById('ContactForm').submit()">Send</a>
<a href="#" class="button1"
onClick="document.getElementById('ContactForm').reset()">Clear</a>
</div>
</form>
php require names for each form element to pass variables correctly, so you need to put a name tag in each input like
<input type="text" name="name" id="id" />
second you need to define the form action, if you are sending parameters to another php file then you need to put the php file source like this:
<form id="ContactForm" method="post" action="path/to/php">
if your are sending the parameters to the same page you can replace pat/to/php with <?php $_SERVER["PHP_SELF"] ?> or simply type in the page's name.