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();});

Hidden Field Value in JavaScript is not posted

this error is (again) discussed a thousand times in different forums, but I don't find anything that would help me with my problem. I have a form, a hidden field and some links, that change the value of this field and submit the form. I checked it many times.
the function is called.
the ID is transferred to the function.
the hidden field can be accessed.
the value of the hidden field can be changed.
the called site has no value from the hidden field.
if I use a submit-button instead with an onclick="DeleteEvent(someValue)" the value is transferred over to the called site... so it IS the hidden field...
somehow... someone an idea what it could be?
Submit works, a href not...
Or could it be the problem of the div?
sourcecode:
function DeleteEvent(id){
var hiddenId = document.getElementById('hiddenIdField');
hiddenId.value = id;
document.forms['deleteForm'].submit();
}
<form action="" method="post" name="deleteForm">
<input type="hidden" id="hiddenIdField" name="hiddenField" value="testy" />
<div style="display: none" id="divText18">
<br />
<a href="" onclick="DeleteEvent(18)">
<img src="images/delete.jpg"/>
</a>
</div>
<!--
this is the working part:
<input type="submit" onclick="DeleteEvent(18)" />
-->
</form>

Your form not working because of active link event.
Use event.preventDefault() for onclick events.
To parse event in your function you need to send it to your function.
<form action="" method="post" name="deleteForm">
<input type="hidden" id="hiddenIdField" name="hiddenField" value="testy" />
<div style="display: none" id="divText18">
<br />
<a href="" onclick="DeleteEvent(18,event)">
<img src="images/delete.jpg"/>
</a>
</div>
<!--
this is the working part:
<input type="submit" onclick="DeleteEvent(18)" />
-->
</form>
function DeleteEvent(id,event){
event.preventDefault();
var hiddenId = document.getElementById('hiddenIdField');
hiddenId.value = id;
document.forms['deleteForm'].submit();
}

Prooblem in this code is link tag before image, it sends browser to nowhere on click before submit, so submit can't worki. Just give onclick event to image or give "javascript:;" as href to keep browser on page.
function DeleteEvent(id){
var hiddenId = document.getElementById('hiddenIdField');
hiddenId.value = id;
document.getElementById("deleteForm").submit();
}
<form action="" method="POST" id="deleteForm">
<input type="text" id="hiddenIdField" name="hiddenField" value="testy" />
</form>
<div style="display: inline" id="divText18">
<img src="images/delete.jpg" style="cursor: pointer;" onclick="DeleteEvent(18)" />
</div>
but if you have to use it with href, make it stay on page like
<a href="javascript:;" onclick="DeleteEvent(18)">
<img src="images/delete.jpg />
</a>

How do I clear the previous text field value after submitting the form with out refreshing the entire page?

I am doing a web application using javascript and html that has a form containing a text field, button. When I enter a number in that text field and submit by clicking on that button, text areas are generated dynamically. Once my form is submitted some text areas are created but if I am not satisfied with existing text areas then again I enter some value with out refreshing page. But the text field value entered previously prevails showing the new text areas below the existing text areas on the page.
So, how do I clear the value with out refreshing the page.
<div>
<html>
<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
<input type="button" value="submit" onclick="getFields();">
</div>
</html>
<javascript>
var num_q=document.getElementById('numquest').value;
//code for dynamic creation
</javascript>

try this:
Using jQuery:
You can reset the entire form with:
$("#myform")[0].reset();
Or just the specific field with:
$('#form-id').children('input').val('')
Using JavaScript Without jQuery
<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">
function submitForm() {
// Get the first form with the name
// Hopefully there is only one, but there are more, select the correct index
var frm = document.getElementsByName('contact-form')[0];
frm.submit(); // Submit
frm.reset(); // Reset
return false; // Prevent page refresh
}

You can set the value of the element to blank
document.getElementById('elementId').value='';

Assign empty value:
document.getElementById('numquest').value=null;
or, if want to clear all form fields. Just call form reset method as:
document.forms['form_name'].reset()

you can just do as you get that elements value
document.getElementById('numquest').value='';

