We Keep Coding

Need help passing a data attribute into a form redirect

hoping someone can help me with this.
Firstly to summarize, I have a list of items that each have a 'Book Now' button, once the book now button is clicked then they redirect to their respective pages. What I have added in between this is a modal popup.
So when a new user comes to the site, clicks a book now button on one of the list items, the modal will appear. They then type in some details and submit submit the form
Then, ideally, they would be redirected to the appropriate page. The items with the Book Now button are generated through a loop of Expression Engine entries so the links are never hard coded.
My problem is that the code for the modal form itself cannot be inside the loop of entries and so therefore cannot read which URL to link to once it's submitted so I figured I would have to use JavaScript to solve this.
My thinking was to add a data-link attribute to the Book Now button, then in JavaScript tell the form that once submitted it should redirect to the value inside the data-link attribute of the link that was clicked.
I hope this makes sense to someone. Is this possible? Can someone perhaps offer some advice
Thanks
Edit: added code
<a class="booking-tracker" href="#" data-link="{base_url}ticket/{url_title}">Book now</a>
<div class="modal-wrapper" id="wrapper-modal" style="display:none;">
<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
<input type="hidden" name="redirect" value="redirectvalue here pulled from initial link data-attribute">
<input type="submit" value="submit" />
</form>
</div><!--modal-->
<script>
$(document).ready(function() {
$('.booking-tracker').on("click", function (event) {
if(f24('autoId') == '' && f24('personId') == '') {
document.getElementById('wrapper-modal').style.display='block';
}
else {
window.location = $(this).data('link');
}
});
});
</script>
So this script above will trigger the modal if the user is new to the site and hasn't previously recorded their details, otherwise it will link to the default URL of that link, it's just the form redirect that I'm struggling with

