How to keep controllers around for next page and?

1

Hey guys,

I need help here. I am building multistep form and I need to keep controller target values for the next page for receipt, which stays on all pages, how can I do that? I attached the visual. I have orders controller and receipt controller. When I click continue, orders controller disconnects and values are gone. I am adding values to receipt with create element from orders controller.

Thanks, hope I could explain it.

exmple
exmple.png1999×1186 208 KB

2

Could you please share some code? Are you handling the submit event or your form?

3

I am using rails,

The issue I have is, I can’t persist receipt data when I click continue to next page and this applies to the data that are added by this method below when I increment or decrement.

example%202
example 2.png2222×1478 157 KB 

	communicateToReceipt() {            
	
    // if we have the product deal with it.

	let productLineName = document.getElementById("service-name-"+this.element.id)
	let productLinePrice = document.getElementById("price-or-amount-"+this.element.id)
	let bikeOrExtra = (this.element.id == 'basket' || this.element.id == 'child-seat' ? "" : " bike")

    if (productLineName !== null) {

    	// set name of product
    	productLineName.innerText = this.outputTarget.value + " - " + this.element.id + bikeOrExtra
    	
    	// set price of product
    	productLinePrice.innerText = this.subtotalTarget.innerText
    	
    	// remove product line if qty is less than zero
    	if (this.outputTarget.value == 0) {
        	let tobe_removed_less_than_zero = document.getElementById("service-name-"+this.element.id+"-created-by-js")
    		tobe_removed_less_than_zero.parentElement.removeChild(tobe_removed_less_than_zero)
    	}
    // this.receiptController.productTarget.innerHTML = this.calculatorController.data.get('content')	
    
    // if we do not have the product, make one.
    }else{
        
        let li = document.createElement('li')
        let span1 = document.createElement('span')
        let span2 = document.createElement('span')

        li.className = 'list-group-item';
        li.setAttribute("id", "service-name-" + this.element.id + "-created-by-js")
		// li.setAttribute("data-target", 'receipt.product')

        span1.setAttribute("id", "service-name-"+this.element.id)
        span2.setAttribute("id", "price-or-amount-"+this.element.id)
        span1.className = 'leftie';
        span2.className = 'righty';

        span1.innerText = this.outputTarget.value + " - " + this.element.id + bikeOrExtra
        span2.innerText = this.subtotalTarget.innerText

        li.appendChild(span1)
        li.appendChild(span2)

    	document.getElementById('receipt-ul-js').appendChild(li)
		
		this.calculatorController.data.set('content', document.getElementById('receipt-ul-js').cloneNode(true).innerHTML)
		this.receiptController.productTarget.innerHTML = this.calculatorController.data.get('content')


    }
    		// receipt related
		this.receiptController.totalTarget.innerText = parseInt(this.calculatorController.data.get("subtotal")).toFixed(2)
		this.receiptController.taxTarget.innerText = parseInt((this.calculatorController.data.get("subtotal")*8.875)/100).toFixed(2)
		this.receiptController.gtotalTarget.innerText = (parseInt(this.receiptController.totalTarget.innerText) + parseInt(this.receiptController.taxTarget.innerText)).toFixed(2)
		

}

this is what I am trying to persist:
this.calculatorController.data.set('content', document.getElementById('receipt-ul-js').cloneNode(true).innerHTML)

this.productTarget.innerHTML = this.calculatorController.data.get('content')

I have orders, receipt, and some other controllers and they communicate.
In receipt controller I initialize the the content of the receipt in productTarget. Not sure if this code enough.

initialize(){

	this.productTarget.innerHTML = this.calculatorController.data.get('content')
	this.durationTarget.innerText = this.eventController.selectedDuration()
	this.totalTarget.innerText = parseInt(this.calculatorController.data.get("subtotal")).toFixed(2)
	this.taxTarget.innerText = parseInt((this.calculatorController.data.get("subtotal")*8.875)/100).toFixed(2)
	this.gtotalTarget.innerText = (parseInt(this.totalTarget.innerText) + parseInt(this.taxTarget.innerText)).toFixed(2)

}
4

This might not be the best solution, but I solved this with localStorage. thanks for the help. Let me know if you have suggestions on better solving it with stimulus.