<form>
<input type="text" placeholder="user-name" /><br>
<input type=submit value="submit" id="submit" /> <br>
</form>
<script>
$(window).load(function() {
$('form').children('input:not(#submit)').val('')
}
</script>
You can use this script where every you want.

It will clear all the fields.
let inputs = document.querySelectorAll("input");
inputs.forEach((input) => (input.value = ""));

HTML
<form id="some_form">
<!-- some form elements -->
</form>
and jquery
$("#some_form").reset();

I believe it's better to use
$('#form-id').find('input').val('');
instead of
$('#form-id').children('input').val('');
incase you have checkboxes in your form use this to rest it:
$('#form-id').find('input:checkbox').removeAttr('checked');

.val() or .value is IMHO the best solution because it's useful with Ajax. And .reset() only works after page reload and APIs using Ajax never refresh pages unless it's triggered by a different script.

I had that issue and I solved by doing this:
.done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
I added this code after my script as I used jQuery. Try same)
<script type="text/JavaScript">
$(document).ready(function() {
$("#feedback").submit(function(event) {
event.preventDefault();
$.ajax({
url: "feedback_lib.php",
type: "post",
data: $("#feedback").serialize()
}).done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
});
});
</script>
<form id="feedback" action="" name="feedback" method="post">
<input id="name" name="name" placeholder="name" />
<br />
<input id="surname" name="surname" placeholder="surname" />
<br />
<input id="enquiry" name="enquiry" placeholder="enquiry" />
<br />
<input id="organisation" name="organisation" placeholder="organisation" />
<br />
<input id="email" name="email" placeholder="email" />
<br />
<textarea id="message" name="message" rows="7" cols="40" placeholder="сообщение"></textarea>
<br />
<button id="send" name="send">send</button>
</form>

You can assign to the onsubmit property:
document.querySelector('form').onsubmit = e => {
e.target.submit();
e.target.reset();
return false;
};
https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit

i am trying to write a simple textbox (for people to type url in it) with a button in html

i am trying to write a simple textbox (for people to type url in it) with a button in html.
when the button is clicked, it will send the url of the current website that I am browsing to the url that is listed in the textbox using the POST method. is it possible?
i have been looking on forums but don't really know which is the right one cos it seems that there are various way of doing it and i don't really know how to edit them.
my current code:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab) {
//TODO:
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Need to have a POST method written here to send the url of the current
//webpage for example www.youtube.com to url listed in the textbox,
//for example www.google.com
//May I know how can I do it? Thanks.
}
</script>
</head>
<body>
<div id ="container">
<p>Enter URL:</p>
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</div>
</body>
</html>

What you need is a <form> element, which a) has action attribute to indicate where to send the data; b) on submit sends the data (I've added an extra <input type='hidden'> to store your current pages url for sending).
<script type="javascript/text">
function handleButtonEnterClick() {
var textbox_value = document.getElementById("url_textbox").value;
document.getElementById('myUrl').value = window.location;
var form = document.getElementById('myForm');
form.action = textbox_value;
form.submit();
}
</script>
<div id="container">
<form action="" method="post" id="myForm">
<p>Enter URL:</p>
<input type="hidden" id="myUrl" name="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>

This should work:
<html>
<head>
<title>YouTube</title>
<script type="javascript/text">
function handleButtonEnterClick(tab)
{
var textbox_url = document.getElementById("url_textbox");
var textbox_value = textbox_url.value; //eg. value = "www.google.com"
//Set the form action to the textbox value
var the_form = document.getElementById("the_form");
the_form.setAttribute("action", textbox_value);
//Set the value of the url field to the current url
document.getElementById("url").setAttribute("value", window.location);
the_form.submit();
}
</script>
</head>
<body>
<div id ="container">
<form action="" method="post" id="the_form">
<p>Enter URL:</p>
<input type="hidden" name="url" id="url" />
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
value="enter" onclick="handleButtonEnter" />
</form>
</div>
</body>
</html>

The current page location is stored in the JavaScript variable "window.location.href" (thats in Chrome, might be different elsewhere).
You also need to set the action of your form to the URL in the textarea. Suggest you put an id tag on the html form element, and use that id tag to set the action property of the form to the contents of the textbox as part part of the buttons onclick handler.

There are two options:
Use a HTML form, as Ant has shown, set the action and method attributes. Add a submit button inside the form (along with your textbox). When you click on the Submit button, your data will get posted.
Use AJAX to post your form if you want to stay in the current page