Use data on the button to generate a unique url. When the button is clicked get this data and add it to the hidden element of your form. I did up a little example. Hope it helps!
var redirect_link = 'www.thisisyourredirectlink.com/';
$('.click-for-modal').on('click' , function(e){
e.preventDefault(); // Used anchor tags so prevent default
var redirect_id = $(this).attr('id');
var new_redirect = redirect_link + redirect_id;
$('#redirect').removeAttr('value'); //remove if it has been set previously
$('#redirect').attr('value' , new_redirect); // Add current id
console.log(new_redirect);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="click-for-modal" id="1" href="">Button</a>
<a class="click-for-modal" id="2" href="">Button</a>
<a class="click-for-modal" id="3" href="">Button</a>
<a class="click-for-modal" id="4" href="">Button</a>
<a class="click-for-modal" id="5" href="">Button</a>
<a class="click-for-modal" id="6" href="">Button</a>
<div class="modal-wrapper" id="wrapper-modal" style="">
<form>
Name: <input type="text" name="name" id="name" value="" />
Email: <input type="text" name="email" id="email" value="" />
<input id="redirect" type="hidden" name="redirect" value="redirectvalue here pulled from initial link data-attribute">
<input type="submit" value="submit" />
</form>
</div><!--modal-->

Handlebars form submit does not work

I have a form that within a handlebars put the submit does not work, I have to do? Can anyone help?
<script id="chat-window-template" type="text/x-handlebars-template">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
<div class="panel-body" id="chat-bill">
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem..." />
<input type="submit" value="Send" />
</form>
</div>
</script>
$("#messageForm").submit( function() {alert();});

Another possibility for running JS at the time of submit is to return false from the form element onsubmit attribute:
template.hbs
<form id="myForm" onsubmit="myFunc(); return false;">
<input id="textInput" type="text"></input>
<input type="submit"></input>
</form>
...
<script src="js/handleForm.js" type="text/javascript"></script>
handleForm.js
function myFunc() {
console.log("yo");
}
This will log "yo" in the browser console. It works because returning false in the onsubmit attribute prevents the browser's default action (which is an html thing, not a node or hbs thing). So, the page will not reload, and no query string will be added to the hyperlink, but myFunc() will run.
If you want to work with the form data, just get it from the DOM however you like. One option is to put an id on the text input (as I've done in template.hbs) and snag it with jQuery like so:
handleForm.js (revised)
function myFunc() {
var formText = $("#textInput").val();
// Do something with formText
}

Perhaps handler is attached before Dom is compiled, try listening t body events, and filtering by selector, should listen to Dom nodes added in future too...
$(document.body).on("submit", "#messageForm", function() {alert();});

Use javascript to close all opened forms before opening a new one

I'm making an html page with images, where the user clicks their image, to log in to their invoice page. This is what I have so far:
<script type="text/javascript">
function showHideForm(formid)
{
var _form = document.getElementById(formid);
_form.style.display = (_form.style.display != "block") ? "block" : "none";
return false;
}
</script>
<p>
<a href="#" onclick="return showHideForm('hiddenForm1');">
<img src="" width="150" height= "150" />
</a>
</p>
<form id="hiddenForm1" style="display: none;" method="post" action="user1_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
<p>
<a href="#" onclick="return showHideForm('hiddenForm2');">
<img src="" width="150" height="150" />
</a>
</p>
<form id="hiddenForm2" style="display: none;" method="post" action="user2_login.php">
<input type="text" name="user" placeholder="Name" required /><br />
<input type="text" name="pass" placeholder="Password" required/><br />
<input type="submit" name="Submit" value="Submit" />
</form>
It works nicely except that if you click on other images, you get several instances open at the same time.
Is it possible to tack a bit of code to the beginning of the javascript to close any open instances before it runs the code to open a new form?

The logic is simple, have a class for openedform. On click event remove that class from the existing opened forms and add the class to the currently clicked form. Here is how to do it with jquery.
function showHideForm(formid)
{
// var _form=$("#"+formid); (in jquery)
var _form =document.getElementById(formid);
//select all existing opened forms and remove the class
$('.openedForm').removeClass('openedForm');
//add the openedForm class to the currently clicked
$(_form).addClass('openedForm');
return false;
}
Add the following code into your css file.
.openedForm
{
display:block !important;
}
If you need to alter the css of elements using javascript try to use classes. This way you make your javascript code cleaner and readable and your styling logic stays separated from the main logic.
Avoid using inline styles as much as possible.
Working demo:
https://jsbin.com/nigivu/edit?html,css,js,output

Href to another div id on submit in HTML

I have a form which contains a submit button. When I click this submit button I want to go to another div with id home. This is what I am doing now (which is not working):
<input type="submit" class="submit" href="#home" name="action" value="Redirect"/>
For example if I had:
<div id="home"><ul><li>Hello World</li></ul></div>
<input type="submit" class="submit" href="#home" name="action" value="Redirect"/>
This won't work. How can I do this?

You need to have the action of the form be '#home'. Then add a named anchor above the home div.
<html>
<body>
<a name="home"></a>
<div style="height:1500px;">
</div>
<form action="#home">
<input type="submit" value="Home">
</form>
</body>
</html>

href is not a valid attribute for an input element. Try this:
<input type="submit" class="submit" onclick="location.href = '#home'" name="action" value="Redirect"/>
If this is inside of a form, it will submit the form unless you have something preventing that from happening.

just u mention the redirect page in one function.... then that function name calling via onclcik="function_name";
for eg:
function_name
{
some code .......
location.href = 'home.html';
}
<input type="button" onclick="function_name">
your code..........

javascript post submit different from input submit click?

I have this code
<html>
<include jquery>
<script>
function crea()
{
var html = '<form method="get" id="popUpForm" name="popUpForm" action="form_ricorda_dati.php"><hr /><input type="hidden" name="mio" value="1" />input3<input type="text" name="input3" value="" /><br />input4<input type="text" name="input4" value="" /><br /><input type="submit" id="11" value="Procedi" /></form><br />submit';
var div = document.getElementById('cont');
div.innerHTML = html;
}
function prova()
{
$('#popUpForm').submit();
}
</script>
<body>
< a href="#" onClick="crea()">lancia funzione JS</a><br /><br />
<div id="cont"></div>
</body>
</html>
This code:
When I click on <a href="#" onClick="crea()"> it "shows" the form
into the <div id="cont">
Way 1: When I click on <a href=""
onClick="prova()">submit</a> it calls $('#popUpForm').submit();
Way 2: Click on <input type="submit" id="11" value="Procedi"
/>
Problem:
If I click <input type="submit" id="11" value="Procedi" /> I
reload the page and see correct query string (form action="get"). In
the reloaded page, if I "show" the form and click on the input I see the last
input (browser autofill okay).
If I click submit, after, I
don't see the query string. In the reloaded page if I "show" the form and
click on the input I don't see the last input (browser autofill fails).
(I see this problem in Chrome and IE, but not in Firefox.)
Goal
The browser autofill should always show.

The problem might be that the HTML form you are creating with JavaScript was not in the browser's DOM at the moment the page was loading. You can fix this by placing the form's HTML into your body tag to be rendered in the DOM, and hide it with JavaScript until a user clicks the crea link.
The problem number 2 seems to be that your link ( <a href="" onclick="prova()"... ) might go to the url given in the HREF attribute. Since that attribute is empty, your page goes to itself.
To make things easier, you should keep your HTML form out of your JavaScript logic. Also since you are using jQuery, I have converted your functions to binds.
Working example in JSFIddle.
<html>
<head>
<script type="text/javascript" src="url/to/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
var form = jQuery( '#form' ),
crea = jQuery( '#creaLink' ),
prova = jQuery( '#provaLink' );
form.hide();
crea.on( 'click', function(){
form.show();
});
prova.on( 'click', function(){
form.submit();
});
});
</script>
</head>
<body>
lancia funzione JS
<br />
<br />
<div id="form">
<form method="post" id="popUpForm" name="popUpForm">
<hr />
<input type="hidden" name="mio" value="1" />
input3
<input type="text" name="input3" value="" />
<br />
input4
<input type="text" name="input4" value="" />
<br />
<input type="submit" id="11" value="Procedi" />
</form>
<br />
submit
</div>
</body>
</html>​

It might not be a good idea to depend on browser's autofill as different browsers may have different behaviors. Now if I am correct in assuming that you want the values to be present in the fields even after the form data is received and processed at the server, then I would suggest you to make use of AJAX techniques. Send the form data in the background to the server and show only the result once you receive the response.